diff --git a/.gitignore b/.gitignore index 97de1623c4..177f9e76d7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ .* !/.gitignore +!/.stylelintrc.json # IDE stuffs .settings .idea diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000000..095575fd65 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,111 @@ +{ + "extends": ["stylelint-config-standard-scss"], + "plugins": ["stylelint-selector-bem-pattern"], + "rules": { + "max-nesting-depth": [ + 3, + { + "ignoreAtRules": ["media", "supports", "include", "each", "if", "else"], + "ignoreRules": ["/^&/"], + "severity": "warning" + } + ], + "declaration-no-important": [ + true, + { + "severity": "warning" + } + ], + "selector-class-pattern": null, + "scss/at-rule-no-unknown": true, + "scss/dollar-variable-pattern": null, + "no-descending-specificity": null, + "color-function-notation": null, + "color-function-alias-notation": null, + "alpha-value-notation": null, + "shorthand-property-no-redundant-values": null, + "declaration-block-no-redundant-longhand-properties": null, + "value-keyword-case": null, + "rule-empty-line-before": null, + "at-rule-empty-line-before": null, + "comment-empty-line-before": null, + "comment-whitespace-inside": null, + "custom-property-empty-line-before": null, + "declaration-empty-line-before": null, + "custom-property-pattern": null, + "length-zero-no-unit": null, + "selector-pseudo-element-colon-notation": null, + "property-no-vendor-prefix": null, + "value-no-vendor-prefix": null, + "media-feature-range-notation": null, + "declaration-block-single-line-max-declarations": null, + "scss/double-slash-comment-whitespace-inside": null, + "scss/double-slash-comment-empty-line-before": null, + "function-url-quotes": null, + "property-no-deprecated": null, + "block-no-empty": null, + "declaration-block-no-duplicate-properties": null, + "selector-not-notation": null, + "font-family-name-quotes": null, + "selector-id-pattern": null, + "selector-no-vendor-prefix": null, + "scss/load-partial-extension": null, + "number-max-precision": null, + "font-family-no-missing-generic-family-keyword": null, + "selector-type-no-unknown": null, + "selector-attribute-quotes": null, + "property-no-unknown": null, + "no-irregular-whitespace": null, + "keyframes-name-pattern": null, + "declaration-property-value-keyword-no-deprecated": null, + "scss/dollar-variable-empty-line-before": null, + "scss/operator-no-unspaced": null, + "scss/dollar-variable-colon-space-after": null, + "scss/dollar-variable-colon-space-before": null, + "at-rule-no-vendor-prefix": null, + "media-feature-name-no-vendor-prefix": null, + "declaration-block-no-shorthand-property-overrides": null, + "media-feature-name-no-unknown": null, + "no-empty-source": null, + "color-hex-length": null, + "scss/load-no-partial-leading-underscore": null, + "scss/comment-no-empty": null + }, + "overrides": [ + { + "files": ["**/*.module.scss"], + "plugins": ["stylelint-selector-bem-pattern"], + "rules": { + "max-nesting-depth": 3, + "declaration-no-important": true, + "plugin/selector-bem-pattern": { + "preset": "bem", + "componentSelectors": { + "initial": "^\\.{componentName}(?:__[a-z][a-z0-9-]*)?(?:--[a-z][a-z0-9-]*)?$" + } + } + } + }, + { + "files": [ + "public/css/sass/style.scss", + "public/css/sass/commons/_manage.scss", + "public/css/sass/commons/_outsource.scss", + "public/css/sass/commons/_analyze.scss", + "public/css/sass/mbc-style.scss" + ], + "rules": { + "max-nesting-depth": null, + "declaration-no-important": null + } + }, + { + "files": ["public/css/sass/vendor_mc/**"], + "rules": { + "max-nesting-depth": null, + "declaration-no-important": null, + "no-duplicate-selectors": null + } + } + ] +} diff --git a/LICENSE.md b/LICENSE.md index 65c5ca88a6..33cfb3defb 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -60,7 +60,7 @@ version: b) under the GNU GPL, with none of the additional permissions of this License applicable to that copy. - 3. Object Code Incorporating Material from Library Header Files. + 3. Object Code Incorporating Material from Library Header GoToIcon. The object code form of an Application may incorporate material from a header file that is part of the Library. You may convey such object diff --git a/jest.config.js b/jest.config.js index b118890638..7ced6c39eb 100644 --- a/jest.config.js +++ b/jest.config.js @@ -21,4 +21,7 @@ module.exports = { '^.+\\.js$': 'babel-jest', '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css', }, + moduleNameMapper: { + '\\.module\\.(css|scss|sass|less)$': '/test-utils/cssModuleMock.js', + }, } diff --git a/lib/Controller/API/V3/QualityReportControllerAPI.php b/lib/Controller/API/V3/QualityReportControllerAPI.php index 4ba5a5deae..6ef9384b2e 100644 --- a/lib/Controller/API/V3/QualityReportControllerAPI.php +++ b/lib/Controller/API/V3/QualityReportControllerAPI.php @@ -223,6 +223,7 @@ private function _formatSegments(array $segments, array $ttlArray, array $filesI $seg['ice_modified'] = $segment->ice_modified; $seg['is_pre_translated'] = $segment->is_pre_translated; $seg['issues'] = $segment->issues; + $seg['history'] = $segment->history; $seg['last_revisions'] = $segment->last_revisions; $seg['last_translation'] = $segment->last_translation; $seg['locked'] = $segment->locked; diff --git a/lib/Model/QualityReport/HistoryElementStruct.php b/lib/Model/QualityReport/HistoryElementStruct.php new file mode 100644 index 0000000000..eb887570a4 --- /dev/null +++ b/lib/Model/QualityReport/HistoryElementStruct.php @@ -0,0 +1,23 @@ +database); $all_events = $translationVersionDao->getAllRelevantEvents($segmentIds, $chunkId); + $history_events = $translationVersionDao->historyEvents($segment_ids, $chunkId); $segments = []; @@ -241,7 +242,8 @@ public function getSegmentsForQR(array $segment_ids, $isForUI = false) $this->_commonSegmentAssignments($seg, $Filter, $featureSet, $this->chunk, $isForUI); $this->_assignIssues($seg, $issues, $issue_comments); $this->_assignComments($seg, $comments); - $this->_populateLastTranslationAndRevision($seg, $Filter, $all_events, $isForUI); + $this->_populateLastTranslationAndRevision($seg, $Filter, $all_events, $isForUI); + $this->_populateHistory($seg, $Filter, $history_events, $issues, $isForUI); $seg->pee_translation_revise = $seg->getPEEBwtTranslationRevise(); $seg->pee_translation_suggestion = $seg->getPEEBwtTranslationSuggestion(); @@ -252,6 +254,57 @@ public function getSegmentsForQR(array $segment_ids, $isForUI = false) return $segments; } + /** + * Populates the history for a given quality report segment by organizing events and associated issues. + * + * @param QualityReportSegmentStruct $seg The segment structure where the history will be populated. + * @param MateCatFilter $Filter The filter used to process translations for UI rendering. + * @param HistoryElementStruct[] $events An array of SegmentEventsStruct objects representing the events related to the segment. + * @param ShapelessConcreteStruct[] $issues An array of issue objects to associate with the events, filtered by segment and version. + * @param bool $isForUI Indicates whether the translation should be processed for UI display purposes. + * + * @throws Exception + * + * @return void + */ + protected function _populateHistory( + QualityReportSegmentStruct $seg, + MateCatFilter $Filter, + array $events = [], + array $issues = [], + bool $isForUI = false + ): void + { + $elements = []; + + $eventsForThisSegment = array_filter($events, function (HistoryElementStruct $event) use ($seg) { + return $event->id_segment == $seg->sid; + }); + + /** @var HistoryElementStruct $event */ + foreach ($eventsForThisSegment as $event) { + $translation = ($isForUI) ? $Filter->fromLayer0ToLayer2($event->translation) : $event->translation; + + $elements[] = [ + 'status' => $event->status, + 'date' => $event->creation_date ?? $event->create_date, + 'revision_number' => ReviewUtils::sourcePageToRevisionNumber($event->source_page), + 'source_page' => $event->source_page, + 'version_number' => $event->version_number, + 'translation' => $translation, + 'issues' => array_filter($issues, function ($issue) use ($event) { + return + $issue->deleted_at === null && + $event->id_segment == $issue->segment_id && + $event->version_number == $issue->translation_version + ; + }) + ]; + } + + $seg->history = $elements; + } + /** * @return ChunkReviewStruct[] * @throws Exception diff --git a/lib/Model/QualityReport/QualityReportSegmentStruct.php b/lib/Model/QualityReport/QualityReportSegmentStruct.php index e4b5fd9d97..2b7acaaf0a 100644 --- a/lib/Model/QualityReport/QualityReportSegmentStruct.php +++ b/lib/Model/QualityReport/QualityReportSegmentStruct.php @@ -13,6 +13,7 @@ use Matecat\SubFiltering\MateCatFilter; use Model\DataAccess\AbstractDaoObjectStruct; use Model\DataAccess\IDaoStruct; +use Model\DataAccess\ShapelessConcreteStruct; use Model\FeaturesBase\FeatureSet; use Model\Jobs\JobStruct; use Utils\LQA\QA; @@ -106,6 +107,11 @@ public function __construct(array $array_params = []) protected string $tm_analysis_status; + /** + * @var array + */ + public array $history = []; + /** * @return string */ diff --git a/lib/Model/QualityReport/SegmentEventsStruct.php b/lib/Model/QualityReport/SegmentEventsStruct.php index ab0787cb73..2aecdd97fa 100644 --- a/lib/Model/QualityReport/SegmentEventsStruct.php +++ b/lib/Model/QualityReport/SegmentEventsStruct.php @@ -20,7 +20,6 @@ */ class SegmentEventsStruct extends AbstractDaoObjectStruct implements IDaoStruct { - /** * @var int */ @@ -37,5 +36,4 @@ class SegmentEventsStruct extends AbstractDaoObjectStruct implements IDaoStruct * @var int */ protected int $source_page; - } \ No newline at end of file diff --git a/lib/Plugins/Features/TranslationVersions/Model/TranslationVersionDao.php b/lib/Plugins/Features/TranslationVersions/Model/TranslationVersionDao.php index 11f0358c92..63579bb43c 100644 --- a/lib/Plugins/Features/TranslationVersions/Model/TranslationVersionDao.php +++ b/lib/Plugins/Features/TranslationVersions/Model/TranslationVersionDao.php @@ -7,6 +7,7 @@ use Model\DataAccess\AbstractDaoObjectStruct; use Model\DataAccess\ShapelessConcreteStruct; use Model\Jobs\JobStruct; +use Model\QualityReport\HistoryElementStruct; use Model\QualityReport\SegmentEventsStruct; use Model\Translations\SegmentTranslationStruct; use PDO; @@ -248,6 +249,49 @@ public function getVersionsForRevision(int|string $id_job, int|string $id_segmen ); } + /** + * @param array $segments_id + * @param int $job_id + * @return array + * @throws PDOException + */ + public function historyEvents(array $segments_id, int $job_id): array + { + $conn = $this->database->getConnection(); + $prepare_str_segments_id = implode(', ', array_fill(0, count($segments_id), '?')); + + $query = "SELECT + id_segment, + first_sv.version_number, + null as source_page, + null as status, + null as create_date, + first_sv.creation_date, + first_sv.translation + FROM segment_translation_versions first_sv WHERE id_segment IN ( $prepare_str_segments_id ) AND id_job = ? AND version_number = 0 + UNION + SELECT ste.id_segment, ste.version_number, ste.source_page, ste.status, ste.create_date, stv.creation_date, stv.translation FROM segment_translation_events ste + INNER JOIN ( + SELECT creation_date, id_segment, translation, version_number, id_job + FROM segment_translation_versions + WHERE id_segment IN ( $prepare_str_segments_id ) + AND id_job = ? + UNION + SELECT null as creation_date, id_segment, translation, version_number, id_job + FROM segment_translations + WHERE id_segment IN ( $prepare_str_segments_id ) + AND id_job = ? + ) AS stv ON stv.version_number = ste.version_number AND stv.id_segment = ste.id_segment + + WHERE ste.id_segment IN ( $prepare_str_segments_id ) GROUP BY version_number, source_page;"; + + $stmt = $conn->prepare($query); + $stmt->setFetchMode(PDO::FETCH_CLASS, HistoryElementStruct::class); + $stmt->execute(array_merge($segments_id, [$job_id], $segments_id, [$job_id], $segments_id, [$job_id], $segments_id)); + + return $stmt->fetchAll(); + } + /** * @param list $segments_id * @param int $job_id @@ -279,7 +323,7 @@ public function getAllRelevantEvents(array $segments_id, int $job_id): array AND id_job = ? ) AS stv RIGHT JOIN ( - SELECT MAX(version_number) AS version_number, ste.id_segment, ste.source_page + SELECT MAX(version_number) AS version_number, ste.id, ste.id_segment, ste.source_page FROM segment_translation_events ste WHERE id_segment IN ( $prepare_str_segments_id ) AND ste.id_job = ? diff --git a/lib/Utils/Engines/GoogleTranslate.php b/lib/Utils/Engines/GoogleTranslate.php index 31afb8c980..44d3c85817 100644 --- a/lib/Utils/Engines/GoogleTranslate.php +++ b/lib/Utils/Engines/GoogleTranslate.php @@ -55,7 +55,9 @@ protected function _decode(mixed $rawValue, array $parameters = [], $function = return $this->_composeMTResponseAsMatch($all_args[1]['text'], $decoded); } else { $engineResponse = json_decode($decoded['error']['response'], true); - throw new Exception($engineResponse['error']['message'], $engineResponse['error']['code']); + $errorMessage = $engineResponse['error']['message'] ?? 'Unknown error'; + $errorCode = $engineResponse['error']['code'] ?? 500; + throw new Exception($errorMessage, $errorCode); } } else { throw new Exception($rawValue['error']['message'], 500); // already decoded in case of error diff --git a/lib/View/API/V3/Json/Chunk.php b/lib/View/API/V3/Json/Chunk.php index 8d26559c16..79dcc9a5b4 100644 --- a/lib/View/API/V3/Json/Chunk.php +++ b/lib/View/API/V3/Json/Chunk.php @@ -117,7 +117,6 @@ public function renderItem(JobStruct $chunk, ProjectStruct $project, FeatureSet 'subject_printable' => $subjectsHashMap[$chunk->subject], 'owner' => $chunk->owner, 'time_to_edit' => $this->getTimeToEditArray((int)$chunk->id), - 'total_time_to_edit' => $chunk->total_time_to_edit, 'avg_post_editing_effort' => (float)$chunk->avg_post_editing_effort, 'open_threads_count' => (int)$chunk->getOpenThreadsCount(new CommentDao($this->database)), 'created_at' => Utils::api_timestamp($chunk->create_date), diff --git a/nodejs/yarn.lock b/nodejs/yarn.lock index d364b73159..d83aa53c10 100644 --- a/nodejs/yarn.lock +++ b/nodejs/yarn.lock @@ -270,29 +270,24 @@ resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@colors/colors@1.5.0": - version "1.5.0" - resolved "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz" - integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ== - -"@colors/colors@1.6.0": +"@colors/colors@^1.6.0", "@colors/colors@1.6.0": version "1.6.0" resolved "https://registry.npmjs.org/@colors/colors/-/colors-1.6.0.tgz" integrity sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA== -"@dabh/diagnostics@^2.0.2": - version "2.0.3" - resolved "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.3.tgz" - integrity sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA== +"@dabh/diagnostics@^2.0.8": + version "2.0.8" + resolved "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.8.tgz" + integrity sha512-R4MSXTVnuMzGD7bzHdW2ZhhdPC/igELENcq5IjEverBvq5hn1SXCWcsi6eSsdWP0/Ur+SItRRjAktmdoX/8R/Q== dependencies: - colorspace "1.1.x" + "@so-ric/colorspace" "^1.1.6" enabled "2.0.x" kuler "^2.0.0" -"@ioredis/commands@^1.1.1": - version "1.2.0" - resolved "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz" - integrity sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg== +"@ioredis/commands@1.10.0": + version "1.10.0" + resolved "https://registry.npmjs.org/@ioredis/commands/-/commands-1.10.0.tgz" + integrity sha512-UmeW7z4LfctwoQ5wkhVzgq8tXkreED2xZGpX+Bg+zA+WJFZCT6c062AfCK/Dfk81xZnnwdhJCUMkitihRaoC2Q== "@isaacs/cliui@^8.0.2": version "8.0.2" @@ -586,9 +581,9 @@ integrity sha512-SEeaJLb3qBNF/OaXnaR1NmmBbFYk1zC0ZH/52fATcRPLFg/p791YrcyFFy44Bo9sLaGuSuLp5Q6axbb/O+v/RA== "@sinclair/typebox@^0.34.0": - version "0.34.52" - resolved "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.52.tgz" - integrity sha512-XiMQh7qqVlxZzcVD+kkGMNGMzcTrDMLWI7S4x7z1MkCkbDPrekpZXEUK0eZqZFMuHQg2a2DZOcDIh9o5v3Gonw== + version "0.34.49" + resolved "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.49.tgz" + integrity sha512-brySQQs7Jtn0joV8Xh9ZV/hZb9Ozb0pmazDIASBkYKCjXrXU3mpcFahmK/z4YDhGkQvP9mWJbVyahdtU5wQA+A== "@sinonjs/commons@^3.0.1": version "3.0.1" @@ -604,6 +599,14 @@ dependencies: "@sinonjs/commons" "^3.0.1" +"@so-ric/colorspace@^1.1.6": + version "1.1.6" + resolved "https://registry.npmjs.org/@so-ric/colorspace/-/colorspace-1.1.6.tgz" + integrity sha512-/KiKkpHNOBgkFJwu9sh48LkHSMYGyuTcSFK/qMBdnOAlrRJzRSXAOFB5qwzaVQuDl8wAvHVMkaASQDReTahxuw== + dependencies: + color "^5.0.2" + text-hex "1.0.x" + "@socket.io/cluster-adapter@^0.3.0": version "0.3.0" resolved "https://registry.npmjs.org/@socket.io/cluster-adapter/-/cluster-adapter-0.3.0.tgz" @@ -668,15 +671,10 @@ dependencies: "@babel/types" "^7.28.2" -"@types/cookie@^0.4.1": - version "0.4.1" - resolved "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz" - integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q== - "@types/cors@^2.8.12": - version "2.8.17" - resolved "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz" - integrity sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA== + version "2.8.19" + resolved "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz" + integrity sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg== dependencies: "@types/node" "*" @@ -700,11 +698,11 @@ "@types/istanbul-lib-report" "*" "@types/node@*", "@types/node@>=10.0.0": - version "22.10.7" - resolved "https://registry.npmjs.org/@types/node/-/node-22.10.7.tgz" - integrity sha512-V09KvXxFiutGp6B7XkpaDXlNadZxrzajcY50EuoLIpQ6WWYCSvf19lVIazzfIzQvhUN2HjX12spLojTnhuKlGg== + version "25.9.1" + resolved "https://registry.npmjs.org/@types/node/-/node-25.9.1.tgz" + integrity sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg== dependencies: - undici-types "~6.20.0" + undici-types ">=7.24.0 <7.24.7" "@types/stack-utils@^2.0.3": version "2.0.3" @@ -716,6 +714,13 @@ resolved "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.5.tgz" integrity sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw== +"@types/ws@^8.5.12": + version "8.18.1" + resolved "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz" + integrity sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg== + dependencies: + "@types/node" "*" + "@types/yargs-parser@*": version "21.0.3" resolved "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz" @@ -729,9 +734,9 @@ "@types/yargs-parser" "*" "@ungap/structured-clone@^1.3.0": - version "1.3.3" - resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.3.tgz" - integrity sha512-60YRaenCQcVjYEKOcG824+DRGGIQ3VKErcBoAEDJZz5bKIs2ZG+X/H9Nk+Q6EVkwJk5QNApxbrc5QtBSwtrXAg== + version "1.3.1" + resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.1.tgz" + integrity sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ== "@unrs/resolver-binding-linux-x64-gnu@1.12.2": version "1.12.2" @@ -796,9 +801,9 @@ argparse@^1.0.7: sprintf-js "~1.0.2" async@^3.2.3: - version "3.2.4" - resolved "https://registry.npmjs.org/async/-/async-3.2.4.tgz" - integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ== + version "3.2.6" + resolved "https://registry.npmjs.org/async/-/async-3.2.6.tgz" + integrity sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA== babel-jest@30.4.1: version "30.4.1" @@ -870,35 +875,35 @@ base64id@~2.0.0, base64id@2.0.0: resolved "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz" integrity sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog== -baseline-browser-mapping@^2.10.42: - version "2.10.44" - resolved "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.44.tgz" - integrity sha512-T3ghW+sl/ZJ8w1v/yQx3qvJ9040DWoLBz8JT/CILbAKcFyG9b2MRe75v6W5uXjv6uH1lumK2Kv46y2zSkcej0Q== +baseline-browser-mapping@^2.10.12: + version "2.10.33" + resolved "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.33.tgz" + integrity sha512-bA6+tcSLpz2tIEdDXZPpPTIuxBcC4+w6SieaYyfigIa4h8GlFxbA17v22Vx3JUtuZQj9SgOsnbK+aTBzyDyEuw== brace-expansion@^1.1.7: - version "1.1.16" - resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.16.tgz" - integrity sha512-IDw48K2/2kRkg9LdJxurvq3lV3aBgq0REY89duEqFRthjlPdXHKMj7EnQOXVckxzgisinf3nHfrcE2FufFLXMw== + version "1.1.15" + resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.15.tgz" + integrity sha512-EwOCDEex4quD37XhqM3omwtMoJjr//isUZz1JopUNWms+4Z2ViyM/k1YIRePpoVNnQhENnxtFjLaxNHrT7xIUg== dependencies: balanced-match "^1.0.0" concat-map "0.0.1" brace-expansion@^2.0.2: - version "2.1.2" - resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.2.tgz" - integrity sha512-w5JZcKgdhDOgOwm8H+KgbosopHMuGcl6qbulwjtz3SM7I7P3yW1eAjzMPLrIE+NQ9vjgANKHWeMHnrT0OXW1oA== + version "2.1.1" + resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz" + integrity sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA== dependencies: balanced-match "^1.0.0" browserslist@^4.24.0, "browserslist@>= 4.21.0": - version "4.28.6" - resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.28.6.tgz" - integrity sha512-FQBYNK15VMslhLHpA7+n+n1GOlF1kId2xcCg7/j95f24AOF6VDYMNH4mFxF7KuaTdv627faazpOAjFzMrfJOUw== - dependencies: - baseline-browser-mapping "^2.10.42" - caniuse-lite "^1.0.30001803" - electron-to-chromium "^1.5.389" - node-releases "^2.0.51" + version "4.28.2" + resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz" + integrity sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg== + dependencies: + baseline-browser-mapping "^2.10.12" + caniuse-lite "^1.0.30001782" + electron-to-chromium "^1.5.328" + node-releases "^2.0.36" update-browserslist-db "^1.2.3" bser@2.1.1: @@ -908,7 +913,7 @@ bser@2.1.1: dependencies: node-int64 "^0.4.0" -buffer-equal-constant-time@1.0.1: +buffer-equal-constant-time@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz" integrity sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA== @@ -933,10 +938,10 @@ camelcase@^6.3.0: resolved "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz" integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA== -caniuse-lite@^1.0.30001803: - version "1.0.30001806" - resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001806.tgz" - integrity sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw== +caniuse-lite@^1.0.30001782: + version "1.0.30001793" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz" + integrity sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA== chalk@^4.1.2: version "4.1.2" @@ -970,10 +975,10 @@ cliui@^8.0.1: strip-ansi "^6.0.1" wrap-ansi "^7.0.0" -cluster-key-slot@^1.1.0: - version "1.1.2" - resolved "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz" - integrity sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA== +cluster-key-slot@1.1.1: + version "1.1.1" + resolved "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.1.tgz" + integrity sha512-rwHwUfXL40Chm1r08yrhU3qpUvdVlgkKNeyeGPOxnW8/SyVDvgRaed/Uz54AqWNaTCAThlj6QAs3TZcKI0xDEw== co@^4.6.0: version "4.6.0" @@ -985,13 +990,6 @@ collect-v8-coverage@^1.0.2: resolved "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.3.tgz" integrity sha512-1L5aqIkwPfiodaMgQunkF1zRhNqifHBmtbbbxcr6yVxxBnliw4TDOW6NxpO8DJLgJ16OT+Y4ztZqP6p/FtXnAw== -color-convert@^1.9.3: - version "1.9.3" - resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz" - integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== - dependencies: - color-name "1.1.3" - color-convert@^2.0.1: version "2.0.1" resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz" @@ -999,39 +997,37 @@ color-convert@^2.0.1: dependencies: color-name "~1.1.4" -color-name@^1.0.0, color-name@1.1.3: - version "1.1.3" - resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz" - integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== +color-convert@^3.1.3: + version "3.1.3" + resolved "https://registry.npmjs.org/color-convert/-/color-convert-3.1.3.tgz" + integrity sha512-fasDH2ont2GqF5HpyO4w0+BcewlhHEZOFn9c1ckZdHpJ56Qb7MHhH/IcJZbBGgvdtwdwNbLvxiBEdg336iA9Sg== + dependencies: + color-name "^2.0.0" + +color-name@^2.0.0: + version "2.1.0" + resolved "https://registry.npmjs.org/color-name/-/color-name-2.1.0.tgz" + integrity sha512-1bPaDNFm0axzE4MEAzKPuqKWeRaT43U/hyxKPBdqTfmPF+d6n7FSoTFxLVULUJOmiLp01KjhIPPH+HrXZJN4Rg== color-name@~1.1.4: version "1.1.4" resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== -color-string@^1.6.0: - version "1.9.1" - resolved "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz" - integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg== - dependencies: - color-name "^1.0.0" - simple-swizzle "^0.2.2" - -color@^3.1.3: - version "3.2.1" - resolved "https://registry.npmjs.org/color/-/color-3.2.1.tgz" - integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA== +color-string@^2.1.3: + version "2.1.4" + resolved "https://registry.npmjs.org/color-string/-/color-string-2.1.4.tgz" + integrity sha512-Bb6Cq8oq0IjDOe8wJmi4JeNn763Xs9cfrBcaylK1tPypWzyoy2G3l90v9k64kjphl/ZJjPIShFztenRomi8WTg== dependencies: - color-convert "^1.9.3" - color-string "^1.6.0" + color-name "^2.0.0" -colorspace@1.1.x: - version "1.1.4" - resolved "https://registry.npmjs.org/colorspace/-/colorspace-1.1.4.tgz" - integrity sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w== +color@^5.0.2: + version "5.0.3" + resolved "https://registry.npmjs.org/color/-/color-5.0.3.tgz" + integrity sha512-ezmVcLR3xAVp8kYOm4GS45ZLLgIE6SPAFoduLr6hTDajwb3KZ2F46gulK3XpcwRFb5KKGCSezCBAY4Dw4HsyXA== dependencies: - color "^3.1.3" - text-hex "1.0.x" + color-convert "^3.1.3" + color-string "^2.1.3" concat-map@0.0.1: version "0.0.1" @@ -1065,20 +1061,20 @@ cross-spawn@^7.0.3, cross-spawn@^7.0.6: shebang-command "^2.0.0" which "^2.0.1" -debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2, debug@~4.3.4: - version "4.3.7" - resolved "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz" - integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ== - dependencies: - ms "^2.1.3" - -debug@~4.4.1: +debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@~4.4.1, debug@4.4.3: version "4.4.3" resolved "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz" integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA== dependencies: ms "^2.1.3" +debug@~4.3.1: + version "4.3.7" + resolved "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz" + integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ== + dependencies: + ms "^2.1.3" + dedent@^1.6.0: version "1.7.2" resolved "https://registry.npmjs.org/dedent/-/dedent-1.7.2.tgz" @@ -1089,7 +1085,7 @@ deepmerge@^4.3.1: resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz" integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A== -denque@^2.1.0: +denque@2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz" integrity sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw== @@ -1111,10 +1107,10 @@ ecdsa-sig-formatter@1.0.11: dependencies: safe-buffer "^5.0.1" -electron-to-chromium@^1.5.389: - version "1.5.394" - resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.394.tgz" - integrity sha512-Wmt2Gm0o8JWBuGgmc4XZ0u9s1RaCRqhxP47phplmfg04+qypTUurpeJGP45A7Fhv7jdrrVH44PLlR9qXo37cVQ== +electron-to-chromium@^1.5.328: + version "1.5.367" + resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.367.tgz" + integrity sha512-4Mk/mrynCNQ+atY40D3UpmhLWB6AHMbYMlIrPhHcMF6x0L7O0b052FCAsxw1LlaR++UFuNg3D/A6XCuGDa0guQ== emittery@^0.13.1: version "0.13.1" @@ -1142,20 +1138,20 @@ engine.io-parser@~5.2.1: integrity sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q== engine.io@~6.6.0: - version "6.6.2" - resolved "https://registry.npmjs.org/engine.io/-/engine.io-6.6.2.tgz" - integrity sha512-gmNvsYi9C8iErnZdVcJnvCpSKbWTt1E8+JZo8b+daLninywUWi5NQ5STSHZ9rFjFO7imNcvb8Pc5pe/wMR5xEw== + version "6.6.8" + resolved "https://registry.npmjs.org/engine.io/-/engine.io-6.6.8.tgz" + integrity sha512-2agL3ueZhqxoVrfmntO8yuVj+uNSlIOnhykYHk3Cq0ShYPdUjjUiSJrQvXjq01I9jAuI0Zl2YO8Evv5Mqytm5g== dependencies: - "@types/cookie" "^0.4.1" "@types/cors" "^2.8.12" "@types/node" ">=10.0.0" + "@types/ws" "^8.5.12" accepts "~1.3.4" base64id "2.0.0" cookie "~0.7.2" cors "~2.8.5" - debug "~4.3.1" + debug "~4.4.1" engine.io-parser "~5.2.1" - ws "~8.17.1" + ws "~8.20.1" error-ex@^1.3.1: version "1.3.4" @@ -1352,19 +1348,17 @@ inherits@^2.0.3, inherits@2: integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== ioredis@^5.4.2: - version "5.4.2" - resolved "https://registry.npmjs.org/ioredis/-/ioredis-5.4.2.tgz" - integrity sha512-0SZXGNGZ+WzISQ67QDyZ2x0+wVxjjUndtD8oSeik/4ajifeiRufed8fCb8QW8VMyi4MXcS+UO1k/0NGhvq1PAg== - dependencies: - "@ioredis/commands" "^1.1.1" - cluster-key-slot "^1.1.0" - debug "^4.3.4" - denque "^2.1.0" - lodash.defaults "^4.2.0" - lodash.isarguments "^3.1.0" - redis-errors "^1.2.0" - redis-parser "^3.0.0" - standard-as-callback "^2.1.0" + version "5.11.1" + resolved "https://registry.npmjs.org/ioredis/-/ioredis-5.11.1.tgz" + integrity sha512-ehuGcf94bQXhfagULNXrJdfnWO38v070jxSx/qE87Kjzmu2fU7ro5EFAb+OPituLqgfyuQaym5DlrNydW2sJ9A== + dependencies: + "@ioredis/commands" "1.10.0" + cluster-key-slot "1.1.1" + debug "4.4.3" + denque "2.1.0" + redis-errors "1.2.0" + redis-parser "3.0.0" + standard-as-callback "2.1.0" ip-regex@^4.3.0: version "4.3.0" @@ -1376,11 +1370,6 @@ is-arrayish@^0.2.1: resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz" integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg== -is-arrayish@^0.3.1: - version "0.3.2" - resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz" - integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ== - is-fullwidth-code-point@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz" @@ -1814,9 +1803,9 @@ js-tokens@^4.0.0: integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== js-yaml@^3.13.1: - version "3.15.0" - resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.15.0.tgz" - integrity sha512-ttBQIIQPDeLjpPOohtUdXuXUVoA2uIB6fEH9HyJ7234s5mBJ5wTx20njxplLZQgLaOfpmPQA7X2t5AX6tIPbog== + version "3.14.2" + resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz" + integrity sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg== dependencies: argparse "^1.0.7" esprima "^4.0.0" @@ -1837,11 +1826,11 @@ json5@^2.2.3: integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== jsonwebtoken@^9.0.2: - version "9.0.2" - resolved "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz" - integrity sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ== + version "9.0.3" + resolved "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz" + integrity sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g== dependencies: - jws "^3.2.2" + jws "^4.0.1" lodash.includes "^4.3.0" lodash.isboolean "^3.0.3" lodash.isinteger "^4.0.4" @@ -1852,21 +1841,21 @@ jsonwebtoken@^9.0.2: ms "^2.1.1" semver "^7.5.4" -jwa@^1.4.1: - version "1.4.1" - resolved "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz" - integrity sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA== +jwa@^2.0.1: + version "2.0.1" + resolved "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz" + integrity sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg== dependencies: - buffer-equal-constant-time "1.0.1" + buffer-equal-constant-time "^1.0.1" ecdsa-sig-formatter "1.0.11" safe-buffer "^5.0.1" -jws@^3.2.2: - version "3.2.2" - resolved "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz" - integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA== +jws@^4.0.1: + version "4.0.1" + resolved "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz" + integrity sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA== dependencies: - jwa "^1.4.1" + jwa "^2.0.1" safe-buffer "^5.0.1" kuler@^2.0.0: @@ -1891,21 +1880,11 @@ locate-path@^5.0.0: dependencies: p-locate "^4.1.0" -lodash.defaults@^4.2.0: - version "4.2.0" - resolved "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz" - integrity sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ== - lodash.includes@^4.3.0: version "4.3.0" resolved "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz" integrity sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w== -lodash.isarguments@^3.1.0: - version "3.1.0" - resolved "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz" - integrity sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg== - lodash.isboolean@^3.0.3: version "3.0.3" resolved "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz" @@ -1936,7 +1915,7 @@ lodash.once@^4.0.0: resolved "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz" integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg== -logform@^2.4.0, logform@^2.7.0: +logform@^2.7.0: version "2.7.0" resolved "https://registry.npmjs.org/logform/-/logform-2.7.0.tgz" integrity sha512-TFYA4jnP7PVbmlBIfhlSe+WKxs9dklXMTEGcBCIvLhE/Tn3H6Gk1norupVW7m5Cnd4bLcr08AytbyV/xj7f/kQ== @@ -2050,10 +2029,10 @@ node-int64@^0.4.0: resolved "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz" integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw== -node-releases@^2.0.51: - version "2.0.51" - resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.51.tgz" - integrity sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ== +node-releases@^2.0.36: + version "2.0.47" + resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.47.tgz" + integrity sha512-Uzmd6LXpouKo8EUK68IjH4+E01w/hXyV3R3g/geCJo+rXLNfh1xucB+LOzYEOQPSiUK3h/xZf0cQGcSsmyL2Og== normalize-path@^3.0.0: version "3.0.0" @@ -2178,9 +2157,9 @@ picomatch@^2.0.4: integrity sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA== picomatch@^4.0.3: - version "4.0.5" - resolved "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz" - integrity sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A== + version "4.0.4" + resolved "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz" + integrity sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A== pirates@^4.0.7: version "4.0.7" @@ -2228,12 +2207,12 @@ readable-stream@^3.4.0, readable-stream@^3.6.2: string_decoder "^1.1.1" util-deprecate "^1.0.1" -redis-errors@^1.0.0, redis-errors@^1.2.0: +redis-errors@^1.0.0, redis-errors@1.2.0: version "1.2.0" resolved "https://registry.npmjs.org/redis-errors/-/redis-errors-1.2.0.tgz" integrity sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w== -redis-parser@^3.0.0: +redis-parser@3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/redis-parser/-/redis-parser-3.0.0.tgz" integrity sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A== @@ -2263,9 +2242,9 @@ safe-buffer@^5.0.1, safe-buffer@~5.2.0: integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== safe-stable-stringify@^2.3.1: - version "2.4.1" - resolved "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.4.1.tgz" - integrity sha512-dVHE6bMtS/bnL2mwualjc6IxEv1F+OCUpA46pKUj6F8uDbUM0jCCulPqRNPSnWwGNKx5etqMjZYdXtrm5KJZGA== + version "2.5.0" + resolved "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz" + integrity sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA== semver@^6.3.1: version "6.3.1" @@ -2273,9 +2252,9 @@ semver@^6.3.1: integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== semver@^7.5.3, semver@^7.5.4, semver@^7.7.2: - version "7.8.4" - resolved "https://registry.npmjs.org/semver/-/semver-7.8.4.tgz" - integrity sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA== + version "7.8.1" + resolved "https://registry.npmjs.org/semver/-/semver-7.8.1.tgz" + integrity sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg== shebang-command@^2.0.0: version "2.0.0" @@ -2299,43 +2278,36 @@ signal-exit@^4.0.1: resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz" integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw== -simple-swizzle@^0.2.2: - version "0.2.2" - resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz" - integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg== - dependencies: - is-arrayish "^0.3.1" - slash@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz" integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== socket.io-adapter@^2.5.4, socket.io-adapter@~2.5.2, socket.io-adapter@~2.5.5: - version "2.5.5" - resolved "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz" - integrity sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg== + version "2.5.7" + resolved "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.7.tgz" + integrity sha512-e0LyK91f3cUxTmv95/KzoLg47+zF+s/sbxRGDNsyG4dmIP8ZSX8ax6byOxfJXeNNtS/8AZlfD+uP7gBeR7DLlg== dependencies: - debug "~4.3.4" - ws "~8.17.1" + debug "~4.4.1" + ws "~8.20.1" socket.io-parser@~4.2.4: - version "4.2.4" - resolved "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz" - integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew== + version "4.2.6" + resolved "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.6.tgz" + integrity sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg== dependencies: "@socket.io/component-emitter" "~3.1.0" - debug "~4.3.1" + debug "~4.4.1" socket.io@^4.8.1: - version "4.8.1" - resolved "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz" - integrity sha512-oZ7iUCxph8WYRHHcjBEc9unw3adt5CmSNlppj/5Q4k2RIrhl8Z5yY2Xr4j9zj0+wzVZ0bxmYoGSzKJnRl6A4yg== + version "4.8.3" + resolved "https://registry.npmjs.org/socket.io/-/socket.io-4.8.3.tgz" + integrity sha512-2Dd78bqzzjE6KPkD5fHZmDAKRNe3J15q+YHDrIsy9WEkqttc7GY+kT9OBLSMaPbQaEd0x1BjcmtMtXkfpc+T5A== dependencies: accepts "~1.3.4" base64id "~2.0.0" cors "~2.8.5" - debug "~4.3.2" + debug "~4.4.1" engine.io "~6.6.0" socket.io-adapter "~2.5.2" socket.io-parser "~4.2.4" @@ -2370,7 +2342,7 @@ stack-utils@^2.0.6: dependencies: escape-string-regexp "^2.0.0" -standard-as-callback@^2.1.0: +standard-as-callback@2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz" integrity sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A== @@ -2522,10 +2494,10 @@ uid2@1.0.0: resolved "https://registry.npmjs.org/uid2/-/uid2-1.0.0.tgz" integrity sha512-+I6aJUv63YAcY9n4mQreLUt0d4lvwkkopDNmpomkAUz0fAkEMV9pRWxN0EjhW1YfRhcuyHg2v3mwddCDW1+LFQ== -undici-types@~6.20.0: - version "6.20.0" - resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz" - integrity sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg== +"undici-types@>=7.24.0 <7.24.7": + version "7.24.6" + resolved "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz" + integrity sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg== unrs-resolver@^1.7.11: version "1.12.2" @@ -2608,7 +2580,7 @@ winston-daily-rotate-file@^5.0.0: triple-beam "^1.4.1" winston-transport "^4.7.0" -winston-transport@^4.5.0, winston-transport@^4.7.0: +winston-transport@^4.7.0, winston-transport@^4.9.0: version "4.9.0" resolved "https://registry.npmjs.org/winston-transport/-/winston-transport-4.9.0.tgz" integrity sha512-8drMJ4rkgaPo1Me4zD/3WLfI/zPdA9o2IipKODunnGDcuqbHwjsbB79ylv04LCGGzU0xQ6vTznOMpQGaLhhm6A== @@ -2618,21 +2590,21 @@ winston-transport@^4.5.0, winston-transport@^4.7.0: triple-beam "^1.3.0" winston@^3: - version "3.8.2" - resolved "https://registry.npmjs.org/winston/-/winston-3.8.2.tgz" - integrity sha512-MsE1gRx1m5jdTTO9Ld/vND4krP2To+lgDoMEHGGa4HIlAUyXJtfc7CxQcGXVyz2IBpw5hbFkj2b/AtUdQwyRew== + version "3.19.0" + resolved "https://registry.npmjs.org/winston/-/winston-3.19.0.tgz" + integrity sha512-LZNJgPzfKR+/J3cHkxcpHKpKKvGfDZVPS4hfJCc4cCG0CgYzvlD6yE/S3CIL/Yt91ak327YCpiF/0MyeZHEHKA== dependencies: - "@colors/colors" "1.5.0" - "@dabh/diagnostics" "^2.0.2" + "@colors/colors" "^1.6.0" + "@dabh/diagnostics" "^2.0.8" async "^3.2.3" is-stream "^2.0.0" - logform "^2.4.0" + logform "^2.7.0" one-time "^1.0.0" readable-stream "^3.4.0" safe-stable-stringify "^2.3.1" stack-trace "0.0.x" triple-beam "^1.3.0" - winston-transport "^4.5.0" + winston-transport "^4.9.0" "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" @@ -2674,10 +2646,10 @@ write-file-atomic@^5.0.1: imurmurhash "^0.1.4" signal-exit "^4.0.1" -ws@~8.17.1: - version "8.17.1" - resolved "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz" - integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ== +ws@~8.20.1: + version "8.20.1" + resolved "https://registry.npmjs.org/ws/-/ws-8.20.1.tgz" + integrity sha512-It4dO0K5v//JtTXuPkfEOaI3uUN87iYPnqo/ZzqCoG3g8uhA66QUMs/SrM0YK7/NAu+r4LMh/9dq2A7k+rHs+w== y18n@^5.0.5: version "5.0.8" @@ -2695,9 +2667,9 @@ yargs-parser@^21.1.1: integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw== yargs@^17.7.2: - version "17.7.3" - resolved "https://registry.npmjs.org/yargs/-/yargs-17.7.3.tgz" - integrity sha512-GZtjxm/J/4TSxuL3FNYjCmLktBTnIw/rVmKSIyKeYAZpmJB2ig9VauCC5xsa82GNKVKDAqpOn3KVzNt0zmrU0g== + version "17.7.2" + resolved "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz" + integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w== dependencies: cliui "^8.0.1" escalade "^3.1.1" diff --git a/package.json b/package.json index aa42c7e44d..fefe0e0adf 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "postversion": "git add ./inc/version.ini && git commit --amend --no-edit && git tag -d v${npm_package_version} && git tag -a v${npm_package_version} -m'v${npm_package_version}'", "format": "prettier --write .", "lint": "eslint --ignore-path .gitignore .", + "lint:css": "node --experimental-vm-modules node_modules/stylelint/bin/stylelint.mjs \"public/css/sass/**/*.scss\" --ignore-pattern \"**/vendor_mc/**\" --max-warnings 1005", "test": "jest --watchAll", "coverage": "jest --silent --coverage", "watch": "vite", @@ -53,7 +54,6 @@ "react-tagsinput": "^3.19.0", "react-transition-group": "^4.2.2", "react-virtual": "^2.10.4", - "semantic-ui-react": "^2.1.5", "socket.io-client": "^4.8.1", "sprintf-js": "^1.1.2", "uuid": "^13.0.0" @@ -90,6 +90,9 @@ "msw": "2.12.10", "prettier": "^3.0.0", "sass": "^1.66.0", + "stylelint": "^17.13.0", + "stylelint-config-standard-scss": "^17.0.0", + "stylelint-selector-bem-pattern": "^5.0.0", "undici": "^5.28.2", "vite": "^8.0.9", "web-streams-polyfill": "^4.1.0", diff --git a/plugins/aligner b/plugins/aligner index fd5351f176..d9c1d1dfa9 160000 --- a/plugins/aligner +++ b/plugins/aligner @@ -1 +1 @@ -Subproject commit fd5351f176e1bafed15e1eebd2d191245e95976c +Subproject commit d9c1d1dfa90a40865a18c488a2540ee4860f0083 diff --git a/public/css/sass/activity-log-main.scss b/public/css/sass/activity-log-main.scss index 85928eb2dd..ec787d3fd8 100644 --- a/public/css/sass/activity-log-main.scss +++ b/public/css/sass/activity-log-main.scss @@ -1,5 +1,5 @@ @use 'commons/variables'; -@use "commons/colors"; +@use "tokens/colors"; .activity-log-content { display: flex; @@ -18,7 +18,7 @@ .activity-log-table { height: 100%; overflow-y: auto; - border: 1px solid colors.$grey8; + border: 1px solid colors.$grey200; .activity-log-table-columns-name, .activity-log-table-columns-content { @@ -47,7 +47,7 @@ .activity-log-table-columns-content { > * { height: 40px; - border: 1px solid colors.$grey8; + border: 1px solid colors.$grey200; border-top: unset; padding: 10px; border-left: unset; @@ -58,13 +58,13 @@ } &:nth-child(odd) { - background-color: colors.$grey5; + background-color: colors.$grey50; } } .activity-table-column-order { - background-color: colors.$grey9; - border: 1px solid colors.$grey8; + background-color: colors.$grey75; + border: 1px solid colors.$grey200; padding: 5px; justify-content: space-between; cursor: pointer; @@ -97,7 +97,7 @@ width: 160px; label { - color: colors.$grey6; + color: colors.$grey700; } .select { @@ -105,7 +105,7 @@ padding: 5px; &:hover { - border-color: rgba(colors.$grey8, 0.8); + border-color: rgba(colors.$grey200, 0.8); box-shadow: none; } } @@ -115,7 +115,7 @@ width: 250px; font-size: 14px; border-radius: 2px; - border: 1px solid colors.$grey2; + border: 1px solid colors.$grey300; padding: 7px; } } diff --git a/public/css/sass/cattool.scss b/public/css/sass/cattool.scss index 3da153a4ee..e002ac5411 100644 --- a/public/css/sass/cattool.scss +++ b/public/css/sass/cattool.scss @@ -1,5 +1,6 @@ @use 'commons/mixins'; -@use 'commons/_colors'; +@use 'tokens/_colors'; +@use 'commons/variables'; @use 'components/segment/IcuHighlight'; body.cattool { //display: flex; @@ -7,7 +8,7 @@ body.cattool { //flex-direction: column; overflow-y: hidden !important; padding: unset; - background-color: colors.$grey5; + background-color: colors.$grey50; .page-content { display: flex; @@ -73,19 +74,19 @@ body.cattool { } } #context-preview-wrapper:not(.context-preview-wrapper--collapsed) { - border: 1px solid colors.$grey4; + border: 1px solid colors.$grey100; } .context-preview__resize-handle { width: 100px; height: 6px; border-radius: 16px; cursor: row-resize; - background-color: colors.$grey6; + background-color: colors.$grey700; flex-shrink: 0; transition: background-color 0.15s; margin: 0 auto; &:hover { - background-color: colors.$grey1; + background-color: colors.$grey500; } } .context-preview__header { @@ -96,7 +97,7 @@ body.cattool { padding: 4px 16px; flex-shrink: 0; user-select: none; - background-color: colors.$grey5 + background-color: colors.$grey50 } .context-preview__header-title { position: absolute; @@ -148,7 +149,7 @@ body.cattool { svg { width: 16px; height: 16px; - color: colors.$grey7; + color: colors.$grey400; } } .context-preview__container { @@ -164,7 +165,7 @@ body.cattool { .pointer-first-segment { height: 36px; width: 36px; - background: colors.$darkBlue url('/public/img/icons/arrow-up.svg') no-repeat + background: colors.$blue900 url('/public/img/icons/arrow-up.svg') no-repeat center center; background-size: 24px; border-radius: 50%; @@ -175,7 +176,7 @@ body.cattool { bottom: 8px; cursor: pointer; &:hover { - background-color: colors.$darkBlueHover; + background-color: colors.$blue950; } } } @@ -201,8 +202,8 @@ body.cattool { height: 24px; } .icon-warning-sign.qa-icon { - background-color: colors.$red800; - color: #fff; + background-color: colors.$red400; + color: colors.$white; display: flex; padding: 3px; justify-content: center; @@ -210,7 +211,7 @@ body.cattool { gap: 6px; align-self: stretch; cursor: pointer; - border-radius: 8px; + border-radius: variables.$border-radius-default; width: 18px; height: 18px; margin-left: 8px; @@ -231,7 +232,7 @@ body.cattool { line-height: 12px; &.badge-red { color: colors.$white; - background-color: colors.$red800; + background-color: colors.$red400; } &.badge-orange { color: colors.$black; @@ -239,7 +240,7 @@ body.cattool { } &.badge-blue { color: colors.$white; - background-color: colors.$blue800; + background-color: colors.$blue400; } } } @@ -257,33 +258,37 @@ body.cattool { } } -.segment-target-toolbar { +.segment-actions-container { display: flex; + justify-content: end; + flex-wrap: wrap; gap: 8px; - margin-left: -11px; margin-top: 8px; } -.segment-target-toolbar-icon { - width: 32px !important; - height: 32px !important; - padding: 0 !important; +.segment-target-toolbar { + display: flex; + gap: 8px; + flex-grow: 1; + margin-left: -11px; - &:disabled { - color: colors.$grey8 !important; - box-shadow: inset 0 0 0 1px colors.$grey8 !important; + .last-ai-feature-button:not(:last-child) { + margin-right: 15px; - svg { - color: colors.$grey8 !important; + &::after { + position: absolute; + content: ''; + left: 43px; + width: 1px; + height: 100%; + background-color: colors.$grey150; } } } -.segment-target-toolbar-dropdown-trigger { - height: 32px !important; - padding: 0 16px !important; - font-weight: bold; - font-size: 14px !important; +.segment-target-toolbar-icon-bundled { + padding: 0 !important; + font-weight: normal !important; } .lara-styles-dropdown { @@ -291,7 +296,7 @@ body.cattool { .lara-styles-dropdown-item { font-size: 14px; - color: colors.$grey7; + color: colors.$grey400; padding: 12px; border-radius: 6px; text-wrap: auto; @@ -304,10 +309,10 @@ body.cattool { &.lara-styles-dropdown-item-active, &:hover { - background-color: rgba(#0588f9, 0.16); - color: #0099cc; + background-color: rgba(colors.$blue400, 0.16); + color: colors.$blue500; > span { - color: #017cac; + color: colors.$blue600; } } } diff --git a/public/css/sass/common-components.scss b/public/css/sass/common-components.scss index a4a8d20858..4cd8d1d1c1 100644 --- a/public/css/sass/common-components.scss +++ b/public/css/sass/common-components.scss @@ -1,22 +1,48 @@ @use 'components/common/Select'; @use 'components/common/Dropdown'; -@use 'components/common/CookieConsent'; -@use 'components/common/Switch'; -@use 'components/common/MenuButton'; -@use 'components/common/Tooltip'; -@use 'components/common/Button'; -@use 'components/common/Popover'; @use 'components/common/UserDisconnectedBox'; @use 'components/common/UserMenu'; -@use 'components/common/Input'; -@use 'components/common/EmailsBadge'; -@use 'components/common/DropdownMenu'; -@use 'components/common/LabelWithTooltip'; -@use 'components/common/Checkbox'; -@use 'components/common/NumericStepper'; -@use 'components/common/SegmentedControl'; -@use 'components/common/Accordion'; -@use 'components/common/FilenameLabel'; @use 'components/common/OnBoardingTooltip'; -@use 'components/common/ProgressBar'; -@use 'components/common/Badge'; + +.ui-user-dropdown-image { + display: inline-block; + width: 24px; + height: 24px; + border-radius: 50%; + vertical-align: middle; + object-fit: cover; +} + +.user-initials { + display: inline-flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + border-radius: 50%; + background-color: #e8e8e8; + color: rgba(0, 0, 0, 0.6); + font-size: 0.75rem; + font-weight: 700; + vertical-align: middle; + cursor: default; +} + +.cancel-label { + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + line-height: 1; +} + +.status-dot { + display: inline-block; + width: 0.875rem; + height: 0.875rem; + border-radius: 50%; + vertical-align: middle; + flex-shrink: 0; + margin-right: 4px; +} + diff --git a/public/css/sass/common-main.scss b/public/css/sass/common-main.scss index deb89f410e..16fdc27af7 100644 --- a/public/css/sass/common-main.scss +++ b/public/css/sass/common-main.scss @@ -1,6 +1,8 @@ +@use 'tokens/z-index'; +@use 'tokens/spacing'; @use 'commons/variables'; -@use 'commons/colors'; -@use 'vendor_mc/semantic/matecat_semantic'; +@use 'tokens/colors'; +@use 'commons/layout'; @use "commons/typography"; @use 'commons/matecat_fonts'; diff --git a/public/css/sass/common-modals.scss b/public/css/sass/common-modals.scss index fc5006d5e5..bd25d218d9 100644 --- a/public/css/sass/common-modals.scss +++ b/public/css/sass/common-modals.scss @@ -1,29 +1,7 @@ @use 'modals/instructionsModal'; @use 'modals/tmShareModal'; @use 'modals/PreferenceModal'; -@use 'commons/colors'; - -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: 'Calibri', 'Helvetica Neue', Arial, Helvetica, sans-serif; -} - -h2 { - font-size: 22px; -} - -a { - font-family: 'Calibri', 'Helvetica Neue', Arial, Helvetica, sans-serif; -} - -::-webkit-input-placeholder { - /* Chrome/Opera/Safari */ - font-family: 'Calibri', 'Helvetica Neue', Arial, Helvetica, sans-serif; -} +@use 'tokens/colors'; /***********************/ /***** Login Footer ****/ @@ -34,11 +12,11 @@ a { text-decoration: underline; float: left; cursor: pointer; - color: colors.$linkBlue; + color: colors.$blue700; &:hover { text-decoration: none; - color: colors.$linkBlueHover; + color: colors.$blue400; } } @@ -69,7 +47,7 @@ a { .forgot-password { cursor: pointer; text-decoration: underline; - color: colors.$linkBlue; + color: colors.$blue700; } .dqf-modal input[type='text'], @@ -77,34 +55,32 @@ a { .login-container-left input, .register-form-container input[type='text'], .register-form-container input[type='password'], -.forgot-password-modal input, -.reset-password-modal input, .user-info-form input { margin-top: 5px; font-size: 14px; width: 100%; padding: 0.7em 0.6em; display: inline-block; - border: 1px solid #ccc; - box-shadow: inset 0 1px 3px #ddd; + border: 1px solid colors.$grey200; + box-shadow: inset 0 1px 3px colors.$grey200; border-radius: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 15px; - color: #333; + color: colors.$grey1300; } .dqf-modal input[disabled] { - color: #999; + color: colors.$grey400; cursor: not-allowed; - background: colors.$grey2; + background: colors.$grey300; } .user-info-form input { margin-top: 5px; width: 100%; - color: #000; + color: colors.$black; } .login-button, @@ -125,35 +101,10 @@ a { width: 245px; } -.forgot-password-modal, -.reset-password-modal { - width: 100%; - margin: 0 auto; - padding: 20px 0; -} - -.forgot-password-modal { - background: url(/public/img/matecat_watch-left-border.png) no-repeat -34px - 136px; - background-size: 23%; - /*width: 385px;*/ - padding: 25px 96px; - text-align: right; -} - -.forgot-password-modal p { - text-align: left; -} - -.reset-password-modal { - padding: 5% 10%; - width: 80%; -} - .preference-modal-message { - box-shadow: 0 2px 2px #e2e2e2; + box-shadow: 0 2px 2px colors.$grey100; border-radius: 2px; - border: 1px solid #ccc; + border: 1px solid colors.$grey200; line-height: 20px; padding: 10px 15px; background: rgb(195, 224, 195); @@ -193,107 +144,121 @@ a { width: 100%; height: 100%; overflow: auto; - background-color: rgb(0, 0, 0); + background-color: colors.$black; background-color: rgba(0, 0, 0, 0.4); - p { - line-height: 25px; - } +} - .matecat-modal-header { - text-align: left; - min-height: 50px; - border-radius: 4px 4px 0 0; - overflow: visible; - max-height: inherit; - font-size: 23px; - background: #002b5c; - padding: 7px 10px 7px 24px; - background-size: 35px; - color: #fff; - margin: 0 !important; - display: grid; - grid-template-columns: 40px 1fr 24px; - position: relative; - grid-column-gap: 16px; - align-items: center; +.matecat-modal p, +.matecat-modal-overlay p { + line-height: 25px; +} - h2 { - margin: 0 !important; - line-height: 30px; - font-size: 24px; - width: auto !important; - float: none !important; - font-family: Calibri, Arial, Helvetica, sans-serif; - font-weight: normal; - } - } +.matecat-modal .matecat-modal-header, +.matecat-modal-overlay .matecat-modal-header { + text-align: left; + min-height: 50px; + border-radius: 16px 16px 0 0; + overflow: visible; + max-height: inherit; + font-size: 23px; + background: colors.$blue900; + padding: 7px 10px 7px 24px; + background-size: 35px; + color: colors.$white; + margin: 0 !important; + display: grid; + grid-template-columns: 40px 1fr 40px; + position: relative; + grid-column-gap: 8px; + align-items: center; +} - .modal-logo { - background-size: inherit; - background: url(/public/img/logo_matecat_small_white.svg) no-repeat; - background-position-y: center; - background-size: contain; - width: 35px; - height: 35px; - } +.matecat-modal .matecat-modal-header h2, +.matecat-modal-overlay .matecat-modal-header h2 { + margin: 0 !important; + line-height: 30px; + font-size: 24px; + width: auto !important; + float: none !important; + font-family: Calibri, Arial, Helvetica, sans-serif; + font-weight: normal; +} - /* Modal Body */ - .matecat-modal-body { - min-height: 50px; - height: 100%; - /*color: #000;*/ - background-color: colors.$grey5; - border-radius: 0 0 4px 4px; - margin: 0 auto; - overflow: hidden; - text-align: left; +.matecat-modal .modal-logo, +.matecat-modal-overlay .modal-logo { + background-size: inherit; + background: url(/public/img/logo_matecat_small_white.svg) no-repeat; + background-position-y: center; + background-size: contain; + width: 35px; + height: 35px; +} - h1 { - text-align: center; - } - } +/* Modal Body */ +.matecat-modal .matecat-modal-body, +.matecat-modal-overlay .matecat-modal-body { + min-height: 50px; + height: 100%; + /*color: #000;*/ + background-color: colors.$grey50; + border-radius: 0 0 16px 16px; + margin: 0 auto; + overflow: hidden; + text-align: left; +} - /* Modal Footer */ - .matecat-modal-footer { - padding: 2px 16px; - color: black; - text-align: left; - min-height: 30px; - } +.matecat-modal .matecat-modal-body h1, +.matecat-modal-overlay .matecat-modal-body h1 { + text-align: center; +} - /* Modal Content */ - .matecat-modal-content { - margin: auto; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - width: 60%; - border-radius: 4px; - -webkit-animation-name: animatetop; - -webkit-animation-duration: 0.4s; - animation-name: animatetop; - animation-duration: 0.4s; - text-align: center; - max-width: 640px; - min-width: 400px; - z-index: 2; - .half-form-left { - margin-right: 4%; - } +/* Modal Footer */ +.matecat-modal .matecat-modal-footer, +.matecat-modal-overlay .matecat-modal-footer { + padding: 2px 16px; + color: colors.$black; + text-align: left; + min-height: 30px; +} - .half-form { - width: 48%; - float: left; - } - } - .matecat-modal-background { - width: 100%; - height: 100%; - z-index: 1; - position: relative; - } +/* Modal Content */ +.matecat-modal .matecat-modal-content, +.matecat-modal-overlay .matecat-modal-content { + margin: auto; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 60%; + border-radius: 4px; + -webkit-animation-name: animatetop; + -webkit-animation-duration: 0.4s; + animation-name: animatetop; + animation-duration: 0.4s; + text-align: center; + max-width: 640px; + min-width: 400px; + z-index: 2; +} + +.matecat-modal .matecat-modal-content .half-form-left, +.matecat-modal-overlay .matecat-modal-content .half-form-left { + margin-right: 4%; +} + +.matecat-modal .matecat-modal-content .half-form, +.matecat-modal-overlay .matecat-modal-content .half-form { + width: 48%; + float: left; +} + +.matecat-modal .matecat-modal-background, +.matecat-modal-overlay .matecat-modal-background { + width: 100%; + height: 100%; + z-index: 1; + position: relative; } .matecat-modal-overlay { @@ -303,71 +268,62 @@ a { left: 6px; bottom: 48px; top: unset; - width: 325px; - height: 342px; + width: 380px; + height: 380px; overflow: auto; background-color: unset; - .modal-logo { - width: 34px; - } +} - .matecat-modal-content { - width: 320px; - min-width: unset; - box-shadow: - 0 0 0 #e0e0e0, - 0 0 2px rgba(0, 0, 0, 0.12), - 0 2px 4px rgba(0, 0, 0, 0.24) !important; - } +.matecat-modal-overlay .modal-logo { + width: 34px; +} - .matecat-modal-header { - text-align: left; - min-height: 32px; - border-radius: 4px 4px 0 0; - overflow: visible; - max-height: inherit; - background: #002b5c; - padding: 6px 10px 3px 24px; - background-size: 31px; - color: #fff; - margin: 0 !important; - display: grid; - grid-template-columns: 35px 1fr 24px; - position: relative; - grid-column-gap: 16px; - - h2 { - font-size: 21px; - } - } +.matecat-modal-overlay .matecat-modal-content { + width: 340px; + min-width: unset; + box-shadow: + 0 0 0 colors.$grey200, + 0 0 2px rgba(0, 0, 0, 0.12), + 0 2px 4px rgba(0, 0, 0, 0.24) !important; +} - .matecat-modal-body { - h1 { - font-size: 1.7rem; - } +.matecat-modal-overlay .matecat-modal-header { + text-align: left; + min-height: 32px; + border-radius: 4px 4px 0 0; + overflow: visible; + max-height: inherit; + background: colors.$blue900; + padding: 6px 10px 3px 24px; + background-size: 31px; + color: colors.$white; + margin: 0 !important; + display: grid; + grid-template-columns: 35px 1fr 40px; + position: relative; + grid-column-gap: 8px; +} - .matecat-modal-textarea { - padding: 0; - } +.matecat-modal-overlay .matecat-modal-header h2 { + font-size: 21px; +} - .matecat-modal-middle { - padding: 0 20px; - } +.matecat-modal-overlay .matecat-modal-body h1 { + font-size: 1.7rem; +} - .matecat-modal-top, - .matecat-modal-bottom { - padding: 15px 17px; - } +.matecat-modal-overlay .matecat-modal-body .matecat-modal-textarea { + padding: 0; +} - .ui.button { - font-size: 15px; - } +.matecat-modal-overlay .matecat-modal-body .matecat-modal-middle { + padding: 0 20px; +} - .ui.button.cancel-button { - //margin-right: 45px; - } - } +.matecat-modal-overlay .matecat-modal-body .matecat-modal-top, +.matecat-modal-overlay .matecat-modal-body .matecat-modal-bottom { + padding: 15px 20px; } .user-link { @@ -381,21 +337,6 @@ a { gap: 16px; } -/* The Close Button */ -.close-matecat-modal { - color: #fff; - float: right; - font-size: 20px; - font-weight: bold; -} - -.close-matecat-modal:hover, -.close-matecat-modal:focus { - color: red; - text-decoration: none; - cursor: pointer; -} - /* buttons */ .matecat-modal-content .disabled, @@ -405,7 +346,7 @@ a { cursor: default; -moz-box-shadow: none; -webkit-box-shadow: none; - border: 1px solid #666; + border: 1px solid colors.$grey700; } .matecat-modal-content .disabled, @@ -414,232 +355,36 @@ a { cursor: default; -moz-box-shadow: none; -webkit-box-shadow: none; - background: #d6d6d6; -} - -.x-popup, -.x-popup2 { - font-family: 'icomoon'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - &:hover { - color: colors.$darkBlueTransparent; - } -} - -.x-popup:before, -.x-popup2:before { - content: '\f057'; + background: colors.$grey200; } .matecat-modal-content, .matecat-modal-overlay-content { font-size: 16px; font-family: Calibri, Arial, Helvetica, sans-serif; +} - .matecat-modal-middle, - .matecat-modal-bottom, - .matecat-modal-top { - padding: 25px; - - .ui.members-list { - min-height: 45px; - - .ui.divided.list { - top: 0px; - left: 0px; - bottom: 0px; - right: 0px; - - overflow-y: auto; - max-height: 210px; - position: relative !important; - padding: 0; - - .item { - border-top: none !important; - } - } - - ::-webkit-scrollbar { - width: 10px; - } - - /* Track */ - ::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); - -webkit-border-radius: 10px; - border-radius: 10px; - } - - /* Handle */ - ::-webkit-scrollbar-thumb { - -webkit-border-radius: 10px; - border-radius: 10px; - background: #a7a5a5; - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); - } - - ::-webkit-scrollbar-thumb:window-inactive { - background: #a7a5a5; - } - - &.team { - .item { - padding: 5px 5px 5px 0; - - &:hover { - .mini.ui.button.right.floated { - display: inherit; - } - - .content.pending-msg { - display: none; - } - } - - .image { - width: 40px !important; - max-width: 40px; - height: 40px; - background-color: colors.$grey2; - border-radius: 50%; - vertical-align: middle; - text-align: center; - font-size: 17px; - } - - .content.user { - font-weight: bold; - width: 340px; - - &.invited { - font-weight: 100; - } - } - - .content.email-user-invited { - font-weight: 100; - font-size: 14px; - color: colors.$grey1; - } - - .content.pending-msg { - font-weight: 100; - font-size: 14px; - color: colors.$grey1; - white-space: nowrap; - } - - .mini.ui.button.right.floated { - margin-top: 6px; - border: 1px solid #797979; - display: inherit; - border-radius: 2px; - font-family: - 'Calibri', 'Helvetica Neue', Arial, Helvetica, sans-serif; - font-size: 14px; - padding: 6px 15px; - background-color: #f6f6f6; - white-space: nowrap; - - &:hover { - box-shadow: - 0 0 0 #e0e0e0, - 0 0 2px rgba(0, 0, 0, 0.12), - 0 2px 4px rgba(0, 0, 0, 0.24) !important; - } - - &:focus { - box-shadow: none !important; - } - - &:active { - box-shadow: none !important; - } - } - - .mini.ui.primary.button { - border: 1px solid #797979; - border-radius: 2px; - font-family: - 'Calibri', 'Helvetica Neue', Arial, Helvetica, sans-serif; - font-size: 14px; - padding: 6px 15px; - font-family: - 'Calibri', 'Helvetica Neue', Arial, Helvetica, sans-serif; - - i { - opacity: 1; - } - } - - .ui.primary.button { - border: 1px solid #797979; - border-radius: 2px; - font-family: - 'Calibri', 'Helvetica Neue', Arial, Helvetica, sans-serif; - } - - .mini.ui.icon.button { - width: 30px; - height: 30px; - line-height: 20px; - text-align: center; - vertical-align: bottom; - border: 1px solid #797979; - border-radius: 2px; - } - } - - .pending-invitation { - display: flex; - align-items: center; - - .email { - padding-left: 0.5em; - } - - .mini.ui.button.right.floated { - margin-top: 0; - } - - > :last-child { - display: flex; - align-items: center; - margin-left: auto; - } - } - } - } - } - - .matecat-modal-text { - padding: 10px 10px; - font-size: 17px; - } - - .matecat-modal-textarea { - padding: 10px 10px; - resize: none; +.matecat-modal-content .matecat-modal-middle, +.matecat-modal-content .matecat-modal-bottom, +.matecat-modal-content .matecat-modal-top, +.matecat-modal-overlay-content .matecat-modal-middle, +.matecat-modal-overlay-content .matecat-modal-bottom, +.matecat-modal-overlay-content .matecat-modal-top { + padding: 25px; +} - textarea { - padding: 10px; - border: 1px solid grey; - border-radius: 4px; - } - } +.matecat-modal-content .check-conditions, +.matecat-modal-overlay-content .check-conditions { + margin-left: 5px; +} - .check-conditions { - margin-left: 5px; - } +.matecat-modal-content .buttons-container, +.matecat-modal-overlay-content .buttons-container { + display: flex; + gap: 16px; + justify-content: flex-end; + width: 100%; + padding: 20px; } .pull-left { @@ -650,43 +395,11 @@ a { float: right !important; } -.create-team-modal, -.modify-team-modal, -.shortcuts-modal { - .create-team { - font-family: 'Calibri', 'Helvetica Neue', Arial, Helvetica, sans-serif; - padding: 11px 22px; - vertical-align: top; - font-size: 18px; - margin-right: 0px; - border-radius: 2px; - - &.primary.button { - border-radius: 2px; - } - } -} - -.modify-team-modal { -} - -.ui.fluid.input > input { - font-family: 'Calibri', 'Helvetica Neue', Arial, Helvetica, sans-serif; - box-shadow: inset 0 1px 3px #ddd; - font-size: 15px; -} - -.ui.multiple.search.dropdown { - width: 100%; - box-shadow: inset 0 1px 3px #ddd; - font-size: 15px; -} - .btn-cancel.outsource-cancel-date { height: 16px; &:hover { - color: #333333; + color: colors.$grey1300; } } @@ -708,7 +421,7 @@ a { .divider-line { height: 2px; width: 40%; - background-color: #c5c5c5; + background-color: colors.$grey200; margin-top: 10px; display: block; float: left; @@ -717,375 +430,397 @@ a { span { float: left; width: 20%; - color: #656565; + color: colors.$grey700; } } -.matecat-modal-content { - .message-modal { - padding: 25px 0; - } - .matecat-modal-buttons { - display: flex; - gap: 8px; - justify-content: flex-end; - padding: 20px; - width: 100%; - } +.matecat-modal-content .message-modal { + padding: 25px 0; +} - .matecat-modal-middle { - padding: 0 25px; +.matecat-modal-content .modal-buttons { + display: flex; + justify-content: flex-end; + width: 100%; + gap: 16px; +} - .ui.primary.button, - .ui.red.button { - font-family: 'Calibri', 'Helvetica Neue', Arial, Helvetica, sans-serif; - border: 1px solid #797979; - border-radius: 2px; - } - } +.matecat-modal-content .matecat-modal-middle { + padding: 0 25px; +} - .create-team-modal { - .ui.members-list { - .ui.divided.list { - .item:first-child { - } - } - - .ui.divided.list.disabled { - border: none; - background-color: white; - } - } - } +.matecat-modal-content .modify-team-modal .no-result { + font-size: 14px; + color: colors.$grey700; + padding: 7px; +} - .modify-team-modal { - .matecat-modal-top { - .ui.fluid.input { - i { - display: none; - } - - &:hover { - i { - display: inherit; - } - } - } - - .ui.icon.input > input:focus ~ i.icon { - opacity: 1; - display: inherit; - } - } +.matecat-modal-content .change-team-modal { + height: 305px; +} - .ui.members-list { - //min-height: 180px; - min-height: initial !important; +.matecat-modal-content .change-team-modal .matecat-modal-top .move-ribbon { + background: colors.$grey100; + padding: 8px 15px; + border-radius: 4px; +} - .ui.divided.list { - height: 210px; +.matecat-modal-content .change-team-modal .matecat-modal-top .move-ribbon .project-name { + font-weight: 600; +} - .item:first-child { - //border-top: none !important; - } - } - } +.matecat-modal-content .change-team-modal .matecat-modal-top .move-ribbon .project-id { + float: right; +} - .no-result { - font-size: 14px; - color: #666666; - padding: 7px; - } - } +.matecat-modal-content .change-team-modal .button { + font-size: 18px; + padding: 11px 22px; +} - .change-team-modal { - height: 305px; +.matecat-modal-content .change-team-modal .dropdown .menu { + max-height: 85px !important; +} - .matecat-modal-top { - .move-ribbon { - background: #e8e8e8; - padding: 8px 15px; - border-radius: 4px; +.matecat-modal-content .change-team-modal .dropdown ::-webkit-scrollbar { + width: 10px; +} - .project-name { - font-weight: 600; - } +/* Track */ +.matecat-modal-content .change-team-modal .dropdown ::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + -webkit-border-radius: 10px; + border-radius: 10px; +} - .project-id { - float: right; - } - } - } +/* Handle */ +.matecat-modal-content .change-team-modal .dropdown ::-webkit-scrollbar-thumb { + -webkit-border-radius: 10px; + border-radius: 10px; + background: colors.$grey400; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); +} - .button { - font-size: 18px; - padding: 11px 22px; - } +.matecat-modal-content .change-team-modal .dropdown ::-webkit-scrollbar-thumb:window-inactive { + background: colors.$grey400; +} - .dropdown { - .menu { - max-height: 85px !important; - } - - ::-webkit-scrollbar { - width: 10px; - } - - /* Track */ - ::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); - -webkit-border-radius: 10px; - border-radius: 10px; - } - - /* Handle */ - ::-webkit-scrollbar-thumb { - -webkit-border-radius: 10px; - border-radius: 10px; - background: #a7a5a5; - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); - } - - ::-webkit-scrollbar-thumb:window-inactive { - background: #a7a5a5; - } - - .default.text { - color: #000; - } - } - } +.matecat-modal-content .change-team-modal .dropdown .default.text { + color: colors.$black; } .dropdown > .menu { - z-index: 100000000; + z-index: var(--z-dropdown); } -.shortcuts-modal { - .matecat-modal-top { - padding: 15px 25px; - } +.shortcuts-modal .matecat-modal-top { + padding: 15px 25px; +} - .matecat-modal-middle { - padding: 10px 15px; - max-height: 530px; - overflow: auto; - - .shortcut-list { - &:not(:first-of-type) { - padding-top: 10px; - } - - h2 { - padding-left: 10px; - padding-bottom: 10px; - border-bottom: 1px solid #dee7e8; - } - - .shortcut-item-list { - .shortcut-item { - padding: 7px 0 7px 10px; - margin: 3px 0; - - &:first-child { - margin-top: 10px; - } - - &:hover { - background: #f1f1f1; - } - - .shortcut-title, - .shortcut-keys { - display: inline-block; - width: 50%; - } - - .shortcut-keys { - .shortcuts { - text-align: right; - color: #03bdee; - } - - .mac, - .standard { - .keys { - content: ''; - font-family: 'Courier New'; - display: inline-block; - margin-left: 5px; - margin-right: 5px; - background: #909798; - padding: 0 5px; - line-height: 20px; - font-size: 12px; - color: white; - border-radius: 2px; - - &:first-child { - margin-left: 0px !important; - } - - &.ctrl:after { - content: 'Ctrl'; - } - - &.Meta:after { - content: 'Cmd'; - } - - &.shift:after { - content: 'Shift'; - } - - &.return:after { - content: 'Enter'; - } - - &.meta:after { - content: 'Cmd'; - } - - &.alt:after { - content: 'Alt'; - } - - &.option:after { - content: 'Option'; - } - - &.\31 :after { - content: '1'; - } - - &.\32 :after { - content: '2'; - } - - &.\33 :after { - content: '3'; - } - - &.a:after { - content: 'A'; - } - - &.c:after { - content: 'C'; - } - - &.h:after { - content: 'H'; - } - - &.i:after { - content: 'I'; - } - - &.l:after { - content: 'L'; - } - - &.n:after { - content: 'N'; - } - - &.p:after { - content: 'P'; - } - - &.z:after { - content: 'Z'; - } - - &.f:after { - content: 'F'; - } - - &.k:after { - content: 'K'; - } - - &.y:after { - content: 'Y'; - } - - &.s:after { - content: 'S'; - } - - &.t:after { - content: 'T'; - } - - &.q:after { - content: 'Q'; - } - - &.up:after { - content: 'Arrow up'; - } - - &.right:after { - content: 'Arrow right'; - } - - &.left:after { - content: 'Arrow left'; - } - - &.down:after { - content: 'Arrow down'; - } - - &.pagedown:after { - content: 'Page Down'; - } - - &.pageup:after { - content: 'Page Up'; - } - - &.previous:after { - content: '<'; - } - - &.next:after { - content: '>'; - } - - &.home:after { - content: 'Home'; - } - - &.arrows:after { - content: 'Arrows'; - } - - &.arrows-enter:after { - content: 'Arrows/Enter'; - } - - &.space:after { - content: 'Space'; - } - &.bracketLeft:after { - content: '['; - } - &.bracketRight:after { - content: ']'; - } - } - } - } - } - } - } - } +.shortcuts-modal .matecat-modal-middle { + padding: 10px 15px; + max-height: 530px; + overflow: auto; +} - .matecat-modal-bottom { - padding: 15px 25px; - } +.shortcuts-modal .matecat-modal-middle .shortcut-list:not(:first-of-type) { + padding-top: 10px; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list h2 { + padding-left: 10px; + padding-bottom: 10px; + border-bottom: 1px solid colors.$grey100; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item { + padding: 7px 0 7px 10px; + margin: 3px 0; +} + +.shortcuts-modal + .matecat-modal-middle + .shortcut-list + .shortcut-item-list + .shortcut-item:first-child { + margin-top: 10px; +} + +.shortcuts-modal + .matecat-modal-middle + .shortcut-list + .shortcut-item-list + .shortcut-item:hover { + background: colors.$grey75; +} + +.shortcuts-modal + .matecat-modal-middle + .shortcut-list + .shortcut-item-list + .shortcut-item + .shortcut-title, +.shortcuts-modal + .matecat-modal-middle + .shortcut-list + .shortcut-item-list + .shortcut-item + .shortcut-keys { + display: inline-block; + width: 50%; +} + +.shortcuts-modal + .matecat-modal-middle + .shortcut-list + .shortcut-item-list + .shortcut-item + .shortcut-keys + .shortcuts { + text-align: right; + color: colors.$blue200; +} + +.shortcuts-modal + .matecat-modal-middle + .shortcut-list + .shortcut-item-list + .shortcut-item + .shortcut-keys + .mac + .keys, +.shortcuts-modal + .matecat-modal-middle + .shortcut-list + .shortcut-item-list + .shortcut-item + .shortcut-keys + .standard + .keys { + content: ''; + font-family: 'Courier New'; + display: inline-block; + margin-left: 5px; + margin-right: 5px; + background: colors.$grey400; + padding: 0 5px; + line-height: 20px; + font-size: 12px; + color: colors.$white; + border-radius: 2px; +} + +.shortcuts-modal + .matecat-modal-middle + .shortcut-list + .shortcut-item-list + .shortcut-item + .shortcut-keys + .mac + .keys:first-child, +.shortcuts-modal + .matecat-modal-middle + .shortcut-list + .shortcut-item-list + .shortcut-item + .shortcut-keys + .standard + .keys:first-child { + margin-left: 0px !important; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.ctrl:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.ctrl:after { + content: 'Ctrl'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.Meta:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.Meta:after { + content: 'Cmd'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.shift:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.shift:after { + content: 'Shift'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.return:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.return:after { + content: 'Enter'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.meta:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.meta:after { + content: 'Cmd'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.alt:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.alt:after { + content: 'Alt'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.option:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.option:after { + content: 'Option'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.\31 :after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.\31 :after { + content: '1'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.\32 :after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.\32 :after { + content: '2'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.\33 :after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.\33 :after { + content: '3'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.a:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.a:after { + content: 'A'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.c:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.c:after { + content: 'C'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.h:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.h:after { + content: 'H'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.i:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.i:after { + content: 'I'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.l:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.l:after { + content: 'L'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.n:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.n:after { + content: 'N'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.p:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.p:after { + content: 'P'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.z:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.z:after { + content: 'Z'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.f:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.f:after { + content: 'F'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.k:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.k:after { + content: 'K'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.y:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.y:after { + content: 'Y'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.s:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.s:after { + content: 'S'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.t:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.t:after { + content: 'T'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.q:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.q:after { + content: 'Q'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.up:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.up:after { + content: 'Arrow up'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.right:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.right:after { + content: 'Arrow right'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.left:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.left:after { + content: 'Arrow left'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.down:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.down:after { + content: 'Arrow down'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.pagedown:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.pagedown:after { + content: 'Page Down'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.pageup:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.pageup:after { + content: 'Page Up'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.previous:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.previous:after { + content: '<'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.next:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.next:after { + content: '>'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.home:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.home:after { + content: 'Home'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.arrows:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.arrows:after { + content: 'Arrows'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.arrows-enter:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.arrows-enter:after { + content: 'Arrows/Enter'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.space:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.space:after { + content: 'Space'; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.bracketLeft:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.bracketLeft:after { + content: '['; +} + +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .mac .keys.bracketRight:after, +.shortcuts-modal .matecat-modal-middle .shortcut-list .shortcut-item-list .shortcut-item .shortcut-keys .standard .keys.bracketRight:after { + content: ']'; +} + +.shortcuts-modal .matecat-modal-bottom { + padding: 15px 25px; } .copy-source-modal { @@ -1097,7 +832,7 @@ a { .buttons-popup-container { padding: 25px 0 30px; - border-bottom: 1px solid #f2f4f7; + border-bottom: 1px solid colors.$grey50; display: flex; gap: 20px; align-items: center; @@ -1181,6 +916,16 @@ a { } } +.modal-grid { + display: flex; + flex-direction: column; + + .modal-grid__footer { + display: flex; + justify-content: flex-end; + } +} + .confirm-delete-resource-project-templates { ul { list-style: disc; diff --git a/public/css/sass/common.scss b/public/css/sass/common.scss index b119bba6d1..d5d3e4765b 100644 --- a/public/css/sass/common.scss +++ b/public/css/sass/common.scss @@ -1,4 +1,15 @@ -@use 'commons/colors'; +@use 'tokens/colors'; + +*, +:before, +:after { + box-sizing: inherit; +} + +html { + box-sizing: border-box; +} + html, body { height: 100%; @@ -81,11 +92,11 @@ ul { padding: 30px 0 30px 0; display: block; z-index: 999999; - background: #fff; - box-shadow: 0px 0px 5px #ccc; + background: colors.$white; + box-shadow: 0px 0px 5px colors.$grey200; border-radius: 2px; font-size: 18px; - border: 1px solid #ccc; + border: 1px solid colors.$grey200; } .iepopup img { @@ -94,7 +105,7 @@ ul { .iepopup ul a { padding: 0px 0 0 0; - color: #39699a; + color: colors.$blue400; text-decoration: underline; } @@ -140,7 +151,7 @@ section mark.searchMarker { } section mark.searchMarker.currSearchItem { - background: #f7d315; + background: colors.$orange200; /* background: #00c1e6; */ } @@ -163,8 +174,8 @@ section mark.searchMarker.currSearchItem { } .offline header { - background: #6d6e71; - border-bottom: 1px solid #333; + background: colors.$grey600; + border-bottom: 1px solid colors.$grey1300; padding: 0px 0 2px 0; margin-bottom: 20px; height: 45px; @@ -178,840 +189,13 @@ section mark.searchMarker.currSearchItem { } .offline h2 { - color: #999999 !important; + color: colors.$grey400 !important; font-weight: normal !important; } .claim span { font-weight: bold; - color: #39699a; -} - -.fileformat span { - padding: 10px 0px 10px 40px; - margin: 5px 0 0 0; - width: 100%; - height: 35px; - float: left; - background-size: 25px !important; -} - -.extdoc { - background: url(/public/img/matecat_file_icons.png) 6px 0 no-repeat !important; -} - -/* .doc, .dot, . docx, .dotx, .docm, .dotm, .odt, .sxw*/ -.extppt { - background: url(/public/img/matecat_file_icons.png) 6px -34px no-repeat !important; -} - -/* .pot, .pps, .ppt, .potm, .potx, .ppsm, .ppsx, .pptm, .pptx, .odp, .sxi*/ -.exthtm { - background: url(/public/img/matecat_file_icons.png) 6px -70px no-repeat !important; -} - -/* .htm, .html, .xhtml */ -.extpdf { - background: url(/public/img/matecat_file_icons.png) 6px -104px no-repeat !important; -} - -/* .pdf */ -.extxls { - background: url(/public/img/matecat_file_icons.png) 6px -140px no-repeat !important; -} - -/* .xls, .xlt, .xlsm, .xlsx, .xltx, .ods, .sxc, .csv */ -.exttxt { - background: url(/public/img/matecat_file_icons.png) 6px -172px no-repeat !important; -} - -/* .txt */ -.extxif { - background: url(/public/img/matecat_file_icons.png) 6px -208px no-repeat !important; -} - -/* .xliff */ -.extttx { - background: url(/public/img/matecat_file_icons.png) 6px -242px no-repeat !important; -} - -/* .ttx */ -.extitd { - background: url(/public/img/matecat_file_icons.png) 6px -276px no-repeat !important; -} - -/* .itd */ -.extxlf { - background: url(/public/img/matecat_file_icons.png) 6px -310px no-repeat !important; -} - -/* .xlf */ -.extmif { - background: url(/public/img/matecat_file_icons.png) 6px -342px no-repeat !important; -} - -/* .mif */ -.extidd { - background: url(/public/img/matecat_file_icons.png) 6px -378px no-repeat !important; -} - -/* .idml, .inx, .icml */ -.extqxp { - background: url(/public/img/matecat_file_icons.png) 6px -412px no-repeat !important; -} - -/* .xtg */ -.extxml { - background: url(/public/img/matecat_file_icons.png) 6px -446px no-repeat !important; -} - -/* .xml */ -.extrcc { - background: url(/public/img/matecat_file_icons.png) 6px -484px no-repeat !important; -} - -/* .rc */ -.extres { - background: url(/public/img/matecat_file_icons.png) 6px -516px no-repeat !important; -} - -/* .resx */ -.extsgl { - background: url(/public/img/matecat_file_icons.png) 6px -552px no-repeat !important; -} - -/* .sgml */ -.extsgm { - background: url(/public/img/matecat_file_icons.png) 6px -584px no-repeat !important; -} - -/* .sgm */ -.extpro { - background: url(/public/img/matecat_file_icons.png) 6px -618px no-repeat !important; -} - -/* .properties */ -.extdit { - background: url(/public/img/matecat_file_icons.png) 6px -652px no-repeat !important; -} - -/* .dita */ -.exttag { - background: url(/public/img/matecat_file_icons.png) 6px -686px no-repeat !important; -} - -/* .tag */ -.exttmx { - background: url(/public/img/matecat_file_icons.png) 6px -722px no-repeat !important; -} - -/* .tmx */ -.extstr { - background: url(/public/img/matecat_file_icons.png) 6px -758px no-repeat !important; -} - -/* .str */ -.extzip { - background: url(/public/img/matecat_file_icons.png) 6px -792px no-repeat !important; -} - -/* .zip */ -.exticml { - background: url(/public/img/matecat_file_icons.png) 6px -826px no-repeat !important; -} - -/* .icml */ -.extimg { - background: url(/public/img/matecat_file_icons.png) 6px -860px no-repeat !important; -} - -/* .bmp, .gif, .jpeg, .png, .tiff */ -.extwix { - background: url(/public/img/matecat_file_icons.png) 6px -894px no-repeat !important; -} - -/* .wix */ -.extsrt { - background: url(/public/img/matecat_file_icons.png) 6px -928px no-repeat !important; -} - -/* .sbv */ -.extsbv { - background: url(/public/img/matecat_file_icons.png) 6px -1133px no-repeat !important; -} - -/* .vtt */ -.extvtt { - background: url(/public/img/matecat_file_icons.png) 6px -1167px no-repeat !important; -} - -/* .srt */ -.extpo { - background: url(/public/img/matecat_file_icons.png) 6px -962px no-repeat !important; -} - -/* .po */ -.extg { - background: url(/public/img/matecat_file_icons.png) 6px -996px no-repeat !important; -} - -/* .g */ -.exts { - background: url(/public/img/matecat_file_icons_ts.png) 6px -0px no-repeat !important; -} - -/* .ts */ -.extgsli { - background: url(/public/img/matecat_file_icons.png) 6px -1033px no-repeat !important; -} - -/* Google Slides */ -.extgdoc { - background: url(/public/img/matecat_file_icons.png) 6px -1070px no-repeat !important; -} - -/* Google Document */ -.extgsheet { - background: url(/public/img/matecat_file_icons.png) 6px -1107px no-repeat !important; -} - -/* retina display query */ -@media only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and (min--moz-device-pixel-ratio: 2), - only screen and (-o-min-device-pixel-ratio: 2/1), - only screen and (min-device-pixel-ratio: 2), - only screen and (min-resolution: 192dpi), - only screen and (min-resolution: 2dppx) { - .preview span { - height: 30px; - width: 30px; - display: block; - background-size: 25px; - } - .extdoc { - background: url(/public/img/matecat_file_icons2x.png) 6px 0 no-repeat !important; - } - /* .doc, .dot, . docx, .dotx, .docm, .dotm, .odt, .sxw*/ - .extppt { - background: url(/public/img/matecat_file_icons2x.png) 6px -34px no-repeat !important; - } - /* .pot, .pps, .ppt, .potm, .potx, .ppsm, .ppsx, .pptm, .pptx, .odp, .sxi*/ - .exthtm { - background: url(/public/img/matecat_file_icons2x.png) 6px -70px no-repeat !important; - } - /* .htm, .html, .xhtml */ - .extpdf { - background: url(/public/img/matecat_file_icons2x.png) 6px -104px no-repeat !important; - } - /* .pdf */ - .extxls { - background: url(/public/img/matecat_file_icons2x.png) 6px -140px no-repeat !important; - } - /* .xls, .xlt, .xlsm, .xlsx, .xltx, .ods, .sxc, .csv */ - .exttxt { - background: url(/public/img/matecat_file_icons2x.png) 6px -172px no-repeat !important; - } - /* .txt */ - .extxif { - background: url(/public/img/matecat_file_icons2x.png) 6px -208px no-repeat !important; - } - /* .xliff */ - .extttx { - background: url(/public/img/matecat_file_icons2x.png) 6px -242px no-repeat !important; - } - /* .ttx */ - .extitd { - background: url(/public/img/matecat_file_icons2x.png) 6px -276px no-repeat !important; - } - /* .itd */ - .extxlf { - background: url(/public/img/matecat_file_icons2x.png) 6px -310px no-repeat !important; - } - /* .xlf */ - .extmif { - background: url(/public/img/matecat_file_icons2x.png) 6px -342px no-repeat !important; - } - /* .mif */ - .extidd { - background: url(/public/img/matecat_file_icons2x.png) 6px -378px no-repeat !important; - } - /* .idml, .inx, .icml */ - .extqxp { - background: url(/public/img/matecat_file_icons2x.png) 6px -412px no-repeat !important; - } - /* .xtg */ - .extxml { - background: url(/public/img/matecat_file_icons2x.png) 6px -446px no-repeat !important; - } - /* .xml */ - .extrcc { - background: url(/public/img/matecat_file_icons2x.png) 6px -484px no-repeat !important; - } - /* .rc */ - .extres { - background: url(/public/img/matecat_file_icons2x.png) 6px -516px no-repeat !important; - } - /* .resx */ - .extsgl { - background: url(/public/img/matecat_file_icons2x.png) 6px -552px no-repeat !important; - } - /* .sgml */ - .extsgm { - background: url(/public/img/matecat_file_icons2x.png) 6px -584px no-repeat !important; - } - /* .sgm */ - .extpro { - background: url(/public/img/matecat_file_icons2x.png) 6px -618px no-repeat !important; - } - /* .properties */ - .extdit { - background: url(/public/img/matecat_file_icons2x.png) 6px -652px no-repeat !important; - } - /* .dita */ - .exttag { - background: url(/public/img/matecat_file_icons2x.png) 6px -686px no-repeat !important; - } - /* .tag */ - .exttmx { - background: url(/public/img/matecat_file_icons2x.png) 6px -722px no-repeat !important; - } - /* .tmx */ - .extstr { - background: url(/public/img/matecat_file_icons2x.png) 6px -758px no-repeat !important; - } - /* .str */ - .extzip { - background: url(/public/img/matecat_file_icons2x.png) 6px -792px no-repeat !important; - } - /* .zip */ - .exticml { - background: url(/public/img/matecat_file_icons2x.png) 6px -826px no-repeat !important; - } - /* .icml */ - .extimg { - background: url(/public/img/matecat_file_icons2x.png) 6px -860px no-repeat !important; - } - /* .bmp, .gif, .jpeg, .png, .tiff */ - .extwix { - background: url(/public/img/matecat_file_icons2x.png) 6px -894px no-repeat !important; - } - /* .srt */ - .extsrt { - background: url(/public/img/matecat_file_icons2x.png) 6px -928px no-repeat !important; - } - /* .sbv */ - .extsbv { - background: url(/public/img/matecat_file_icons2x.png) 6px -1133px no-repeat !important; - } - /* .vtt */ - .extvtt { - background: url(/public/img/matecat_file_icons2x.png) 6px -1167px no-repeat !important; - } - /* .po */ - .extpo { - background: url(/public/img/matecat_file_icons2x.png) 6px -962px no-repeat !important; - } - /* .po */ - .extg { - background: url(/public/img/matecat_file_icons2x.png) 6px -996px no-repeat !important; - } - /* .g */ - .exts { - background: url(/public/img/matecat_file_icons_ts2x.png) 6px 0px no-repeat !important; - } - /* .ts */ - .extgsli { - background: url(/public/img/matecat_file_icons2x.png) 6px -1033px no-repeat !important; - } - /* Google Slides */ - .extgdoc { - background: url(/public/img/matecat_file_icons2x.png) 6px -1070px no-repeat !important; - } - /* Google Document */ - .extgsheet { - background: url(/public/img/matecat_file_icons2x.png) 6px -1107px no-repeat !important; - } - /* Google Sheet */ -} - -@font-face { - font-family: 'icomoon'; - src: url('/public/css/fonts/icomoon.eot?7sjwen'); - src: - url('/public/css/fonts/icomoon.eot?7sjwen#iefix') - format('embedded-opentype'), - url('/public/css/fonts/icomoon.ttf?7sjwen') format('truetype'), - url('/public/css/fonts/icomoon.woff?7sjwen') format('woff'), - url('/public/css/fonts/icomoon.svg?7sjwen#icomoon') format('svg'); - font-weight: normal; - font-style: normal; -} - -/* -/* mbc extend iconmoon set with icons for matecat chat -/* TODO: add icons to main set -*/ - -/* -/* mbc extend iconmoon set with icons for matecat chat -*/ -icon-iconmoon:before, -#logoutlink:before, -.btn-confirm-small .text:before, -.btn-orange-small .text:before, -.btn-orange-medium .text:before, -[class^="icon-"], [class*=" icon-"], -.sorting_desc:after, -.sorting_asc:after, -.open-popup-addtm-tr:before, -.sorting:after, -.x-popup:before, -.x-popup2:before, -.popup .x-popup:before, -.mgmt-panel .x-popup:before, -.popup-tm .x-popup:before, -td.actions a:before, -a.archive-project:before, -a.unarchive-project:before, -a.unarchive-project:after, -.splitpoint:before, -.notific:before, -#swaplang:after, -.more:before, -.more.minus:before, -.close:before, -.notific.error:before, -.breadcrumbs #pname:before, -.delete button:before, -.cancel button:before, -.graysmall:hover .trash:before, -.splitpoint-delete:after, -#point2seg:after, -.warnings:before, - /* mbc chat */ -.mbc-warnings:before, - /* mbc chat */ -.text .alternatives:before, -header .filter:before, -.export-button-label:before, -.canceladd-export:before { - font-family: 'icomoon'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -header .filter:before { - content: '\f0b0'; -} - -.close:before { - content: '\ea0d'; -} - -.header .close:before { - content: '\ea0d'; - text-align: center; - margin-top: 0px; - margin-left: -1px; - display: block; - vertical-align: middle; -} - -.notific:before { - content: '\f058'; - font-size: 25px; -} - -.notific.error:before { - content: '\f071'; - font-size: 25px; -} - -.warnings:before, -.mbc-warnings:before, -.text .alternatives:before { - content: '\f071'; - color: #d65959; - margin-right: 10px; -} - -#point2seg:after { - content: '\e903'; - font-size: 24px; -} - -#swaplang:after { - content: '\f0ec'; -} - -.more:before, -.more.minus:before { - margin-right: 5px; - position: relative; - top: 2px; -} - -.graysmall:hover .trash:before { - content: '\f014'; -} - -.more:before { - content: '\f196'; -} - -.cancel button:before, -.delete button:before { - content: '\f014'; - font-size: 13px; - vertical-align: middle; -} - -.delete button.zip_row:before { - content: 'Clear Archive'; - font-size: 12px; - font-weight: bold; - font-family: Calibri, Arial, Helvetica, sans-serif; -} - -a.unarchive-project:before { - content: '\e606'; - font-size: 14px; -} - -a.unarchive-project:after { - content: '\e607'; - color: red; - font-size: 16px; - position: absolute; - left: -1px; - top: 1px; - transform: rotate(-45deg); -} - -.x-popup:before, -.x-popup2:before { - content: '\f057'; -} - -.open-popup-addtm-tr:before { - content: '\e602'; - padding-right: 5px; - vertical-align: text-top; -} - -.icon-uniE96B:before { - content: '\e96b'; -} - -.icon-uniE96D:before { - content: '\e96d'; -} - -.icon-uniE96E:before { - content: '\e96e'; -} - -.icon-uniE970:before { - content: '\e970'; -} - -.icon-error_outline:before { - content: '\e001'; -} - -.icon-power-cord:before { - content: '\e291'; -} - -.icon-power-cord2:before { - content: '\e292'; -} - -.icon-user22:before { - content: '\e601'; -} - -.icon-upload:before { - content: '\e602'; -} - -.icon-stop:before { - content: '\e604'; -} - -.icon-info:before { - content: '\e605'; -} - -.icon-minus:before { - content: '\e607'; -} - -.icon-settings:before { - content: '\e8b8'; -} - -.icon-zip:before { - content: '\e901'; -} - -.icon-mic:before { - content: '\e91e'; -} - -.icon-bubble2:before { - content: '\e96f'; -} - -.icon-cancel-circle:before { - content: '\ea0d'; -} - -.icon-make-group:before { - content: '\ea58'; -} - -.icon-text-height:before { - content: '\ea5f'; -} - -.icon-superscript2:before { - content: '\ea6b'; -} - -.icon-subscript2:before { - content: '\ea6c'; -} - -.icon-split:before { - content: '\f03d'; -} - -.icon-play:before { - content: '\f04b'; -} - -.icon-chevron-left:before { - content: '\f053'; -} - -.icon-eye:before { - content: '\f06e'; -} - -.icon-google-plus-square2:before { - content: '\f0d5'; -} - -.icon-sort-up:before { - content: '\f0e0'; -} - -.icon-code:before { - content: '\f121'; -} - -.icon-star-half-empty:before { - content: '\f123'; -} -.icon-users:before { - content: '\e972'; -} - -.icon-share:before { - content: '\ea82'; -} - -.icon-lock:before { - content: '\e98f'; -} - -.icon-unlocked:before { - content: '\e990'; -} - -.icon-earth:before { - content: '\e9ca'; -} - -.icon-user2:before { - content: '\e600'; -} - -.icon-checkmark:before { - content: '\ea10'; -} - -.icon-search:before { - content: '\f002'; -} - -.icon-envelope-o:before { - content: '\f003'; -} - -.icon-heart:before { - content: '\f004'; -} - -.icon-star:before { - content: '\f005'; -} - -.icon-user:before { - content: '\f007'; -} - -.icon-check:before { - content: '\f00c'; -} - -.icon-times:before { - content: '\f00d'; -} - -.icon-power-off:before { - content: '\f011'; -} - -.icon-gear:before { - content: '\f013'; -} - -.icon-share-square-o:before { - content: '\f045'; -} - -.icon-chevron-right:before { - content: '\f054'; -} - -.icon-plus-circle:before { - content: '\f055'; -} - -.icon-times-circle:before { - content: '\f057'; -} - -.icon-check-circle:before { - content: '\f058'; -} - -.icon-times-circle-o:before { - content: '\f05c'; -} - -.icon-check-circle-o:before { - content: '\f05d'; -} - -.icon-plus:before { - content: '\f067'; -} - -.icon-warning:before { - content: '\f071'; -} - -.icon-sign-in:before { - content: '\f090'; -} - -.icon-wrench:before { - content: '\f0ad'; -} - -.icon-tasks:before { - content: '\f0ae'; -} - -.icon-filter:before { - content: '\f0b0'; -} - -.icon-google-plus-square:before { - content: '\f0d4'; -} - -.icon-unsorted:before { - content: '\f0dc'; -} - -.icon-sort-down:before { - content: '\f0dd'; -} - -.icon-exchange:before { - content: '\f0ec'; -} - -.icon-mail-reply:before { - content: '\f112'; -} - -.icon-minus-square-o:before { - content: '\f147'; -} - -.icon-plus-square-o:before { - content: '\f196'; -} - -.icon-language:before { - content: '\f1ab'; -} - -.icon-paw:before { - content: '\f1b0'; -} - -.icon-file-text:before { - content: '\e922'; -} - -.icon-file:before { - content: '\e904'; -} - -.icon-unlocked3:before { - content: '\ea8a'; -} - -.icon-picture:before { - content: '\e95d'; -} - -.icon-window:before { - content: '\e933'; -} - -.icon-gdrive:before { - content: url(/public/img/logo-drive-16-gray.png); -} - -.icon-preview-bottom-window:before { - content: '\ea8b'; -} - -.icon-preview-new-window:before { - content: '\ea8c'; -} - -.icon-no-preview:before { - content: '\ea8d'; -} - -.icon-go-to-first:before { - content: '\ea8e'; + color: colors.$blue400; } @font-face { @@ -1043,7 +227,7 @@ a.unarchive-project:after { } #menu-site li a { - color: #fff; + color: colors.$white; text-decoration: none; -webkit-font-smoothing: antialiased; line-height: 22px; @@ -1055,9 +239,9 @@ a.unarchive-project:after { #menu-site li a.bigblue { font-size: 17px !important; border: none !important; - color: colors.$darkBlue !important; + color: colors.$blue900 !important; border-radius: 18px; - background-color: #fff; + background-color: colors.$white; padding: 4px 18px; font-weight: bold; margin-left: 5px; @@ -1065,17 +249,11 @@ a.unarchive-project:after { } #menu-site li a.bigred:hover { - color: colors.$darkBlueHover !important; + color: colors.$blue950 !important; } #menu-site li a:hover { - color: #3aa9dd; -} - -.ui.primary.button.button-modal.warning-button.orange.margin.left-10.right-20 { - height: 43px; - padding: 1px 10px; - font-size: 15px; + color: colors.$blue500; } /*****************************/ @@ -1098,7 +276,7 @@ body svg { > span { display: block; text-align: center; - background-color: colors.$grey7; + background-color: colors.$grey400; border-radius: 4px; padding: 2px 4px; color: colors.$white; @@ -1107,3 +285,11 @@ body svg { } } } + +a { + color: colors.$blue700; + &:hover, + &:active { + color: colors.$blue400; + } +} diff --git a/public/css/sass/commons/_analyze.scss b/public/css/sass/commons/_analyze.scss index e3bba4c5b6..e23cdb1fd5 100644 --- a/public/css/sass/commons/_analyze.scss +++ b/public/css/sass/commons/_analyze.scss @@ -1,35 +1,41 @@ -@use '../commons/colors'; +@use '../tokens/colors'; +@use '../commons/variables'; + // rewrite semantic CSS html, body { height: 100%; + margin: 0; } + body.analyze { min-width: 1024px; - font-family: Calibri, Arial, Helvetica, sans-serif; - background-color: colors.$grey5; + background-color: colors.$grey100; overflow-x: auto; overflow-y: hidden; - font-size: 14px; - h1 { - font-size: 28px; - } + font: variables.$font-style-base; } + .analyze-page { height: 100%; } + .project-list { - height: 100%; - positon: relative; + height: calc(100% - 60px); + position: relative; overflow-y: auto; } + .project-list { padding-top: 40px; /* was 62px with previous header */ padding-bottom: 160px; .project { + display: flex; + flex-direction: column; + gap: 16px; .scroll { - background-color: colors.$grey2; + background-color: colors.$grey300; width: 40px; height: 40px; position: fixed; @@ -40,9 +46,11 @@ body.analyze { outline: none; opacity: 0.8; z-index: 3; + &:hover { opacity: 1; } + i { margin-left: -7px; font-size: 22px; @@ -51,187 +59,143 @@ body.analyze { } .project-header { - background: colors.$grey4; - padding-bottom: 10px; - margin-bottom: 0; + display: flex; + gap: 16px; + .left-analysis { - padding-top: 20px; - padding-left: 30px; - top: 14px; - position: relative; - width: 55% !important; - height: 205px; - .h1 { - font-size: 38px; - font-weight: 100; - color: grey; - margin-bottom: 0; - } - .ui.ribbon.label { - position: relative; - top: 0; - z-index: 2; - left: -45px; - max-width: 100%; - min-width: 0; - background-color: colors.$grey2; - color: #000000; - border-radius: 0 2px 2px 0; - padding-right: 15px; - &:after { - border-right-color: colors.$grey1 !important; - } - .project-id, - .project-name { - display: inline-block; - vertical-align: text-bottom; - position: relative; - } - .project-id { - font-size: 14px; - font-weight: 700; - margin-right: 5px; - margin-left: 15px; - color: #5a5a5a; - top: -2px; - } - .project-name { - font-size: 20px; - max-width: 100%; - min-width: 30px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - top: 1px; - padding-left: 15px; - } - } - .project-create { - top: 10px; - position: relative; - font-size: 18px; + display: flex; + padding: 16px 24px; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 16px; + flex: 1 0 0; + border-radius: variables.$border-radius-big; + border: 1px solid colors.$grey150; + background: colors.$grey50; + .project-name h5 { + font-weight: 700; + line-height: 28px; } .analysis-create { - margin-top: 35px; + display: flex; + align-items: center; font-size: 16px; - .search-tm-matches { - .loader { - margin-right: 5px; - } - h5 { - display: inline-block; - margin-bottom: 0; - span { - color: colors.$greenDefault; - padding: 5px 2px 5px 0; - margin-left: 4px; - border-radius: 15px; - } - i { - color: colors.$greenDefault; - position: relative; - top: 2px; + width: 100%; + .inline-loader { + width: 20px; + height: 20px; + margin-right: 5px; + border: 2px solid rgba(0, 0, 0, 0.1); + border-top-color: colors.$grey700; + border-radius: 50%; + animation: inline-loader-spin 0.6s linear infinite; + } + .analysis-progressbar { + width: 100%; + .progress-wrapper { + background-color: rgba(colors.$blue500, 0.24); + .progress { + background-color: colors.$blue500; } } - .complete { - display: inline-block; - font-size: 18px; - line-height: 18px; - .number { - font-weight: 700; - } - a { - font-weight: 700; - text-decoration: underline; - &:hover { - text-decoration: none; - } - } + } + .not-complete.failed { + padding-left: 15px; + border-left: 1px solid colors.$grey300; + margin-left: 15px; + } + .complete { + display: flex; + align-items: center; + gap: 8px; + + .number { + font-weight: 700; } - .downloadAnalysisReport { - display: inline-block; - border-left: 1px solid black; - padding-left: 10px; - color: black; + + a { + font-weight: 700; text-decoration: underline; - margin-left: 10px; - cursor: pointer; + &:hover { text-decoration: none; } } - .analysisNotPerformed { - font-size: 18px; - line-height: 18px; - display: inline-block; - } } - } - } - - .word-count { - .word-percent { - position: relative; - padding: 15px 15px 10px 20px; - border: 1px solid colors.$greenDefault; - top: 27px; - font-size: 16px; - margin-bottom: 25px; - .percent { - font-size: 40px; - font-weight: 700; - display: inline-block; - vertical-align: -webkit-baseline-middle; - margin-right: 10px; + .not-complete { } - .content { - font-size: 20px; - .sub.header { - font-size: 12px; - } - } - a { + + .downloadAnalysisReport { + display: flex; + gap: 8px; + border-left: 1px solid colors.$grey300; + color: colors.$linkBlue; text-decoration: underline; - font-weight: 700; + margin-left: 16px; cursor: pointer; + padding-left: 16px; + align-items: center; &:hover { text-decoration: none; - } - &:active { - text-decoration: none; - } - &:focus { - text-decoration: none; + color: colors.$linkBlueHover; } } } - .word-raw, - .matecat-raw { - background-color: #f2f4f1; - padding: 5px; - border: 1px solid #7eaf3e; - text-align: center; - transition: 0.4s ease; - h3, - h4 { - margin: 0; + } + + .word-count { + display: flex; + width: 360px; + //height: 100px; + padding: 16px 24px; + justify-content: space-between; + align-items: center; + border-radius: variables.$border-radius-big; + border: 1px solid colors.$grey150; + background: colors.$grey50; + .percent { + display: flex; + align-items: center; + gap: 12px; + align-self: stretch; + &.in-progress h2 { + color: colors.$blue500; } - h3 { - font-size: 28px; + } + .content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + font: variables.$font-style-small; + .work-hour { + color: colors.$grey400; } } - .word-raw { + svg { + color: colors.$grey800; } - .overlay { - background-color: rgba(243, 243, 243, 0.6); - border: 1px solid #a7c3a7; - margin-top: -67px; - z-index: 10; - position: relative; - height: 100%; + a { + text-decoration: underline; + font-weight: 700; + cursor: pointer; + + &:hover { + text-decoration: none; + } + + &:active { + text-decoration: none; + } + + &:focus { + text-decoration: none; + } } + .updated-count { - background-color: #f9ffb5; + background-color: colors.$orange50; } } @@ -243,851 +207,163 @@ body.analyze { padding: 15px; border: 1px solid green; border-radius: 0; + .percent { vertical-align: middle; display: inline-block; } } - .progress { - padding: 0 15px; - top: 5px; - .progress-bar { - width: 100%; - } - } } .project-top { - padding: 45px 15px 15px; - background-color: colors.$grey5; - margin: 0 -1rem 0; &.type-mtqe { .title-total-words, .title-matecat-words { width: 50% !important; } } - .compare-table { - background-color: colors.$grey3; - margin-bottom: 1px; - .updated-count { - background-color: #f9ffb5; - transition: 0.4s ease; - } - .header-compare-table, - .jobs-compare-table { - h5 { - margin-bottom: 0; - font-weight: 100; - font-size: 14px; - } - p { - font-size: 12px; - } - } - .header-compare-table { - //padding-top: 15px; - //padding-bottom: 15px; - z-index: 1; - position: relative; - } - .title-job { + } + + .project-top.type-standard { + display: flex; + flex-direction: column; + gap: 16px; + .project-card { + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + border-radius: variables.$border-radius-big; + border: 1px solid colors.$grey150; + overflow: hidden; + .project-card__header, + .project-card__content { display: flex; - flex-flow: inherit; + padding: 0 24px; align-items: center; - justify-content: flex-start; - width: 28%; - /*line-height: 50px;*/ - /*text-align: left;*/ - font-size: 16px; - padding: 10px 24px; - /*margin-right: 0;*/ - - &.splitted { - width: 28%; - &.heading { - width: 80%; - justify-content: flex-start; - } - &:not(.heading) { - .job-id { - width: 85%; - margin-bottom: 12px; - } - } - } - .job-info { + gap: 32px; + align-self: stretch; + } + .project-card__header-info { + display: flex; + width: 300px; + flex-direction: column; + align-items: flex-start; + .project-card__chunkName { + margin-bottom: 4px; + font: variables.$font-style-small; + } + .project-card__header-link { display: flex; - justify-content: flex-start; width: 100%; - margin-bottom: 12px; - } - &.splitted { - .job-info { - margin-bottom: 0; - } - } - .translate-url { - display: inline-flex; - width: 100%; - .copy { - .icon { - height: 100%; - width: 100%; - font-size: 18px; - font-weight: 700; - padding: 2px; - } - } - span { - display: flex; - } + padding: 4px 8px; + justify-content: center; + align-items: center; + gap: 8px; + border-radius: variables.$border-radius-default; + background: colors.$grey50; + color: colors.$blue500; input { - outline: none; - border: 1px solid #bbbbbb; - padding: 4px; - color: #0099cc; - font-size: 12px; - font-weight: 700; - white-space: nowrap; + all: unset; + overflow: hidden; text-overflow: ellipsis; - border-radius: 2px 0 0 2px; - border-right: none; - min-width: 200px; - height: 24px; + font: variables.$font-style-xsmall; + white-space: nowrap; width: 100%; } - button { - border: 1px solid #bbbbbb; - background-color: #ffffff; - color: #0099cc; - text-align: center; - text-decoration: none; - border-radius: 0 2px 2px 0; - height: 24px; - min-width: 24px; - padding: 0; - margin: 0; - i { - margin: 2px 0 0 0; - } - } } - } - .titles-compare { - display: flex; - align-items: center; - width: 38%; - text-align: center; - padding-left: 0; - padding-right: 0; - font-size: 16px; - } - .title-total-words, - .title-standard-words, - .title-matecat-words { - display: flex; - align-items: center; - justify-content: center; - width: 33.333%; - border-right: 1px solid #d7d8dc; - /*border-left: 1px solid #d7d8dc;*/ - /*margin-left: -1px;*/ - /*line-height: 100px;*/ - padding-top: 15px; - padding-bottom: 15px; - height: 100%; - &:first-child { - border-left: 1px solid #d7d8dc; - } - } - .title-standard-words { - h5 { + .project-card__header-languages { + display: flex; + align-items: center; + gap: 4px; span { - color: #a7a7a7; - font-weight: 100; - position: relative; - top: 2px; - left: 2px; + font-weight: 700; } - } - .title-standard-words-help-icon { - cursor: help; - svg { - color: colors.$linkBlue; + color: colors.$grey700; } } - } - .title-matecat-words { - h5 { - font-weight: 700; + .project-card__header-id { + font: variables.$font-style-xsmall; + color: colors.$grey700; } } - &.jobs { - background-color: colors.$grey5; - z-index: 0; - position: relative; - .job { - margin-bottom: 15px; - .chunks { - .chunk { - background-color: #ffffff; - transition: 0.3s ease; - cursor: pointer; - /*padding: 16px 8px;*/ - .job-details { - font-size: 15px; - float: right; - top: 11px; - color: #4183c4; - text-decoration: underline; - font-weight: 700; - margin-left: 5px; - cursor: pointer; - display: inline-block; - &:hover { - text-decoration: none; - } - } - &:hover { - background-color: #f6f6f9; - .title-matecat-words { - background: #f6ffe9 !important; - transition: 0.3s ease; - } - } - .ttw, - .tsw, - .tmw { - text-align: center; - /*padding-right: 15px;*/ - color: #788190; - padding-top: 0; - padding-bottom: 0; - .cell-label { - float: left; - margin-left: 15px; - font-weight: 100; - font-size: 16px; - } - } - .tmw { - font-weight: 700; - font-size: 18px; - margin-bottom: 1px; - color: #788190; - .cell-label { - text-decoration: underline; - cursor: pointer; - color: #646760; - &:hover { - text-decoration: none; - } - } - i { - font-size: 23px; - top: 4px; - position: relative; - float: right; - margin-left: 5px; - margin-top: 9px; - } - } - } - } - } + .project-card__header-actions { + display: flex; + width: 334px; + justify-content: flex-end; + align-items: center; + gap: 4px; } - .activity-icons { - width: 34%; + .project-card__count { display: flex; + justify-content: flex-end; align-items: center; - justify-content: space-evenly; - text-align: center; - padding: 0 4px; - - /*margin-left:8px;*/ - .ui.primary.button, - .ui.basic.blue.button { - min-width: 120px !important; - height: 34px; - } - .activity-button { + gap: 16px; + flex: 1 0 0; + > div { display: flex; - width: 68%; - padding: 0 4px; + width: 160px; justify-content: flex-end; - border-right: 1px solid #bbbbbb; - padding: 8px; - .button { - width: 45%; - } - &.disable-outsource { - border-right: none; - justify-content: center; - } - } - .outsource-translation { - display: flex; align-items: center; - justify-content: center; - width: 32%; - flex-flow: column; - height: 100%; - &.outsource-translation-disabled { - span, - a { - color: colors.$grey; - } - } - a { - color: #09beec; - text-decoration: underline; - } - span { - color: #000; - font-size: 10px; - display: flex; - justify-content: center; - align-items: end; - line-height: 15px; - svg { - margin-left: 2px; - } - } - } - .split { - display: flex; - align-items: center; - justify-content: space-evenly; - } - .split, - .merge { - font-family: Calibri, Arial, Helvetica, sans-serif; - padding: 5px 20px; //padding: 8px 16px; - vertical-align: top; - font-size: 19px; //font-size: 16px; - border: 1px solid #09beec; - border-radius: 2px; - box-shadow: none !important; - background-color: #ffffff !important; - font-weight: 700; //font-weight: normal; - /*margin-top: -3px;*/ - &:hover { - text-decoration: none; - box-shadow: - 0 0 0 #e0e0e0, - 0 0 2px rgba(0, 0, 0, 0.12), - 0 2px 4px rgba(0, 0, 0, 0.24) !important; - border: 1px solid #09beec; - } - &:focus { - box-shadow: none !important; - background-color: #f2f2f2 !important; - } - &:active { - box-shadow: none !important; - background-color: #f2f2f2 !important; - } - } - - .merge { - margin: -3px 0 0; - padding: 5px 14px; - width: 54%; - } - .open-translate, - .open-revise { - font-family: Calibri, Arial, Helvetica, sans-serif; - padding: 6px 15px; // padding: 8px 16px; - vertical-align: top; - font-size: 20px; //font-size: 16px; - border: 1px solid #797979; //border: none; - border-radius: 2px; - /*margin: -3px 0 0 0;*/ - font-weight: 700; //font-weight: normal; - } - - &.splitted { - width: 20%; - justify-content: flex-end; - padding: 0 8px; - } - - @media only screen and (max-width: 1199px) { - .ui.primary.button, - .ui.basic.blue.button { - min-width: 100px !important; - height: 34px; - } - .merge { - padding: 5px 12px; - } - .split { - padding: 5px 12px; - i { - margin: 0; - } - } - - .open-translate { - font-family: Calibri, Arial, Helvetica, sans-serif; - padding: 5px 12px; - } - } - } - .openOutsource { - .title-job, - .titles-compare, - .activity-icons { - display: none; - } - } - } - .analyze-report { - text-align: center; - width: 100%; - background-color: colors.$grey3; - margin: 0 auto; - position: relative; - top: 30px; - cursor: pointer; - z-index: 1; - > div { - width: 160px; - margin: 0 auto; - position: relative; - height: 48px; - display: flex; - } - h3 { - margin-bottom: 10px; - color: #000; - float: left; - margin-top: 10px; - } - .rounded { - width: 35px; - height: 35px; - line-height: 0; - border-radius: 17px; - cursor: pointer; - transition: 0.3s ease; - float: left; - i { - font-size: 30px; - margin: 0; - padding: 0; - top: 3px; - position: relative; - transition: 0.3s ease; - color: colors.$black; - &.open { - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -ms-transform: rotate(180deg); - -o-transform: rotate(180deg); - transform: rotate(180deg); - top: 11px; - } - } - } - } - } - .job-id { - display: inline-block; - color: colors.$grey1; - font-size: 12px; - position: relative; - line-height: 35px; - top: 1px; - text-align: left; - margin-right: 5px; - min-width: 70px; - } + gap: 4px; + color: colors.$grey700; - .source-target { - display: inline-block; - font-weight: bold; - max-width: 76%; - vertical-align: middle; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 16px; - line-height: 32px; - .source-box { - /*line-height: 30px;*/ - display: inline-block; - max-width: 50%; - min-width: 60px; - vertical-align: middle; - overflow: hidden; - text-overflow: ellipsis; - &.no-split { - max-width: 40%; - } - } - .in-to { - display: inline-block; - top: 3px; - color: #5a5a5a; - /*line-height: 28px;*/ - width: 24px; - position: relative; - i { - margin-right: 0; - font-size: 12px; - top: -2px; - position: relative; - } - } - .target-box { - display: inline-block; - /*line-height: 30px;*/ - max-width: 50%; - min-width: 60px; - vertical-align: middle; - overflow: hidden; - text-overflow: ellipsis; - &.no-split { - max-width: 43%; - } - } - } - - @media only screen and (max-width: 1199px) and (min-width: 992px) { - .source-target { - /*max-width: 68% !important;*/ - .source-box, - .target-box { - max-width: 50%; - min-width: 50px; - vertical-align: middle; - overflow: hidden; - text-overflow: ellipsis; - /*&.no-split { - max-width: 40%; - min-width: 50px; - vertical-align: middle; - overflow: hidden; - text-overflow: ellipsis; - }*/ - } - } - } - - .project-body { - margin-top: 0; - background-color: colors.$grey3; - margin: 0 -1rem 0; - margin-left: 1px; - margin-right: 1px; - .job { - padding: 0 15px; - margin-top: 35px; - margin-bottom: 20px; - .job-header { - background-color: colors.$white !important; - padding: 0 0 !important; - } - .job-body { - background-color: colors.$grey5; - .chunks { - overflow-x: auto; - .chunk-container { - padding-top: 0; - overflow-x: auto; - min-width: 1200px; - .analysis { - //padding-top: 60px; - margin-top: 0; - &.show-details { - .chunks-analyze, - .chunk-analyze-container > div { - background-color: colors.$grey4 !important; - } - } - &.outsource-open { - margin-left: -35px; - margin-right: -35px; - } - } + &:last-child { + font-weight: 700; + color: colors.$black; } } } - } - } - } -} - -/*.analysis { - .chunk-detail { - .left-box { - height: 1%; - position: relative; - float: left; - text-align: left; - width: 15%; - } - .right-box { - width: 10%; - position: relative; - float: right; - top: 2px; - } - - @media only screen and (max-width: 1199px) and (min-width: 992px) { - .left-box { - padding-left: 0 !important; - .job-id { - min-width: 65px; - } - .file-details { - text-decoration: underline; - min-width: 25px; - line-height: 35px; - font-weight: 700; - position: relative; - top: 1px; - .details { - display: none; + @media screen and (max-width: 1300px) { + .project-card__count > div { + width: 140px; } - &:hover { - text-decoration: none; + .project-card__header-info { + width: 200px; } } - .f-details-number { - display: inline-block; - } - } - } - - @media only screen and (max-width: 991px) and (min-width: 768px) { - .left-box { - padding-left: 0 !important; - .job-id { - min-width: 65px; - } - .file-details { - text-decoration: underline; - min-width: 25px; - line-height: 35px; - font-weight: 700; - position: relative; - top: 1px; - .details { - display: none; + @media screen and (max-width: 1200px) { + .project-card__count > div { + width: 140px; } - &:hover { - text-decoration: none; + .project-card__header-info { + width: 150px; } } - } - } - - @media only screen and (max-width: 767px) { - .left-box { - padding-left: 0 !important; - .job-id { - min-width: 65px; + .project-card__header { + height: 64px; + background: colors.$grey50; } - .file-details { - text-decoration: underline; - min-width: 25px; - line-height: 35px; - font-weight: 700; - position: relative; - top: 1px; - .details { - display: none; - } - &:hover { - text-decoration: none; - } + .project-card__content { + height: 80px; + border-bottom: 1px solid colors.$grey100; + background: colors.$white; } } } - } - .chunk-detail { - transition: 0.3s ease; - background-color: #ffffff; - padding-top: 4px !important; - padding-bottom: 4px !important; - text-align: center; - } - - .chunk-detail { - padding-top: 0 !important; - padding-bottom: 0 !important; - background-color: $grey2; - padding-left: 12px; - z-index: 0; - .left-box { - padding-top: 8px; - i { - position: absolute; - top: 12px; + .project-body { + background-color: colors.$grey50; + display: flex; + padding: 8px 16px 16px 16px; + flex-direction: column; + align-items: flex-start; + gap: 8px; + align-self: stretch; + border-radius: variables.$border-radius-big; + h5 { + font-size: 16px; } - .file-title-details { - display: inline-block; - max-width: 82%; - min-width: 30px; - white-space: nowrap; + .job { + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + border-radius: variables.$border-radius-default; + border: 1px solid colors.$grey150; overflow: hidden; - text-overflow: ellipsis; - position: absolute; - transition: 0.3s ease; - position: absolute; - left: 18px; - cursor: default; - &:hover { - display: inline-block; - max-width: 210%; - min-width: 30px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - position: absolute; - left: 18px; - background: #c7c6c6; - padding: 0 5px; - z-index: 2; - } } } } - .updated-count { - background-color: #f9ffb5; - transition: 0.4s ease; - } -}*/ - -@media only screen and (min-width: 1200px) { - .ui.container:not(.fluid) { - width: 1140px !important; - margin-left: auto !important; - margin-right: auto !important; - transition: 0.3s ease; - } -} - -@media only screen and (min-width: 1380px) { - .ui.container:not(.fluid) { - width: 1280px !important; - margin-left: auto !important; - margin-right: auto !important; - transition: 0.3s ease; - } -} - -@media only screen and (max-width: 1199px) and (min-width: 992px) { - .ui.container:not(.fluid) { - width: 991px !important; - margin-left: auto !important; - margin-right: auto !important; - transition: 0.3s ease; - } -} - -@media only screen and (max-width: 991px) and (min-width: 768px) { - .ui.container:not(.fluid) { - min-width: 991px !important; - margin-left: auto !important; - margin-right: auto !important; - transition: 0.3s ease; - } - .project-list { - padding-top: 50px; - } -} - -@media only screen and (max-width: 767px) { - .ui.container:not(.fluid) { - margin-left: 1em !important; - margin-right: 1em !important; - min-width: 991px; - transition: 0.3s ease; - } - .project-list { - padding-top: 50px; - } -} - -// Transitions -/*.chunk-detail { - width: 100%; - height: 35px; - position: relative; - overflow: hidden; - &.transition-enter { - height: 0; - padding-top: 0px !important; - padding-bottom: 0 !important; - } - - &.transition-enter.transition-enter-active { - height: 35px; - -webkit-transition: height 0.3s ease; - } - - &.transition-exit.transition-exit-active { - height: 0; - padding-top: 0px !important; - padding-bottom: 0 !important; - -webkit-transition: height 0.3s ease; - } -}*/ -.progress-bar { - height: 20px; - position: relative; - overflow: hidden; - &.transition-enter { - height: 0; - padding-top: 0px !important; - padding-bottom: 0 !important; - } - - &.transition-enter.transition-enter-active { - height: 20px; - -webkit-transition: height 0.3s ease; - } - - &.transition-exit.transition-exit-active { - height: 0; - padding-top: 0px !important; - padding-bottom: 0 !important; - -webkit-transition: height 0.3s ease; - } -} - -.project { - .jobs { - position: relative; - opacity: 1; - } - .transitionAnalyzeMain-enter { - max-height: 0; - opacity: 0; - } - - .transitionAnalyzeMain-enter.transitionAnalyzeMain-enter-active { - max-height: 3000px; - opacity: 1; - -webkit-transition: - max-height 0.5s ease, - opacity 1s ease; - } - - .transitionAnalyzeMain-exit.transitionAnalyzeMain-exit-active { - max-height: 0; - padding-top: 0; - padding-bottom: 0; - opacity: 0; - -webkit-transition: - max-height 0.5s ease, - padding 1s ease, - opacity 1s ease; - } } diff --git a/public/css/sass/commons/_aria-label-tooltip.scss b/public/css/sass/commons/_aria-label-tooltip.scss index 8030316434..cc17b6046b 100644 --- a/public/css/sass/commons/_aria-label-tooltip.scss +++ b/public/css/sass/commons/_aria-label-tooltip.scss @@ -1,7 +1,7 @@ -@use '../commons/colors'; +@use '../tokens/colors'; // Tooltips -[aria-label] { +[aria-label]:not(.react-datepicker__navigation) { position: relative; } @@ -13,7 +13,7 @@ padding: 4px 8px; background-color: colors.$white; box-shadow: 0 0 16px rgba(colors.$black, 0.25); - color: colors.$grey6; + color: colors.$grey700; pointer-events: none; white-space: pre; font-size: 14px; @@ -64,7 +64,7 @@ } [aria-label][tooltip-position='bottom']::before { bottom: -6px; - border-bottom: 6px solid colors.$grey4; + border-bottom: 6px solid colors.$grey100; } [aria-label][tooltip-position='left']::before, @@ -81,7 +81,7 @@ } [aria-label][tooltip-position='left']::before { left: -6px; - border-left: 6px solid colors.$grey4; + border-left: 6px solid colors.$grey100; } [aria-label][tooltip-position='right']::after { top: 50%; @@ -90,5 +90,5 @@ } [aria-label][tooltip-position='right']::before { right: -6px; - border-right: 6px solid colors.$grey4; + border-right: 6px solid colors.$grey100; } diff --git a/public/css/sass/commons/_buttons.scss b/public/css/sass/commons/_buttons.scss deleted file mode 100644 index aa8324a2e9..0000000000 --- a/public/css/sass/commons/_buttons.scss +++ /dev/null @@ -1,146 +0,0 @@ -@use "../commons/colors"; -/*SIZE*/ -.ui.buttons .button, -.ui.buttons .or, -.ui.button { - font-size: 16px; -} - -.ui.button-modal { - font-size: 18px; - cursor: pointer; - font-weight: bold; - padding: 0 22px; - display: inline-block; - height: 40px; - overflow: hidden; - line-height: 40px; - &.blue { - background: -webkit-gradient( - linear, - left top, - left bottom, - from(colors.$translatedBlue), - to(#119ec4) - ); - color: #fff; - border: 1px solid #848689; - text-decoration: none; - border-radius: 2px; - &.disabled { - opacity: 0.5 !important; - cursor: default; - -moz-box-shadow: none; - -webkit-box-shadow: none; - border: 1px solid #666; - background: #ccc; - } - } - &.grey { - color: #333; - background: #f6f6f6; - background: -webkit-gradient( - linear, - left top, - left bottom, - from(#f6f6f6), - to(#e2e3e5) - ); - border: 1px solid #848689; - text-decoration: none; - border-radius: 2px; - } - &.orange { - background-color: #f26522; - background: -webkit-gradient( - linear, - left top, - left bottom, - from(#f26522), - to(#fb5d12) - ); - color: #fff; - border: 1px solid #848689; - text-decoration: none; - border-radius: 2px; - } - &:hover { - box-shadow: 0 1px 2px #ccc; - -webkit-box-shadow: 0 1px 2px #ccc; - border: 1px solid #000; - } - &:active { - -moz-box-shadow: inset 0 0 1px 1px #888; - -webkit-box-shadow: inset 0 0 1px 1px #888; - box-shadow: inset 0 0 1px 1px #888; - } - - &.margin { - &.left-10 { - margin-left: 10px; - } - &.left-20 { - margin-left: 20px; - } - &.left-30 { - margin-left: 30px; - } - &.right-10 { - margin-right: 10px; - } - &.right-20 { - margin-right: 20px; - } - &.right-30 { - margin-right: 30px; - } - } -} - -.ui.button.cancel-button { - font-family: 'Calibri', 'Helvetica Neue', Arial, Helvetica, sans-serif; - margin-top: 0; - border: 1px solid #797979; - border-radius: 2px; - background-color: #f6f6f6; - margin-right: 15px; - &:hover { - //box-shadow: 0 0 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24) !important; - } - &:focus { - box-shadow: none; - } -} - -// Button TR, LR navigation through filter -.ui.next-repetition-group, -.ui.next-repetition { - border: 1px solid #797979; - position: relative; - padding: 9px 12px 8px !important; -} - -.ui.next-review-repetition-group, -.ui.next-review-repetition { - border: 1px solid #797979; - position: relative; - padding: 9px 12px 8px !important; - background: colors.$approvedGreen !important; - &.revise-button-2 { - background: #bc6ac9 !important; - } -} - -.ui.next-repetition-group, -.ui.next-review-repetition-group { - margin-right: 4px; -} - -// Button comment segment -.ui.primary.mbc-comment-send-btn { - font-size: 14px; - padding: 8px 10px; - text-align: right; - border-radius: 2px; - float: right; -} diff --git a/public/css/sass/commons/_colors.scss b/public/css/sass/commons/_colors.scss deleted file mode 100644 index cade3f7d45..0000000000 --- a/public/css/sass/commons/_colors.scss +++ /dev/null @@ -1,62 +0,0 @@ -$black: #000; -$grey: #6f6f6f; -$white: white; - -$grey1: #788190; -$grey2: #aebdcd; -$grey3: #d9e0e8; -$grey4: #eaebee; -$grey5: #f5f6f7; -$grey6: #666666; -$grey7: #9e9e9e; -$grey8: #d7d8db; -$grey9: #f3f3f3; - -$black100: rgba(26, 26, 41, 0.07); -$orange600: rgba(235, 191, 71, 1); -$blue800: rgba(42, 140, 252, 1); - -$darkBlue: #002b5a; -$darkBlueHover: #00254f; -$darkBlueTransparent: #d9e0e8; - -$linkBlue: #4184c4; -$linkBlueHover: #3174b4; -$linkBlueActive: #3174b4; -$linkBlueTransparent: #86aacd; - -$translatedBlue: #0099cc; -$translatedBlueHover: #0889b3; -$translatedBlueActive: #0889b3; -$translatedBlueTransparent: #63c3e3; -$transparentBlue: #e4f2fb; - -$approvedGreen: #2fb177; -$approvedGreenHover: #1c9f64; -$approvedGreenTransparent: #80d5af; - -$approved2Green: #9352c1; -$approved2GreenHover: #7a3ca6; -$approved2GreenTransparent: #b58dd2; - -$rebuttedRed: #ff8734; -$rebuttedRedHover: #e9511f; -$rebuttedRedTransparent: #ffaa8e; - -$greenDefault: #1fbd1f; -$greenDefaultHover: #1ba61b; -$greenDefaultTransparent: #7cc576; -$greenDefaultTransparent2: #d1e0d1; -$red800: rgba(239, 71, 64, 1); - -$redDefault: #e02020; -$redDefaultHover: #d31d1d; -$redDefaultTransparent: #ffc8ca; - -$orangeDefault: #ffcc01; -$orangeDefaultHover: #efbf00; -$orangeDefaultTransparent: #fee47a; -$orangeDefaultTransparent2: #fffed8; - -$warning: #f2711c; -$warningHover: #df681a; \ No newline at end of file diff --git a/public/css/sass/commons/_date-picker-translator.scss b/public/css/sass/commons/_date-picker-translator.scss index 22e62c463d..2fb8835118 100644 --- a/public/css/sass/commons/_date-picker-translator.scss +++ b/public/css/sass/commons/_date-picker-translator.scss @@ -1,33 +1,33 @@ -@use "../commons/colors"; +@use "../tokens/colors"; .xdsoft_datetimepicker { font-family: Calibri, Arial, Helvetica, sans-serif; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { - color: colors.$translatedBlue; + color: colors.$blue500; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current { - background: colors.$translatedBlue; + background: colors.$blue500; box-shadow: none; - color: #ffffff; + color: colors.$white; } .xdsoft_datetimepicker .xdsoft_calendar td:hover { - color: #666 !important; - background: #d0d0d0 !important; + color: colors.$grey700 !important; + background: colors.$grey200 !important; box-shadow: none !important; } .xdsoft_datetimepicker .xdsoft_calendar td:active { - color: #ffffff !important; - background: colors.$translatedBlue !important; + color: colors.$white !important; + background: colors.$blue500 !important; box-shadow: none !important; } .xdsoft_datetimepicker .xdsoft_calendar td:focus { - color: #ffffff !important; - background: colors.$translatedBlue !important; + color: colors.$white !important; + background: colors.$blue500 !important; box-shadow: none !important; } @@ -36,28 +36,28 @@ .xdsoft_time_box > div > div.xdsoft_current { - background: colors.$translatedBlue; + background: colors.$blue500; box-shadow: none; } .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { - color: #666 !important; - background: #d0d0d0 !important; + color: colors.$grey700 !important; + background: colors.$grey200 !important; box-shadow: none !important; } .xdsoft_datetimepicker .blue-gradient-button { - background: colors.$translatedBlue; + background: colors.$blue500; color: white; font-family: Calibri; - border: 1px solid #797979 !important; + border: 1px solid colors.$grey600 !important; padding: 4px; } .xdsoft_datetimepicker .blue-gradient-button:hover { - background: colors.$translatedBlue; - box-shadow: 0 0 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), + background: colors.$blue500; + box-shadow: 0 0 0 colors.$grey200, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24) !important; - color: #fff; - border: 1px solid #797979 !important; + color: colors.$white; + border: 1px solid colors.$grey600 !important; } diff --git a/public/css/sass/commons/_icons.scss b/public/css/sass/commons/_icons.scss deleted file mode 100755 index 4cb60fe899..0000000000 --- a/public/css/sass/commons/_icons.scss +++ /dev/null @@ -1,1359 +0,0 @@ -@font-face { - font-family: 'icomoon'; - src: url('/public/css/fonts/icomoon.eot?pz5eid'); - src: - url('/public/css/fonts/icomoon.eot?pz5eid#iefix') - format('embedded-opentype'), - url('/public/css/fonts/icomoon.ttf?pz5eid') format('truetype'), - url('/public/css/fonts/icomoon.woff?pz5eid') format('woff'), - url('/public/css/fonts/icomoon.svg?pz5eid#icomoon') format('svg'); - font-weight: normal; - font-style: normal; - font-display: block; -} - -[class^='icon-'], -[class*=' icon-'] { - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: 'icomoon' !important; - speak: never; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.icon-go-to-first:before { - content: '\ea8e'; -} -.icon-no-preview:before { - content: '\ea8d'; -} -.icon-quote-client:before { - content: '\ea89'; -} -.icon-qr-matecat:before { - content: '\e90a'; -} -.icon-tm-matecat:before { - content: '\e90b'; -} -.icon-uniE96B:before { - content: '\e96b'; -} -.icon-uniE96D:before { - content: '\e96d'; -} -.icon-uniE96E:before { - content: '\e96e'; -} -.icon-uniE970:before { - content: '\e970'; -} -.icon-error_outline:before { - content: '\e001'; -} -.icon-power-cord:before { - content: '\e291'; -} -.icon-power-cord2:before { - content: '\e292'; -} -.icon-user22:before { - content: '\e601'; -} -.icon-upload:before { - content: '\e602'; -} -.icon-stop:before { - content: '\e604'; -} -.icon-info:before { - content: '\e605'; -} -.icon-minus:before { - content: '\e607'; -} -.icon-settings:before { - content: '\e8b8'; -} -.icon-zip:before { - content: '\e907'; -} -.icon-mic:before { - content: '\e91e'; -} -.icon-bubble2:before { - content: '\e96f'; -} -.icon-cancel-circle:before { - content: '\ea0d'; -} -.icon-make-group:before { - content: '\ea58'; -} -.icon-text-height:before { - content: '\ea5f'; -} -.icon-superscript2:before { - content: '\ea6b'; -} -.icon-subscript2:before { - content: '\ea6c'; -} -.icon-split:before { - content: '\f03d'; -} -.icon-play:before { - content: '\f04b'; -} -.icon-chevron-left:before { - content: '\f053'; -} -.icon-eye2:before { - content: '\f06e'; -} -.icon-google-plus-square2:before { - content: '\f0d5'; -} -.icon-sort-up:before { - content: '\f0e0'; -} -.icon-code:before { - content: '\f121'; -} -.icon-star-half-empty:before { - content: '\f123'; -} -.icon-notice:before { - content: '\e903'; -} -.icon-forward:before { - content: '\e902'; -} -.icon-file:before { - content: '\e904'; -} -.icon-number:before { - content: '\e90c'; -} -.icon-number2:before { - content: '\e90d'; -} -.icon-number3:before { - content: '\e90e'; -} -.icon-number4:before { - content: '\e90f'; -} -.icon-number5:before { - content: '\e910'; -} -.icon-number6:before { - content: '\e911'; -} -.icon-number7:before { - content: '\e912'; -} -.icon-number8:before { - content: '\e913'; -} -.icon-number9:before { - content: '\e914'; -} -.icon-number10:before { - content: '\e915'; -} -.icon-number11:before { - content: '\e916'; -} -.icon-number12:before { - content: '\e917'; -} -.icon-number13:before { - content: '\e918'; -} -.icon-number14:before { - content: '\e919'; -} -.icon-number15:before { - content: '\e91a'; -} -.icon-number16:before { - content: '\e91b'; -} -.icon-number17:before { - content: '\e91c'; -} -.icon-number18:before { - content: '\e91d'; -} -.icon-number19:before { - content: '\e91f'; -} -.icon-number20:before { - content: '\e920'; -} -.icon-quote:before { - content: '\e921'; -} -.icon-quote2:before { - content: '\e923'; -} -.icon-tag:before { - content: '\e924'; -} -.icon-tag2:before { - content: '\e925'; -} -.icon-link:before { - content: '\e926'; -} -.icon-link2:before { - content: '\e927'; -} -.icon-cabinet:before { - content: '\e928'; -} -.icon-cabinet2:before { - content: '\e929'; -} -.icon-calendar:before { - content: '\e92a'; -} -.icon-calendar2:before { - content: '\e92b'; -} -.icon-calendar3:before { - content: '\e92c'; -} -.icon-file2:before { - content: '\e92d'; -} -.icon-file3:before { - content: '\e92e'; -} -.icon-file4:before { - content: '\e92f'; -} -.icon-files:before { - content: '\e930'; -} -.icon-phone:before { - content: '\e931'; -} -.icon-tablet:before { - content: '\e932'; -} -.icon-window:before { - content: '\e933'; -} -.icon-monitor:before { - content: '\e934'; -} -.icon-ipod:before { - content: '\e935'; -} -.icon-tv:before { - content: '\e936'; -} -.icon-camera:before { - content: '\e937'; -} -.icon-camera2:before { - content: '\e938'; -} -.icon-camera3:before { - content: '\e939'; -} -.icon-film:before { - content: '\e93a'; -} -.icon-film2:before { - content: '\e93b'; -} -.icon-film3:before { - content: '\e93c'; -} -.icon-microphone:before { - content: '\e93d'; -} -.icon-microphone2:before { - content: '\e93e'; -} -.icon-microphone3:before { - content: '\e93f'; -} -.icon-drink:before { - content: '\e940'; -} -.icon-drink2:before { - content: '\e941'; -} -.icon-drink3:before { - content: '\e942'; -} -.icon-drink4:before { - content: '\e943'; -} -.icon-coffee:before { - content: '\e944'; -} -.icon-mug:before { - content: '\e945'; -} -.icon-icecream:before { - content: '\e901'; -} -.icon-cake:before { - content: '\e946'; -} -.icon-inbox:before { - content: '\e947'; -} -.icon-upload2:before { - content: '\e949'; -} -.icon-inbox2:before { - content: '\e94a'; -} -.icon-checkmark4:before { - content: '\e94b'; -} -.icon-checkmark5:before { - content: '\e94c'; -} -.icon-cancel:before { - content: '\e94d'; -} -.icon-cancel2:before { - content: '\e94e'; -} -.icon-plus2:before { - content: '\e94f'; -} -.icon-plus3:before { - content: '\e950'; -} -.icon-minus2:before { - content: '\e951'; -} -.icon-minus3:before { - content: '\e952'; -} -.icon-notice3:before { - content: '\e953'; -} -.icon-notice4:before { - content: '\e954'; -} -.icon-cog:before { - content: '\e955'; -} -.icon-cogs:before { - content: '\e956'; -} -.icon-cog2:before { - content: '\e957'; -} -.icon-warning2:before { - content: '\e958'; -} -.icon-health:before { - content: '\e959'; -} -.icon-suitcase:before { - content: '\e95a'; -} -.icon-suitcase2:before { - content: '\e95b'; -} -.icon-suitcase3:before { - content: '\e95c'; -} -.icon-picture:before { - content: '\e95d'; -} -.icon-pictures:before { - content: '\e95e'; -} -.icon-pictures2:before { - content: '\e95f'; -} -.icon-android:before { - content: '\e960'; -} -.icon-marvin:before { - content: '\e961'; -} -.icon-pacman:before { - content: '\e962'; -} -.icon-cassette:before { - content: '\e963'; -} -.icon-watch:before { - content: '\e964'; -} -.icon-chronometer:before { - content: '\e965'; -} -.icon-watch2:before { - content: '\e966'; -} -.icon-alarmclock:before { - content: '\e969'; -} -.icon-time:before { - content: '\e96a'; -} -.icon-time2:before { - content: '\e96c'; -} -.icon-headphones:before { - content: '\e971'; -} -.icon-wallet:before { - content: '\e974'; -} -.icon-cancel3:before { - content: '\e975'; -} -.icon-eye3:before { - content: '\e976'; -} -.icon-position:before { - content: '\e977'; -} -.icon-sitemap:before { - content: '\e978'; -} -.icon-sitemap2:before { - content: '\e979'; -} -.icon-cloud:before { - content: '\e97a'; -} -.icon-upload3:before { - content: '\e97b'; -} -.icon-chart:before { - content: '\e97c'; -} -.icon-chart2:before { - content: '\e97d'; -} -.icon-chart3:before { - content: '\e97e'; -} -.icon-chart4:before { - content: '\e97f'; -} -.icon-chart5:before { - content: '\e980'; -} -.icon-chart6:before { - content: '\e981'; -} -.icon-location:before { - content: '\e982'; -} -.icon-basket:before { - content: '\e984'; -} -.icon-folder:before { - content: '\e985'; -} -.icon-gamepad:before { - content: '\e986'; -} -.icon-alarm:before { - content: '\e987'; -} -.icon-alarm-cancel:before { - content: '\e988'; -} -.icon-phone2:before { - content: '\e989'; -} -.icon-phone3:before { - content: '\e98a'; -} -.icon-image:before { - content: '\e98b'; -} -.icon-open:before { - content: '\e98c'; -} -.icon-sale:before { - content: '\e98d'; -} -.icon-direction:before { - content: '\e98e'; -} -.icon-map:before { - content: '\e991'; -} -.icon-vote:before { - content: '\e993'; -} -.icon-graduate:before { - content: '\e994'; -} -.icon-lab:before { - content: '\e995'; -} -.icon-tie:before { - content: '\e996'; -} -.icon-football:before { - content: '\e997'; -} -.icon-eightball:before { - content: '\e998'; -} -.icon-bowling:before { - content: '\e999'; -} -.icon-bowlingpin:before { - content: '\e99a'; -} -.icon-baseball:before { - content: '\e99b'; -} -.icon-soccer:before { - content: '\e99c'; -} -.icon-3dglasses:before { - content: '\e99d'; -} -.icon-microwave:before { - content: '\e99e'; -} -.icon-refrigerator:before { - content: '\e99f'; -} -.icon-oven:before { - content: '\e9a0'; -} -.icon-washingmachine:before { - content: '\e9a1'; -} -.icon-mouse:before { - content: '\e9a2'; -} -.icon-smiley:before { - content: '\e9a3'; -} -.icon-sad:before { - content: '\e9a4'; -} -.icon-mute:before { - content: '\e9a5'; -} -.icon-hand:before { - content: '\e9a6'; -} -.icon-radio:before { - content: '\e9a7'; -} -.icon-satellite:before { - content: '\e9a8'; -} -.icon-medal:before { - content: '\e9a9'; -} -.icon-medal2:before { - content: '\e9aa'; -} -.icon-switch:before { - content: '\e9ab'; -} -.icon-key:before { - content: '\e9ac'; -} -.icon-cord:before { - content: '\e9ad'; -} -.icon-locked:before { - content: '\e9ae'; -} -.icon-unlocked:before { - content: '\e9af'; -} -.icon-locked2:before { - content: '\e9b0'; -} -.icon-unlocked2:before { - content: '\e9b1'; -} -.icon-magnifier:before { - content: '\e9b2'; -} -.icon-zoomin:before { - content: '\e9b3'; -} -.icon-zoomout:before { - content: '\e9b4'; -} -.icon-stack:before { - content: '\e9b5'; -} -.icon-stack2:before { - content: '\e9b6'; -} -.icon-stack3:before { - content: '\e9b7'; -} -.icon-davidstar:before { - content: '\e9b8'; -} -.icon-cross:before { - content: '\e9b9'; -} -.icon-moonandstar:before { - content: '\e9ba'; -} -.icon-transformers:before { - content: '\e9bb'; -} -.icon-batman:before { - content: '\e9bc'; -} -.icon-spaceinvaders:before { - content: '\e9bd'; -} -.icon-skeletor:before { - content: '\e9be'; -} -.icon-lamp:before { - content: '\e9bf'; -} -.icon-lamp2:before { - content: '\e9c0'; -} -.icon-umbrella:before { - content: '\e9c1'; -} -.icon-streetlight:before { - content: '\e9c2'; -} -.icon-bomb:before { - content: '\e9c3'; -} -.icon-archive:before { - content: '\e9c4'; -} -.icon-battery:before { - content: '\e9c5'; -} -.icon-battery2:before { - content: '\e9c6'; -} -.icon-battery3:before { - content: '\e9c7'; -} -.icon-battery4:before { - content: '\e9c8'; -} -.icon-battery5:before { - content: '\e9c9'; -} -.icon-megaphone:before { - content: '\e9cc'; -} -.icon-megaphone2:before { - content: '\e9cd'; -} -.icon-patch:before { - content: '\e9cf'; -} -.icon-pil:before { - content: '\e9d0'; -} -.icon-injection:before { - content: '\e9d1'; -} -.icon-thermometer:before { - content: '\e9d2'; -} -.icon-lamp3:before { - content: '\e9d3'; -} -.icon-lamp4:before { - content: '\e9d4'; -} -.icon-lamp5:before { - content: '\e9d5'; -} -.icon-cube:before { - content: '\e9d6'; -} -.icon-box:before { - content: '\e9d7'; -} -.icon-box2:before { - content: '\e9d8'; -} -.icon-diamond:before { - content: '\e9d9'; -} -.icon-bag:before { - content: '\e9da'; -} -.icon-moneybag:before { - content: '\e9db'; -} -.icon-grid:before { - content: '\e9dc'; -} -.icon-grid2:before { - content: '\e9dd'; -} -.icon-list:before { - content: '\e9de'; -} -.icon-list2:before { - content: '\e9df'; -} -.icon-ruler:before { - content: '\e9e0'; -} -.icon-ruler2:before { - content: '\e9e1'; -} -.icon-layout:before { - content: '\e9e2'; -} -.icon-layout2:before { - content: '\e9e3'; -} -.icon-layout3:before { - content: '\e9e4'; -} -.icon-layout4:before { - content: '\e9e5'; -} -.icon-layout5:before { - content: '\e9e6'; -} -.icon-layout6:before { - content: '\e9e7'; -} -.icon-layout7:before { - content: '\e9e8'; -} -.icon-layout8:before { - content: '\e9e9'; -} -.icon-layout9:before { - content: '\e9ea'; -} -.icon-layout10:before { - content: '\e9eb'; -} -.icon-layout11:before { - content: '\e9ec'; -} -.icon-layout12:before { - content: '\e9ed'; -} -.icon-layout13:before { - content: '\e9ee'; -} -.icon-layout14:before { - content: '\e9ef'; -} -.icon-tools:before { - content: '\e9f0'; -} -.icon-screwdriver:before { - content: '\e9f1'; -} -.icon-paint:before { - content: '\e9f2'; -} -.icon-hammer:before { - content: '\e9f3'; -} -.icon-brush:before { - content: '\e9f4'; -} -.icon-pen:before { - content: '\e9f5'; -} -.icon-chat:before { - content: '\e9f6'; -} -.icon-comments:before { - content: '\e9f7'; -} -.icon-chat2:before { - content: '\e9f8'; -} -.icon-chat3:before { - content: '\e9f9'; -} -.icon-volume:before { - content: '\e9fa'; -} -.icon-volume2:before { - content: '\e9fb'; -} -.icon-volume3:before { - content: '\e9fc'; -} -.icon-equalizer:before { - content: '\e9fd'; -} -.icon-resize:before { - content: '\e9fe'; -} -.icon-resize2:before { - content: '\e9ff'; -} -.icon-stretch:before { - content: '\ea00'; -} -.icon-narrow:before { - content: '\ea01'; -} -.icon-resize3:before { - content: '\ea02'; -} -.icon-calculator:before { - content: '\ea04'; -} -.icon-library:before { - content: '\ea05'; -} -.icon-auction:before { - content: '\ea06'; -} -.icon-justice:before { - content: '\ea07'; -} -.icon-stats:before { - content: '\ea0a'; -} -.icon-stats2:before { - content: '\ea0b'; -} -.icon-attachment:before { - content: '\ea0c'; -} -.icon-hourglass:before { - content: '\ea0e'; -} -.icon-abacus:before { - content: '\ea0f'; -} -.icon-pencil:before { - content: '\ea12'; -} -.icon-pen2:before { - content: '\ea13'; -} -.icon-pin:before { - content: '\ea14'; -} -.icon-pin2:before { - content: '\ea15'; -} -.icon-discout:before { - content: '\ea16'; -} -.icon-scissors:before { - content: '\ea18'; -} -.icon-profile:before { - content: '\ea19'; -} -.icon-profile2:before { - content: '\ea1a'; -} -.icon-profile3:before { - content: '\ea1b'; -} -.icon-rotate:before { - content: '\ea1c'; -} -.icon-rotate2:before { - content: '\ea1d'; -} -.icon-reply:before { - content: '\ea1e'; -} -.icon-forward3:before { - content: '\ea1f'; -} -.icon-retweet:before { - content: '\ea20'; -} -.icon-shuffle:before { - content: '\ea21'; -} -.icon-loop:before { - content: '\ea22'; -} -.icon-crop:before { - content: '\ea23'; -} -.icon-square:before { - content: '\ea24'; -} -.icon-square2:before { - content: '\ea25'; -} -.icon-circle:before { - content: '\ea26'; -} -.icon-dollar:before { - content: '\ea27'; -} -.icon-dollar2:before { - content: '\ea28'; -} -.icon-coins:before { - content: '\ea29'; -} -.icon-pig:before { - content: '\ea2a'; -} -.icon-bookmark:before { - content: '\ea2b'; -} -.icon-bookmark2:before { - content: '\ea2c'; -} -.icon-addressbook:before { - content: '\ea2d'; -} -.icon-addressbook2:before { - content: '\ea2e'; -} -.icon-safe:before { - content: '\ea2f'; -} -.icon-envelope:before { - content: '\ea30'; -} -.icon-envelope2:before { - content: '\ea31'; -} -.icon-radioactive:before { - content: '\ea32'; -} -.icon-music:before { - content: '\ea33'; -} -.icon-presentation:before { - content: '\ea34'; -} -.icon-male:before { - content: '\ea35'; -} -.icon-female:before { - content: '\ea36'; -} -.icon-aids:before { - content: '\ea37'; -} -.icon-heart2:before { - content: '\ea38'; -} -.icon-info2:before { - content: '\ea39'; -} -.icon-info3:before { - content: '\ea3a'; -} -.icon-piano:before { - content: '\ea3b'; -} -.icon-rain:before { - content: '\ea3e'; -} -.icon-snow:before { - content: '\ea3f'; -} -.icon-lightning:before { - content: '\ea42'; -} -.icon-sun:before { - content: '\ea43'; -} -.icon-moon:before { - content: '\ea44'; -} -.icon-cloudy:before { - content: '\ea45'; -} -.icon-cloudy2:before { - content: '\ea46'; -} -.icon-car:before { - content: '\ea47'; -} -.icon-bike:before { - content: '\ea48'; -} -.icon-truck:before { - content: '\ea49'; -} -.icon-bus:before { - content: '\ea4a'; -} -.icon-bike2:before { - content: '\ea4b'; -} -.icon-plane:before { - content: '\ea4c'; -} -.icon-paperplane:before { - content: '\ea4d'; -} -.icon-rocket:before { - content: '\ea4e'; -} -.icon-book:before { - content: '\ea4f'; -} -.icon-book2:before { - content: '\ea50'; -} -.icon-barcode:before { - content: '\ea51'; -} -.icon-barcode2:before { - content: '\ea52'; -} -.icon-collapse:before { - content: '\ea54'; -} -.icon-popout:before { - content: '\ea55'; -} -.icon-popin:before { - content: '\ea56'; -} -.icon-target:before { - content: '\ea57'; -} -.icon-ticket:before { - content: '\ea5b'; -} -.icon-ticket2:before { - content: '\ea5c'; -} -.icon-ticket3:before { - content: '\ea5d'; -} -.icon-microphone4:before { - content: '\ea5e'; -} -.icon-cone:before { - content: '\ea60'; -} -.icon-blocked:before { - content: '\ea61'; -} -.icon-stop2:before { - content: '\ea62'; -} -.icon-keyboard:before { - content: '\ea63'; -} -.icon-keyboard2:before { - content: '\ea64'; -} -.icon-radio2:before { - content: '\ea65'; -} -.icon-printer:before { - content: '\ea66'; -} -.icon-checked:before { - content: '\ea67'; -} -.icon-error:before { - content: '\ea68'; -} -.icon-add:before { - content: '\ea69'; -} -.icon-minus4:before { - content: '\ea6a'; -} -.icon-alert:before { - content: '\ea6d'; -} -.icon-pictures3:before { - content: '\ea6e'; -} -.icon-atom:before { - content: '\ea6f'; -} -.icon-eyedropper:before { - content: '\ea70'; -} -.icon-globe:before { - content: '\ea71'; -} -.icon-globe2:before { - content: '\ea72'; -} -.icon-shipping:before { - content: '\ea73'; -} -.icon-yingyang:before { - content: '\ea74'; -} -.icon-compass:before { - content: '\ea75'; -} -.icon-zip2:before { - content: '\ea76'; -} -.icon-zip3:before { - content: '\ea77'; -} -.icon-anchor:before { - content: '\ea78'; -} -.icon-lockedheart:before { - content: '\ea79'; -} -.icon-magnet:before { - content: '\ea7a'; -} -.icon-navigation:before { - content: '\ea7b'; -} -.icon-tags:before { - content: '\ea7c'; -} -.icon-heart3:before { - content: '\ea7d'; -} -.icon-heart4:before { - content: '\ea7e'; -} -.icon-usb:before { - content: '\ea81'; -} -.icon-clipboard:before { - content: '\ea84'; -} -.icon-clipboard2:before { - content: '\ea85'; -} -.icon-clipboard3:before { - content: '\ea86'; -} -.icon-switch2:before { - content: '\ea87'; -} -.icon-ruler3:before { - content: '\ea88'; -} -.icon-notice2:before { - content: '\e908'; -} -.icon-forward2:before { - content: '\e909'; -} -.icon-assignment_turned_in:before { - content: '\e862'; -} -.icon-more_vert:before { - content: '\e5d4'; -} -.icon-pageview:before { - content: '\e905'; -} -.icon-preview-bottom-window:before { - content: '\ea8b'; -} -.icon-preview-new-window:before { - content: '\ea8c'; -} -.icon-users:before { - content: '\e972'; -} -.icon-lock:before { - content: '\e98f'; -} -.icon-earth:before { - content: '\e9ca'; -} -.icon-user2:before { - content: '\e600'; -} -.icon-checkmark:before { - content: '\ea10'; -} -.icon-undo2:before { - content: '\e967'; -} -.icon-notification:before { - content: '\ea08'; -} -.icon-embed:before { - content: '\ea7f'; -} -.icon-share2:before { - content: '\ea82'; -} -.icon-arrow-right2:before { - content: '\ea3c'; -} -.icon-arrow-left2:before { - content: '\ea40'; -} -.icon-file-text:before { - content: '\e922'; -} -.icon-eye:before { - content: '\e9ce'; -} -.icon-checkmark2:before { - content: '\e900'; -} -.icon-users2:before { - content: '\e973'; -} -.icon-lock2:before { - content: '\e990'; -} -.icon-earth2:before { - content: '\e9cb'; -} -.icon-user23:before { - content: '\e608'; -} -.icon-checkmark3:before { - content: '\ea11'; -} -.icon-undo22:before { - content: '\e968'; -} -.icon-notification2:before { - content: '\ea09'; -} -.icon-embed2:before { - content: '\ea80'; -} -.icon-share22:before { - content: '\ea83'; -} -.icon-arrow-right22:before { - content: '\ea3d'; -} -.icon-arrow-left22:before { - content: '\ea41'; -} -.icon-unlocked3:before { - content: '\ea8a'; -} -.icon-copy:before { - content: '\ea90'; -} -.icon-search:before { - content: '\f002'; -} -.icon-envelope-o:before { - content: '\f003'; -} -.icon-heart:before { - content: '\f004'; -} -.icon-star:before { - content: '\f005'; -} -.icon-user:before { - content: '\f007'; -} -.icon-check:before { - content: '\f00c'; -} -.icon-times:before { - content: '\f00d'; -} -.icon-power-off:before { - content: '\f011'; -} -.icon-gear:before { - content: '\f013'; -} -.icon-share-square-o:before { - content: '\f045'; -} -.icon-chevron-right:before { - content: '\f054'; -} -.icon-plus-circle:before { - content: '\f055'; -} -.icon-times-circle:before { - content: '\f057'; -} -.icon-check-circle:before { - content: '\f058'; -} -.icon-times-circle-o:before { - content: '\f05c'; -} -.icon-check-circle-o:before { - content: '\f05d'; -} -.icon-plus:before { - content: '\f067'; -} -.icon-warning:before { - content: '\f071'; -} -.icon-sign-in:before { - content: '\f090'; -} -.icon-wrench:before { - content: '\f0ad'; -} -.icon-tasks:before { - content: '\f0ae'; -} -.icon-filter:before { - content: '\f0b0'; -} -.icon-google-plus-square:before { - content: '\f0d4'; -} -.icon-unsorted:before { - content: '\f0dc'; -} -.icon-sort-down:before { - content: '\f0dd'; -} -.icon-exchange:before { - content: '\f0ec'; -} -.icon-mail-reply:before { - content: '\f112'; -} -.icon-minus-square-o:before { - content: '\f147'; -} -.icon-plus-square-o:before { - content: '\f196'; -} -.icon-language:before { - content: '\f1ab'; -} -.icon-paw:before { - content: '\f1b0'; -} diff --git a/public/css/sass/commons/_layout.scss b/public/css/sass/commons/_layout.scss new file mode 100644 index 0000000000..c625ce8c7a --- /dev/null +++ b/public/css/sass/commons/_layout.scss @@ -0,0 +1,65 @@ +// Breakpoints +$breakpoint-xs: 320px; +$breakpoint-sm: 480px; +$breakpoint-md: 768px; +$breakpoint-lg: 1024px; +$breakpoint-xl: 1600px; +$breakpoint-xxl: 1920px; + +// Grid widths +$grid-width-lg: 1280px; + +// Margins +$margin-xs: 16px; +$margin-sm: 16px; +$margin-md: 24px; +$margin-lg: 48px; +$margin-xl: 64px; +$margin-xxl: 64px; + +.layout__container { + width: 100%; + margin: 0 auto; + box-sizing: border-box; + // Mobile portrait (Xs) — > 320px: 4 columns, 16px margins, 100% width + @media (min-width: $breakpoint-xs) { + //padding-left: $margin-xs; + //padding-right: $margin-xs; + max-width: 100%; + } + + // Mobile landscape (Sm) — > 480px: 8 columns, 16px margins, 100% width + @media (min-width: $breakpoint-sm) { + //padding-left: $margin-sm; + //padding-right: $margin-sm; + max-width: 100%; + } + + // Tablet (Md) — > 768px: 8 columns, 24px margins, 100% width + @media (min-width: $breakpoint-md) { + //padding-left: $margin-md; + //padding-right: $margin-md; + max-width: 100%; + } + + // Small Desktop (Lg) — > 1024px: 12 columns, 48px margins, 1280px max + @media (min-width: $breakpoint-lg) { + //padding-left: $margin-lg; + //padding-right: $margin-lg; + max-width: $grid-width-lg ; + } + + // Desktop (Xl) — > 1600px: 12 columns, 64px margins, 1280px max + @media (min-width: $breakpoint-xl) { + //padding-left: $margin-xl; + //padding-right: $margin-xl; + max-width: $grid-width-lg ; + } + + // Large Desktop (Xxl) — > 1920px: 12 columns, 64px margins, 1280px max (REM scaling) + @media (min-width: $breakpoint-xxl) { + //padding-left: $margin-xxl; + //padding-right: $margin-xxl; + max-width: $grid-width-lg ; + } +} \ No newline at end of file diff --git a/public/css/sass/commons/_manage.scss b/public/css/sass/commons/_manage.scss index 2f42281533..204fca01d9 100644 --- a/public/css/sass/commons/_manage.scss +++ b/public/css/sass/commons/_manage.scss @@ -1,14 +1,17 @@ -@use 'colors'; +@use '../tokens/colors'; +@use 'variables'; // rewrite semantic CSS + html, body { height: 100%; + margin: 0; } body.manage { min-width: 1200px; font-family: Calibri, Arial, Helvetica, sans-serif; - background-color: colors.$grey5; + background-color: colors.$grey100; overflow-y: hidden; overflow-x: auto; font-size: 14px; @@ -22,75 +25,22 @@ div#manage-container { scroll-behavior: smooth; } -.ui.icon.button { - display: flex; - justify-content: center; - padding: 0px; - font-size: 18px; - margin: 0px; - width: 30px; - height: 30px; - line-height: 30px; - text-align: center; -} - -.ui.icon.button > .icon { - opacity: 0.9; - margin: 0em; - vertical-align: inherit; -} - -.ui.top.right.pointing.dropdown > .menu:after { - right: 0.5em; - z-index: -1; -} - .item.cancel-item { position: absolute !important; left: -99999px; } -.ui.top.right.pointing.dropdown { - .menu { - .item.submenu { - width: 180px; - } - .item.submenu a { - color: colors.$black; - } - - .item.submenu .dropdown.icon { - top: 2px; - margin-left: 8px; - } - } -} - -.ui.top.pointing.dropdown { - .menu.left { - .item.submenu .ui.dropdown { - margin-left: -3px; - } - .item.submenu .dropdown.icon { - left: -6px; - } - } -} - // Closing Shadow - Transitions for buttons .project-list { padding-top: 40px; padding-bottom: 160px; .container { - .ui.inverted.dimmer.more { - background-color: colors.$grey5; - } } .project { margin-bottom: 30px !important; - //border: 1px solid $grey2; + border-radius: variables.$border-radius-default; .project-title { display: flex !important; gap: 10px; @@ -103,22 +53,8 @@ div#manage-container { padding-top: 7px; } } - .ui.ribbon.label { - z-index: 2; - left: -33px; - max-width: 540px; - min-width: 0px; - line-height: 16px; - background-color: colors.$grey2; - color: colors.$black; - height: 30px; - border-radius: 0 2px 2px 0; - display: inline-block; - margin-right: -33px; - padding-left: 10px !important; - } .project-header { - background-color: colors.$grey4; + background-color: colors.$grey100; padding-bottom: 10px !important; //border-bottom: 1px solid #ccc; margin-bottom: -25px; @@ -141,10 +77,7 @@ div#manage-container { display: inline-block; vertical-align: text-bottom; min-width: 72px; - color: #5a5a5a; - } - .ui.form .field :disabled { - opacity: 1 !important; + color: colors.$grey700; } .project-payable { padding: 23px 0; @@ -165,229 +98,6 @@ div#manage-container { position: relative; top: 6px; padding: 2px 12px 0px !important; - .ui.dropdown { - text-align: center; - border-radius: 30px; - .scrolling.menu { - max-height: 21.7em; - } - .ui.icon.input input { - font-family: Calibri, Arial, Helvetica, sans-serif; - padding-right: 2.67142857em !important; - box-shadow: inset 0 1px 3px #ddd; - } - &.project-menu.ui.button { - box-shadow: none; - } - &.project-personal-assignee { - margin-right: 8px; - background-color: colors.$white; - vertical-align: top; - border: 1px solid #bdbdbd; - cursor: default; - .text { - border-radius: 15px; - padding: 2px 14px 2px 3px; - color: black; - transition: 0.3s ease; - .ui.circular.label { - background-color: #cecece; - color: #888888; - } - } - } - &.project-team { - margin-right: 8px; - background-color: colors.$white; - vertical-align: top; - height: 30px; - .text { - max-width: 170px; - min-width: 30px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - border-radius: 15px; - padding: 5px 15px; - color: colors.$black; - transition: 0.3s ease; - } - .menu { - z-index: 1; - .divider { - margin: 0; - } - .item { - max-width: 200px; - min-width: 170px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .header { - font-size: 14px; - margin: 0px; - padding: 15px; - cursor: pointer; - - &:hover { - background-color: colors.$grey3; - } - } - } - &:hover .text { - background-color: colors.$grey5 !important; - } - } - &.project-assignee { - background-color: #ffffff !important; - vertical-align: top; - /*height: 30px !important;*/ - .text { - display: flex; - max-width: 170px; - min-width: 30px; - border-radius: 15px; - padding: 3px 15px 3px 3px; - color: #000000; - transition: 0.3s ease; - height: 30px; - img { - max-height: 24px; - margin-top: 0; - margin-bottom: 0; - } - span { - position: relative; - top: 2px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - .menu { - z-index: 1; - .divider { - margin: 0; - } - .header { - font-size: 14px; - margin: 0px; - padding: 15px; - cursor: pointer; - a { - color: colors.$translatedBlue; - } - i { - float: right; - font-size: 18px; - color: colors.$translatedBlue; - } - &:hover { - background-color: colors.$grey3; - } - } - .scrolling { - .item { - display: flex; - align-items: center; - img { - margin-top: 0; - margin-bottom: 0; - } - } - } - } - .item .ui.cancel.label { - display: none; - } - &:hover .text { - background-color: #ffffff !important; - padding-right: 5px; - padding-right: 30px; - } - &.disabled { - background-color: #f4f4f4 !important; - box-shadow: 0px 0px 1px #666 !important; - opacity: 1; - &.text { - color: #666 !important; - } - } - } - - &.project-not-assigned { - border: 1px solid #868686; - padding: 0px 15px 0px 3px; - trans\ition: 0.3s ease; - color: rgba(0, 0, 0, 0.6); - margin-right: 5px; - vertical-align: top; - i { - transition: 0.3s ease; - } - &:hover { - border: 1px solid colors.$translatedBlue; - color: colors.$translatedBlue; - .icon-user22 { - color: colors.$translatedBlue; - } - } - .not-assigned { - line-height: 13px; - margin-right: 0px; - padding-left: 10px; - background-color: transparent; - } - .menu { - .header { - font-size: 14px; - margin: 0px; - padding: 15px; - cursor: pointer; - a { - color: colors.$translatedBlue; - } - i { - float: right; - font-size: 18px; - color: colors.$translatedBlue; - } - &:hover { - background-color: colors.$grey3; - } - } - } - .ui.cancel.label { - display: none; - } - } - &.project-assignee { - .ui.cancel.label { - padding: 4px; - background-color: #d6d6d6; - margin: 0px; - border-radius: 15px; - position: absolute; - bottom: 3px; - line-height: 0px; - right: 3px; - visibility: hidden; - i { - font-size: 15px; - color: #ffffff; - } - &:hover { - background-color: #cccccc !important; - } - } - - &:hover .ui.cancel.label { - visibility: visible; - z-index: 2; - } - } - } } .project-checkbox { @@ -396,7 +106,7 @@ div#manage-container { } .project-body { - background-color: colors.$grey4; + background-color: colors.$grey100; .jobs { margin-top: 0px; @@ -405,7 +115,7 @@ div#manage-container { padding: 0 15px; margin-bottom: 15px; .job-header { - background-color: #ffffff !important; + background-color: colors.$white !important; padding: 0 0 !important; .split-merge { @@ -413,7 +123,7 @@ div#manage-container { .merge { font-family: Calibri, Arial, Helvetica, sans-serif; padding: 5px 17px; - border: 1px solid #797979; + border: 1px solid colors.$grey600; font-size: 16px; transition: 0.3s ease !important; } @@ -421,16 +131,15 @@ div#manage-container { } .job-body { .chunks { + border-radius: variables.$border-radius-default; + overflow: hidden; .chunk { display: grid; - grid-template-columns: - auto - 70px - 150px 120px 106px auto auto 1fr auto auto auto; + grid-template-columns: 20px 100px 150px 120px 106px 100px auto 180px 65px 40px; align-items: center; gap: 6px; transition: 0.3s ease; - background-color: #ffffff; + background-color: colors.$white; padding: 8px 10px !important; @media only screen and (max-width: 1200px) { @@ -438,16 +147,18 @@ div#manage-container { } .job-id { - color: #969696; + color: colors.$grey400; font-size: 12px; position: relative; } .source-target { font-weight: bold; position: relative; + display: flex; + gap: 2px; .source-box { float: left; - max-width: 60px; + max-width: 120px; min-width: 60px; white-space: nowrap; overflow: hidden; @@ -457,7 +168,7 @@ div#manage-container { .in-to { float: left; top: 4px; - color: #5a5a5a; + color: colors.$grey700; line-height: 26px; position: relative; font-size: 12px; @@ -467,7 +178,7 @@ div#manage-container { } .target-box { float: left; - width: 60px; + max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -481,55 +192,6 @@ div#manage-container { margin: unset !important; min-width: unset !important; } - .tm-job, - .activity-icon-single { - width: 30px; - height: 30px; - } - .job-activity-icons { - display: flex; - justify-content: center; - min-width: 110px; - gap: 5px; - - button.group-activity-icon { - height: 30px; - width: 30px; - i { - width: 30px; - } - } - .comments { - } - .group-activity-icons { - .item { - margin: 0; - padding: 1px !important; - a { - padding: 0; - width: 100%; - border-radius: 0px; - font-size: 15px; - font-weight: normal; - font-family: Calibri, Arial, Helvetica, sans-serif; - text-align: left; - margin: 0 15px 0 10px; - background: transparent !important; - box-shadow: none !important; - i { - margin-right: 10px !important; - } - } - } - } - } - .tm-job.job-activity-icons { - a { - i { - vertical-align: inherit; - } - } - } .outsource-job { display: inline-block; .translated-outsourced { @@ -554,28 +216,12 @@ div#manage-container { } } .job-to-translator { - display: inline-block; - vertical-align: text-bottom; - color: #969696; - max-width: 150px; - transition: 0.3s ease; - min-width: 0px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - @media only screen and (max-width: 1199px) and (min-width: 992px) { - width: fit-content; - &:hover { - } - } + width: 100%; + text-align: center; a { text-decoration: underline; font-weight: 700; } - &.not-assigned { - width: fit-content; - } } &:hover .job-to-translator { } @@ -601,7 +247,7 @@ div#manage-container { font-weight: 700; } .outsource-gmt-text { - color: #969696; + color: colors.$grey400; display: inherit; margin-left: 5px; font-size: 13px; @@ -620,20 +266,6 @@ div#manage-container { &:hover .translator .job-delivery { display: none; } - .outsource-delivery-container { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .job-delivery-date { - margin-left: 5px; - color: colors.$grey7; - - > :nth-child(2) { - font-weight: bold; - color: black; - } - } .item { margin-left: 10px; display: none; @@ -642,19 +274,19 @@ div#manage-container { @media only screen and (max-width: 1200px) { margin-left: 5px; } - .ui.cancel { + .cancel-label { padding: 4px; - background-color: #d6d6d6; + background-color: colors.$grey200; margin-top: 3px; margin-bottom: 2px; position: relative; line-height: 0; right: 3px; font-size: 15px; - color: #ffffff; + color: colors.$white; } - &:hover .ui.cancel { - background-color: #cccccc !important; + &:hover .cancel-label { + background-color: colors.$grey200 !important; } } &:hover .item { @@ -680,15 +312,6 @@ div#manage-container { text-decoration: none; } } - .open-translate { - font-family: Calibri, Arial, Helvetica, sans-serif; - padding: 6px 15px; - vertical-align: top; - font-size: 16px; - //border: 1px solid #797979; - border-radius: 2px; - float: right; - } .open-vendor { font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 16px; @@ -696,10 +319,10 @@ div#manage-container { border-radius: 2px; font-weight: bold; box-shadow: none !important; - color: #7eaf3e !important; + color: colors.$green300 !important; &:hover { box-shadow: - 0 0 0 #e0e0e0, + 0 0 0 colors.$grey200, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24) !important; } @@ -726,7 +349,7 @@ div#manage-container { display: flex; justify-content: end; align-items: center; - background: #fff; + background: colors.$white; color: colors.$black; font-weight: normal; border: none; // border: 1px solid #979797; @@ -746,11 +369,11 @@ div#manage-container { span { text-decoration: none; - color: colors.$grey; + color: colors.$grey600; } } span { - color: #000; + color: colors.$black; margin-left: 4px; line-height: 1.6; } @@ -769,7 +392,7 @@ div#manage-container { float: right; &:hover { box-shadow: - 0 0 0 #e0e0e0, + 0 0 0 colors.$grey200, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24) !important; } @@ -781,16 +404,14 @@ div#manage-container { } } .job-menu { - width: 28px !important; - height: 28px !important; &:hover { - background-color: rgba(colors.$grey8, 0.5) !important; + background-color: rgba(colors.$grey200, 0.5) !important; } } .chunk-download-progress { height: 2px; - background-color: #ffffff; + background-color: colors.$white; position: absolute; bottom: 0px; width: 100%; @@ -803,31 +424,36 @@ div#manage-container { left: 0; right: 0; bottom: 0; - background: #000000; + background: colors.$black; border-radius: 0.28571429rem; -webkit-animation: progress-active 1s ease infinite; animation: progress-active 1s ease infinite; } } &.updated-job { - background-color: #f9ffb5; + background-color: colors.$orange50; } } } } } } + .chunk-container { + border-radius: variables.$border-radius-default; + } .project-footer { padding: 0 30px 5px !important; text-align: right; - background-color: colors.$grey4; + background-color: colors.$grey100; + border-radius: 0 0 variables.$border-radius-default + variables.$border-radius-default; .activity-log { margin-top: -10px; margin-right: -15px; a { text-decoration: underline; - color: colors.$grey1; + color: colors.$grey500; font-size: 13px; &:hover { text-decoration: none; @@ -837,7 +463,7 @@ div#manage-container { .project-due-date { margin-top: -10px; margin-left: -15px; - color: colors.$grey1; + color: colors.$grey500; font-size: 13px; } } @@ -872,24 +498,10 @@ div#manage-container { } .message-create { - text-align: center; - display: block; + display: flex; font-size: 25px; - margin-top: 0px; - line-height: 40px; - p { - padding: 20px; - a { - text-align: center; - font-family: Calibri, Arial, Helvetica, sans-serif; - padding: 16px 25px; - vertical-align: top; - font-size: 20px; - border: 1px solid #797979; - border-radius: 2px; - margin: 10px; - } - } + justify-content: center; + gap: 15px; } } @@ -899,57 +511,7 @@ div#manage-container { /* fix di daniele */ -.ui.pointing.dropdown > .menu:after { - box-shadow: -1px -1px 0px 0px rgb(222, 222, 223); -} - -@media only screen and (min-width: 1200px) { - .ui.container { - width: 1140px !important; - margin-left: auto !important; - margin-right: auto !important; - transition: 0.3s ease; - } - .outsource-delivery-container { - max-width: 210px; - } -} - -@media only screen and (min-width: 1500px) { - .ui.container { - width: 1280px !important; - margin-left: auto !important; - margin-right: auto !important; - transition: 0.3s ease; - } - - .outsource-delivery-container { - max-width: unset; - } -} - -@media only screen and (max-width: 1360px) and (min-width: 992px) { - .ui.container { - width: 991px !important; - margin-left: auto !important; - margin-right: auto !important; - transition: 0.3s ease; - .outsource-container { - width: 105%; - } - .outsource-job { - min-width: 20% !important; - } - } -} - @media only screen and (max-width: 991px) and (min-width: 768px) { - .ui.container { - min-width: 991px !important; - margin-left: auto !important; - margin-right: auto !important; - transition: 0.3s ease; - } .project-list { padding-top: 50px; } @@ -959,12 +521,6 @@ div#manage-container { } @media only screen and (max-width: 767px) { - .ui.container { - margin-left: 1em !important; - margin-right: 1em !important; - min-width: 961px; - transition: 0.3s ease; - } .project-list { padding-top: 50px; } @@ -978,101 +534,142 @@ div#manage-container { gap: 10px; .status-filter { display: inline-block; - background: #d8d8d8; + background: colors.$grey200; padding: 4px 5px 4px; border-radius: 2px; - color: #5d5d5d; + color: colors.$grey700; font-weight: 100; font-size: 12px; } - .ui.button.red { - padding: 6px 15px; - font-size: 12px; - } -} - -.ui.dropdown .scrolling.menu { - border-top: none; } -.project-team-dropdown, -.user-project-dropdown { - line-height: 1; - border-radius: 15px !important; - box-shadow: - 0 0 0 #e0e0e0, - 0 0 2px rgba(0, 0, 0, 0.12), - 0 2px 4px rgba(0, 0, 0, 0.24) !important; +.project-activity-icon button.project-team-dropdown { + font-size: 14px; + color: colors.$black; + padding: 5px 15px; + background-color: colors.$white; } -.project-menu-dropdown { - border-radius: 50% !important; - width: 28px !important; - height: 28px !important; - background-color: rgba(colors.$grey8, 0.5) !important; +.project-title-editing-name-mode { + > .label { + padding-top: 1px !important; + padding-right: 1px !important; + } - &:hover { - background-color: rgba(colors.$grey8, 1) !important; + .project-checkbox { + margin-top: 6px; } } -.project-activity-icon button.project-team-dropdown { - height: 30px; - font-size: 14px; - color: #000; - padding: 5px 15px; - background-color: #fff; +ul { + padding: 0; } -.user-project-dropdown-container button.user-project-dropdown { - height: 30px !important; - color: #000 !important; - font-size: 14px; +.project-container-checkbox-hidden { + opacity: 0; } -.project-container-button-edit-name { - width: 30px !important; - height: 30px !important; - line-height: 30px !important; -} +.projects-container { + .projects-container-title { + display: flex; + justify-content: space-between; + margin: 40px 0 16px; -.project-container-form-edit-name { - display: inline-block; + > :last-child { + display: flex; + gap: 16px; + color: colors.$grey700; - fieldset { - border: unset; - margin: 0; - padding: 0; - } + > span { + display: flex; + gap: 4px; + align-items: center; + } + } - input[type='text'] { - height: 28px; - min-width: 250px; - max-width: 400px; + .projects-container-legend-unconfirmed-quad, + .projects-container-legend-translated-quad, + .projects-container-legend-approved-quad, + .projects-container-legend-approved2-quad { + width: 12px; + height: 12px; + border-radius: 4px; + } - &:active, - &:focus { - box-shadow: unset; - border: 1px solid colors.$grey1; + .projects-container-legend-unconfirmed-quad { + background-color: colors.$black100; + border: 1px solid colors.$grey200; + } + .projects-container-legend-translated-quad { + background-color: colors.$blue500; + } + .projects-container-legend-approved-quad { + background-color: colors.$green800; + } + .projects-container-legend-approved2-quad { + background-color: colors.$purple500; } } -} -.project-title-editing-name-mode { - > .label { - padding-top: 1px !important; - padding-right: 1px !important; + &.projects-container--loading { + opacity: 0.5; } - .project-checkbox { - margin-top: 6px; + .spinner-loader-more-projects { + position: relative; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.1s; + height: 120px; + + > h5 { + font-weight: normal; + } + + .spinner-loader-more-projects__loader-component { + position: absolute; + + > span { + white-space: nowrap; + } + } + } + + .spinner-loader-more-projects--visible { + opacity: 1; } } -ul { - padding: 0; +.projects-list { + display: flex; + flex-direction: column; + gap: 16px; } -.project-container-checkbox-hidden { - opacity: 0; +.filter-projects-container { + display: flex; + width: 60%; + max-width: 540px; + margin-left: auto; + margin-right: auto; + + > :first-child { + flex-grow: 1; + + > :first-child { + border-right: 1px solid colors.$grey150; + } + + input { + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + + &:active, + &:focus { + box-shadow: inset 0 0 0 1px colors.$blue600; + } + } + } } diff --git a/public/css/sass/commons/_nav-bar.scss b/public/css/sass/commons/_nav-bar.scss index 105633b5e6..e5d38a6bd0 100644 --- a/public/css/sass/commons/_nav-bar.scss +++ b/public/css/sass/commons/_nav-bar.scss @@ -1,11 +1,12 @@ -@use "../commons/colors"; +@use '../tokens/colors'; + header { font-family: 'Calibri', 'Helvetica Neue', Arial, Helvetica, sans-serif; position: relative; width: 100%; z-index: 6; margin: 0; - background: #002b5c; + background: colors.$blue900; height: 60px; @media only screen and (max-width: 992px) { min-width: 992px; @@ -15,372 +16,225 @@ header { .nav-bar { margin: 0px !important; height: 100%; + } - .navigation { - padding: 10px !important; - /*padding: 5px 15px 5px 0px !important; + .nav-bar .navigation { + padding: 10px !important; + /*padding: 5px 15px 5px 0px !important; background-color: #4d4d4d; height: 48px !important;*/ - .ui.grid { - margin-right: 0; - } - } - - .ui.selection.dropdown, - .ui.select-org.dropdown { - font-family: 'Calibri', 'Helvetica Neue', Arial, Helvetica, sans-serif; - font-weight: 600; - - &.org { - float: right; - } - - i { - float: right; - } - - .menu { - .header { - font-size: 14px; - display: grid; - grid-template-columns: 1fr 40px; - grid-template-rows: 28px; - align-items: center; - margin: 0; - padding: 8px 16px; - cursor: pointer; - color: colors.$translatedBlue; - - &:hover { - background-color: #f3f3f3; - } - - i { - float: right; - font-size: 24px; - margin-top: -3px; - margin-right: -3px; - color: colors.$translatedBlue; - } - } - - .item > a > i { - position: absolute; - width: 24px; - height: 24px; - line-height: 24px; - border-radius: 50%; - top: 16%; - right: 10px; - bottom: 20%; - background-color: transparent; - color: colors.$translatedBlue; - font-size: 18px; - padding-left: 1px; - - &:hover { - background-color: #dededc; - transition: 0.3s ease; - } - } - - .item:first-child { - a > i { - display: none; - } - } - - .divider { - margin: 0; - } - } - - .scrolling { - .item.item.item { - padding: 8px !important; - width: 230px; - min-width: 150px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - /*&:hover .team-filter, - &.active.selected .team-filter{ - background: #fff; - border-radius: 50px; - }*/ - } - - .team-filter { - visibility: visible; - } - } - } + } - .ui.selection.visible.dropdown > .text:not(.default), - .ui.select-org.visible.dropdown > .text:not(.default) { - /*font-weight: 600;*/ - //color: white; - } - div.ui-user-top-image { - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - /*background: center/cover #9c9c9c;*/ - border-radius: 50%; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); - -moz-box-sizing: border-box; - box-sizing: border-box; - color: colors.$translatedBlue; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - position: relative; - vertical-align: top; - float: right; - font-size: 14px; - height: 36px; - width: 36px; - min-width: 35px; - margin-left: 10px; - margin-right: 10px; - text-decoration: none; - transition: 0.3s ease; - cursor: pointer; - background-color: transparent; - border: 2px solid colors.$translatedBlue; - /*opacity: 0.8; + .nav-bar div.ui-user-top-image { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + /*background: center/cover #9c9c9c;*/ + border-radius: 50%; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); + -moz-box-sizing: border-box; + box-sizing: border-box; + color: colors.$blue500; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + position: relative; + vertical-align: top; + float: right; + font-size: 14px; + height: 36px; + width: 36px; + min-width: 35px; + margin-left: 10px; + margin-right: 10px; + text-decoration: none; + transition: 0.3s ease; + cursor: pointer; + background-color: transparent; + border: 2px solid colors.$blue500; + /*opacity: 0.8; &:hover { opacity: 1; }*/ - } - - .ui.user-nolog.label { - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - background: center/cover transparent; - /*border-radius: 50%;*/ - -moz-box-sizing: border-box; - box-sizing: border-box; - /*color: #fff;*/ - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - position: relative; - vertical-align: top; - float: right; - /*font-size: 14px;*/ - /*height: 36px; - width: 36px;*/ - /*margin-left: 10px; - margin-right: 10px;*/ - text-decoration: none; - cursor: pointer; - /*border: 1px dashed;*/ - top: 2px; - padding: 0; - width: 40px; - /*&:hover { - border: 1px dashed $translatedBlue !important; - i { - color: $translatedBlue; - } - }*/ - } + } - .dropdown.select-org { - background-color: #ffffff; - border-radius: 30px; - min-width: 105px; - color: #000000; - font-size: 14px; - padding: 3px 15px; - float: left; - margin-left: 10px; - display: grid; - grid-template-columns: auto 13px; - column-gap: 6px; - align-items: center; - grid-template-rows: 28px; - - /*opacity:0.8; + .nav-bar .dropdown.select-org { + background-color: colors.$white; + border-radius: 30px; + min-width: 105px; + color: colors.$black; + font-size: 14px; + padding: 3px 15px; + float: left; + margin-left: 10px; + display: grid; + grid-template-columns: auto 13px; + column-gap: 6px; + align-items: center; + grid-template-rows: 28px; + + /*opacity:0.8; &:hover, &.active { opacity:1; }*/ + } + + .nav-bar .dropdown.select-org .item { + display: grid; + grid-template-columns: auto; + align-items: center; + grid-template-rows: 28px; + } + + .nav-bar .dropdown.select-org .item .item-info { + display: grid; + grid-template-columns: 1fr 40px; + align-items: center; + grid-template-rows: 32px; + padding: 0 0 0 8px; + } + + .nav-bar .dropdown.select-org .item .item-info .icon { + margin: 0 !important; + padding: 0px 8px; + } - .item { - display: grid; - grid-template-columns: auto; - align-items: center; - grid-template-rows: 28px; - - .item-info { - display: grid; - grid-template-columns: 1fr 40px; - align-items: center; - grid-template-rows: 32px; - padding: 0 0 0 8px; - - .icon { - margin: 0 !important; - padding: 0px 8px; - - a { - display: grid; - padding: 0 4px; - height: 24px; - justify-content: center; - align-items: center; - visibility: hidden; - - &:hover { - background: rgba(0, 0, 0, 0.03); - border-radius: 50px; - } - - svg { - path { - fill: #0099cc; - } - } - } - } - } - - &:hover .icon a { - visibility: visible; - } - - &.selected { - .item-info { - color: #fff; - border-radius: 2px; - background: #002b5c; - - a { - svg { - path { - fill: #fff; - } - } - - &:hover { - svg { - path { - fill: colors.$translatedBlue; - } - } - } - } - } - } - } - - i.dropdown.icon { - top: 12px; - margin-left: 5px !important; - } - - span.text { - text-align: left; - /*line-height: 32px;*/ - text-decoration: none; - min-width: 0; - /*max-width: 74px;*/ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-weight: 100; - } - - div.icon { - padding: 6px 0 0 0; - } - - &:hover span.text { - text-decoration: none; - transition: 0.3s ease; - } - - &.only-one-team .scrolling.menu { - display: none; - } - - &.disable-dropdown-team { - pointer-events: none; - cursor: default; - - .text { - text-decoration: none; - } - } + .nav-bar .dropdown.select-org .item .item-info .icon a { + display: grid; + padding: 0 4px; + height: 24px; + justify-content: center; + align-items: center; + visibility: hidden; + + &:hover { + background: rgba(0, 0, 0, 0.03); + border-radius: 50px; } } -} -#profile-menu { - .menu { - width: 200px; - margin: 0 0 0 -1px; - padding: 12px 8px !important; - top: 45px !important; + .nav-bar .dropdown.select-org .item .item-info .icon a svg path { + fill: colors.$blue500; + } + + .nav-bar .dropdown.select-org .item:hover .icon a { + visibility: visible; + } + + .nav-bar .dropdown.select-org .item.selected .item-info { + color: colors.$white; border-radius: 2px; - border: solid 1px #cdd4de; - right: 8px !important; - &::after { - content: ''; - width: 0; - height: 0; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid #ffffff; - bottom: 100%; - left: auto; - right: 12%; - transform: translate(90%, 0) !important; - position: absolute; - pointer-events: none; - } - .item { - border-radius: 2px; - padding: 8px !important; - font-size: 16px !important; - - &:hover { - background-color: #f2f5f7 !important; - color: #0055b8 !important; - } - &.selected { - background-color: transparent !important; - font-weight: normal !important; - } - } + background: colors.$blue900; } - .user-nolog { - background-color: transparent; + + .nav-bar .dropdown.select-org .item.selected .item-info a svg path { + fill: colors.$white; } - .ui-user-top-image { - float: right; - margin: 0; - cursor: pointer; - min-width: 35px; - @media only screen and (max-width: 1040px) { - margin: 0 -7px; - } + + .nav-bar .dropdown.select-org .item.selected .item-info a:hover svg path { + fill: colors.$blue500; + } + + .nav-bar .dropdown.select-org i.dropdown.icon { + top: 12px; + margin-left: 5px !important; + } + + .nav-bar .dropdown.select-org span.text { + text-align: left; + /*line-height: 32px;*/ + text-decoration: none; + min-width: 0; + /*max-width: 74px;*/ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-weight: 100; + } + + .nav-bar .dropdown.select-org div.icon { + padding: 6px 0 0 0; + } + + .nav-bar .dropdown.select-org:hover span.text { + text-decoration: none; + transition: 0.3s ease; + } + + .nav-bar .dropdown.select-org.only-one-team .scrolling.menu { + display: none; + } + + .nav-bar .dropdown.select-org.disable-dropdown-team { + pointer-events: none; + cursor: default; + } + + .nav-bar .dropdown.select-org.disable-dropdown-team .text { + text-decoration: none; + } +} + +#profile-menu .menu { + width: 200px; + margin: 0 0 0 -1px; + padding: 12px 8px !important; + top: 45px !important; + border-radius: 2px; + border: solid 1px colors.$grey150; + right: 8px !important; + + &::after { + content: ''; + width: 0; + height: 0; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid colors.$white; + bottom: 100%; + left: auto; + right: 12%; + transform: translate(90%, 0) !important; + position: absolute; + pointer-events: none; + } +} + +#profile-menu .menu .item { + border-radius: 2px; + padding: 8px !important; + font-size: 16px !important; + + &:hover { + background-color: colors.$grey50 !important; + color: colors.$blue400 !important; + } + + &.selected { + background-color: transparent !important; + font-weight: normal !important; + } +} + +#profile-menu .user-nolog { + background-color: transparent; +} + +#profile-menu .ui-user-top-image { + float: right; + margin: 0; + cursor: pointer; + min-width: 35px; + + @media only screen and (max-width: 1040px) { + margin: 0 -7px; } } @@ -389,11 +243,10 @@ header { display: grid !important; grid-template-columns: auto auto auto auto; justify-content: right; - align-items: center; padding-right: 24px; .organization-name { - color: #fff; + color: colors.$white; font-size: 15px; font-family: 'Calibri', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: 600; @@ -410,27 +263,23 @@ header { .separator { width: 1px; height: 30px; - background: white; + background: colors.$white; float: right; margin-right: 14px; margin-left: 14px; } - .popover-component-container { + div[class*="popover-component-container"] { margin-left: 15px; } } .logo { - position: relative; - float: left; border: 0; //margin-top: 5px; background: url(/public/img/logo_matecat_big_white.svg) 0px 0px no-repeat; width: 190px; height: 40px; - left: 20px; - top: 1px; } #menu-site { @@ -438,56 +287,59 @@ header { display: flex; align-items: center; text-align: right; - .btn { - background: #fff; - color: #002b5c; - font-size: 16px; - width: 140px; - text-align: center; - max-height: 40px; - border-radius: 5px; - line-height: 1.25; - margin-left: 24px; - border: none; - } +} + +#menu-site .btn { + background: colors.$white; + color: colors.$blue900; + font-size: 16px; + width: 140px; + text-align: center; + max-height: 40px; + border-radius: 5px; + line-height: 1.25; + margin-left: 24px; + border: none; } .menu-site-right { float: right !important; } -.upload-page-header { - .dropdown span { - margin-right: 0 !important; - } +.upload-page-header .dropdown span { + margin-right: 0 !important; } .cta-create-team { position: fixed !important; - .ui.primary.button { - border: 1px solid #797979; - float: right; - border-radius: 2px; - font-family: 'Calibri', 'Helvetica Neue', Arial, Helvetica, sans-serif; - } - .content { - p { - font-size: 15px; - } - a { - float: right; - text-decoration: underline; - color: #39699a; - cursor: pointer; - &:hover { - text-decoration: none; - } - } - } } -.ui.dropdown > .left.menu .menu { - margin: 0 !important; +.cta-create-team .content p { + font-size: 15px; +} + +.cta-create-team .content a { + float: right; + text-decoration: underline; + color: colors.$blue400; + cursor: pointer; + + &:hover { + text-decoration: none; + } } +.header-container { + display: flex; + height: 100%; + align-items: center; + padding: 0 40px 0 15px; +} +.header-container .header-elements { + display: flex; + align-items: center; + flex-grow: 1; + justify-content: end; + gap: 16px; +} diff --git a/public/css/sass/commons/_outsource.scss b/public/css/sass/commons/_outsource.scss index a21a1fd434..b09bdbf045 100644 --- a/public/css/sass/commons/_outsource.scss +++ b/public/css/sass/commons/_outsource.scss @@ -1,60 +1,21 @@ -@use '../commons/colors'; +@use '../tokens/colors'; +@use '../commons/variables'; + .after-open-outsource { - border-left: 2px solid colors.$translatedBlue; + border-left: 2px solid colors.$blue500; padding-left: 13px !important; } -.outsource-container { - padding: 0px !important; - margin-top: 30px !important; - margin-bottom: 30px !important; - width: 107%; - margin-left: -3% !important; - //margin-right: -2% !important; - //box-shadow: 0 1px 20px rgba(0, 0, 0, 0.67); - //overflow: hidden; - .outsource-header { - display: flex !important; - background-color: white; - gap: 20px; - align-items: center; - padding: 5px 35px 5px 40px !important; - z-index: 1; - .job-id { - color: #969696; - } - .source-target { - display: flex; - font-weight: bold; - .source-box, - .target-box { - width: unset !important; - max-width: unset !important; - font-size: 18px; - } +.outsource-container { + display: flex; + padding: 8px 24px 24px 24px; + flex-direction: column; + align-items: flex-end; + gap: 8px; + align-self: stretch; + border-bottom: 1px solid colors.$grey100; + background: colors.$grey50; - .in-to { - margin: 2px 0 0 6px; - } - } - .job-payable { - display: inline-block; - padding: 0 0 0 10px !important; - line-height: 30px; - position: relative; - text-decoration: none !important; - font-weight: 700; - font-size: 16px; - } - .project-subject { - display: inline-block; - line-height: 30px; - position: relative; - top: 2px; - font-size: 16px; - float: right; - } - } &.transitionOutsource-enter { height: 0; overflow: hidden; @@ -89,27 +50,31 @@ text-decoration: underline; font-weight: 700; cursor: pointer; + &:hover { text-decoration: none; } } .select { - padding: 9px 46px 9px 12px; - border-radius: 2px; + padding: 5px 46px 9px 12px; + border-radius: variables.$border-radius-default; color: colors.$black; + background: colors.$black100 } .dropdown__list { padding: 0; + li.dropdown__option { height: 40px; } } .select-with-icon__wrapper { - height: 38px; + height: 32px; } + .select__dropdown-wrapper { width: 190%; } @@ -127,53 +92,34 @@ float: right; clear: both; position: relative; - width: 160px; - .gmt-select { - /*min-width: 107px !important; - width: auto; - background: transparent; - padding: 12px 8px 10px; - font-size: 14px !important; - .dropdown.icon { - padding: 10px 3px 0 0; - } - .text { - .gmt-description { - display: none; - } - } - .menu { - min-width: 330px; - height: 205px; - .item { - border-top: 1px solid #fafafa; - padding: 15px 5px 15px 10px !important; - white-space: normal; - word-wrap: normal; - .gmt-value { - display: inline-block; - margin-right: 5px; - } - .gmt-description { - display: inline-block; - } - } - }*/ - } + width: 250px; + } + .order-badge-container { + display: flex; + gap: 4px; + align-items: center; + } + .compact-view-header { + font-weight: 700; + font-size: 20px; + line-height: 28px; + margin-bottom: 8px ; } - .delivery-order, .container-reduced { .confirm-delivery-input { margin-top: 31px; + .back, .email-confirm, .input { display: inline-block; } + .back { float: left; margin-top: 12px; + a { i { position: relative; @@ -181,118 +127,143 @@ } } } + .email-confirm { padding-right: 15px; } + input { min-width: 235px; } } } + .confirm-delivery-box { - background: #daeddf; - padding: 9px 15px 3px; - text-align: right; + background: #d1e0d1; + padding: 8px; line-height: 20px; + border-radius: 8px; + margin-top: 8px; + .confirm-title { font-size: 18px; font-weight: 700; } + p { line-height: 16px; } } - .assign-job-translator { - background-color: #d7d8dc; - padding: 10px 15px 35px; - width: 100%; + background-color: colors.$white; + display: flex; + padding: 16px; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + gap: 8px; + align-self: stretch; + border-radius: 16px; + border: 1px solid colors.$grey100; .title { - display: inline-block; - padding: 15px 15px 15px 25px; - font-size: 20px; + font-size: 16px; font-weight: 700; - width: 25%; - vertical-align: top; - position: relative; - top: 24px; + line-height: 24px; } + .title-url { padding: 10px 0; - width: 75%; - display: inline-block; + width: 100%; .job-url { display: inline-block; + a { font-size: 16px; } } + .translator-assignee { width: 100%; - .ui.form { + + .assign-translator-form { /*width: 100%;*/ .fields { margin: 0; + display: flex; + align-items: flex-end; + gap: 16px; + align-self: stretch; .field { font-size: 14px; + flex-direction: column; + display: flex; + position: relative; + gap: 8px; + width: 160px; + &.translator-email { + display: flex; + flex-direction: column; + align-items: flex-start; + flex: 1 0 0; + } + &.translator-delivery h2{ + line-height: normal; + } + .select-with-label__wrapper { + gap: 8px; + label { + margin-bottom: 0; + } + } label { - padding-left: 15px; font-size: 14px; - font-weight: bold; + line-height: 20px; + font-weight: 400; } + input[type='text'], input[type='email'], span.select { - box-shadow: inset 0 1px 3px #ddd; - border: 1px solid #ccc; + box-shadow: inset 0 1px 3px colors.$grey200; + border: 1px solid colors.$grey200; font-family: Calibri, Arial, Helvetica, sans-serif; + border-radius: variables.$border-radius-default; + height: 32px; + background-color: colors.$black100; + padding: 6px 12px; &:focus { - border-color: #85b7d9; + border-color: colors.$blue300; } + &:active { - border-color: #85b7d9; + border-color: colors.$blue300; } } + &.send-job-box { - padding: 0 15px 0 10px; - padding-top: 22px; - width: 28%; - .send-job { - font-family: Calibri, Arial, Helvetica, sans-serif; - font-size: 16px; - border-radius: 2px; - padding: 10px 17px; - margin: 0; - float: right; - width: 97%; - min-width: 199px; - top: 1px; - position: relative; - } - } - &.translator-email { - width: 31%; - } - &.translator-delivery { - width: 21%; + align-content: flex-end; + align-self: flex-end; } + &.translator-time { width: 202px; + .selection.dropdown { width: 100%; min-width: 91px !important; - border: 1px solid #ccc; - box-shadow: inset 0 1px 3px #ddd; + border: 1px solid colors.$grey200; + box-shadow: inset 0 1px 3px colors.$grey200; font-size: 14px; + .menu { height: 205px; } } } + &.gmt { position: relative; width: 160px; - margin-right: 29px; } } } @@ -300,11 +271,13 @@ } } } + .open-job-box { - background-color: colors.$grey2; + background-color: colors.$grey300; padding: 35px 30px 25px 40px; width: 100%; cursor: auto; + .title { display: inline-block; font-size: 26px; @@ -313,9 +286,11 @@ position: relative; top: -4px; } + .title-url { width: 88%; display: inline-block; + .job-url { display: inline-block; max-width: 80%; @@ -324,15 +299,16 @@ overflow: hidden; text-overflow: ellipsis; font-size: 15px; + a { font-size: 16px; } } + .button { font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 16px; //border: 1px solid #797979; - border-radius: 2px; padding: 9px 15px; margin: 0; float: right; @@ -348,6 +324,7 @@ z-index: 1; padding-left: 35px !important; height: 0; + .or { width: 25px; height: 25px; @@ -355,970 +332,617 @@ text-align: center; line-height: 25px; border-radius: 50%; - color: #ffffff; + color: colors.$white; position: absolute; top: -14px; left: 90px; } } - .background-outsource-vendor { - background: colors.$grey3; - width: 100%; - padding-bottom: 15px; - padding-top: 15px; - cursor: auto; - .outsource-not-available { - font-size: 20px; + .outsource-not-available { + font-size: 20px; + } + + .translated-loader { + position: absolute; + top: 50%; + left: 50%; + margin: 0; + text-align: center; + -webkit-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + display: flex; + flex-direction: column; + align-items: center; + img { + width: 40px; } - .translated-loader { - position: absolute; - top: 50%; - left: 50%; - margin: 0; - text-align: center; - -webkit-transform: translateX(-50%) translateY(-50%); - transform: translateX(-50%) translateY(-50%); - img { + + .text-loader-outsource { + font-size: 28px; + margin-top: 10px; + font-weight: 700; + } + } + + .payment-service { + display: flex; + height: 32px; + align-items: center; + gap: 8px; + align-self: stretch; + justify-content: space-between; + + .fiducial-logo, svg { + color: colors.$grey400; + } + + .service-box { + display: flex; + } + + .project-management { + font-weight: 700; + } + + .fiducial-logo { + display: flex; + align-items: center; + gap: 4px; + } + } + + .payment-details-box { + background-color: colors.$white; + display: flex; + padding: 16px; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + border: 1px solid colors.$grey100; + font: variables.$font-style-small; + border-radius: variables.$border-radius-big; + min-height: 150px; + position: relative; + .translator-job-details__title { + font-weight: 700; + margin-bottom: 8px; + } + + .translator-job-details { + display: flex; + flex-direction: row; + padding-bottom: 16px; + align-items: center; + align-self: stretch; + justify-content: space-between; + border-bottom: 1px solid colors.$grey100; + + .translator-details { + display: flex; + flex-direction: row; + gap: 12px; + width: 60%; + align-items: center; + border-right: 1px solid colors.$grey100; + + } + + .translator-avatar { + display: flex; width: 40px; + height: 40px; + padding: 8px; + justify-content: center; + align-items: center; + gap: 8px; + flex-shrink: 0; + border-radius: 1248.75px; + background: colors.$grey100; + color: colors.$grey800; + font-size: 15px; + } + + .translator-info { + display: flex; + flex-direction: column; + } + + .translator-words { + color: colors.$blue500; + } + + .translator-words, .translator-feedback { + font: variables.$font-size-xsmall; + } + + + .source-target-outsource { + display: flex; + align-items: center; + font: variables.$font-style-base; + font-weight: 700; + } + + + .job-payment { + text-align: right; + color: colors.$grey400; + font: variables.$font-style-base; } - .text-loader-outsource { - font-size: 28px; - margin-top: 10px; + + .job-price { + font-size: 20px; font-weight: 700; + line-height: 28px; } } - .outsource-to-vendor { - .payment-service { - padding: 5px 10px 15px; - .service-box { - display: inline-block; - padding: 0 10px 0 15px; - font-size: 26px; + + .revision-box { + display: flex; + padding: 8px 0; + justify-content: flex-end; + align-items: center; + align-self: stretch; + border-bottom: 1px solid colors.$grey100; + gap: 200px; + + .add-revision { + .revision-checkbox { + display: flex; + gap: 8px; + align-items: center; + } + + input { + width: 16px; + height: 16px; + padding: 3px; + justify-content: center; + align-items: center; + gap: 8px; + } + } + + .job-price { + font: variables.$font-style-base; + font-weight: 700; + } + } + + .delivery-order { + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; + padding: 16px; + + .delivery-box { + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + gap: 4px; + + span.select { + box-shadow: inset 0 1px 3px colors.$grey200; + border: 1px solid colors.$grey200; + font-family: Calibri, Arial, Helvetica, sans-serif; + } + + .react-datepicker__input-container input { + height: 38px; + } + + label { + font: variables.$font-style-xsmall; + color: colors.$grey400; + } + + .delivery-date { + font-size: 20px; + font-style: normal; font-weight: 700; - .service { - display: inline-block; - &.project-management { - } - &.translation, - &.revision { - margin-left: 8px; - } - } + line-height: 28px; } - .fiducial-logo { - display: inline-block; - padding: 0; - vertical-align: text-bottom; - .translated-logo { - display: inline-block; - .logo-t { - width: 100px; - position: relative; - top: 6px; - padding: 0; - margin: 0 0 0 5px; - } + + .delivery-options { + display: flex; + align-items: center; + gap: 16px; + align-self: stretch; + } + + .faster { + color: colors.$blue500; + text-decoration: underline; + + &:hover { + text-decoration: none; } } - } - .payment-details-box { - background-color: #ffffff; - padding: 15px; - position: relative; - min-height: 232px; - .translator-job-details { - padding-bottom: 10px; - .translator-details-box { - width: 38%; - border-right: 1px solid black; - display: inline-block; - vertical-align: middle; - padding: 0 0 0 10px; - .left, - .right { - display: inline-block; - margin: 0; - } - .left { - width: 42%; - .star { - position: relative; - left: -2px; - .icon { - &.active { - background: transparent !important; - color: #7eaf3e !important; - text-shadow: none !important; - } - } - } - } - .right { - float: right; - width: 58%; - text-align: right; - padding-right: 15px; - } - .translator-no-found { - p { - } - } + + .need-it-faster { + font-size: 16px; + cursor: pointer; + } + + .need-it-faster-message { + font-size: 15px; + font-weight: normal; + width: 600px; + margin-top: 9px; + } + + .errors-date { + font-weight: 100; + font-size: 14px; + display: flex; + margin-right: 6px; + text-align: right; + gap: 4px; + + &.past-date { + color: colors.$red500; } - .job-details-box { - display: inline-block; - width: 44% !important; - vertical-align: middle; - padding: 0 0 0 15px; - position: relative; - .source-target-outsource { - display: inline-block; - width: 68%; - font-size: 18px; - .source-box { - display: inline-block; - } - .in-to { - display: inline-block; - font-size: 16px; - i { - position: relative; - top: 1px; - margin: 0; - font-weight: 100; - font-size: 13px; - color: #545353; - } - } - .target-box { - display: inline-block; - } - @media only screen and (max-width: 1199px) and (min-width: 992px) { - font-size: 16px; - .in-to { - font-size: 13px; - } - } - } - .job-payment { + + &.too-far-date { + color: colors.$orange600; + + .tip { display: inline-block; - width: 32%; - text-align: right; - padding-right: 28px; - .not-payable { - text-decoration: line-through; + width: 5px; + margin-right: 20px; + + i { + position: relative; + color: colors.$grey400; font-size: 16px; - position: absolute; - top: -17px; - width: 30%; - padding-right: 28px; - } - .payable { - font-size: 18px; + top: 2px; } } } - .job-price { - display: inline-block; - vertical-align: middle; - width: 18%; - font-size: 20px; - text-align: center; + + &.generic-error { + color: red; } } - .revision-box { - padding: 4px 0px; - background-color: colors.$grey2; - margin-bottom: 10px; - height: 28px; - .add-revision { - display: inline-block; - width: 82%; - text-align: right; - padding-right: 28px; - .checkbox { - } - } - .job-price { - display: inline-block; - font-size: 20px; - text-align: center; - width: 18%; - } + } + } + + .need-it-faster-box { + input { + height: 40px; + border-radius: variables.$border-radius-default; + padding: 9px 46px 9px 12px; + } + + .fields { + display: flex; + align-items: center; + gap: 8px; + + .field-buttons { + display: flex; + gap: 8px; + margin-top: 25px; } - .delivery-order { - width: 82%; - text-align: right; - display: inline-block; - vertical-align: top; - margin-top: 15px; - padding-right: 25px; - .delivery-box { - text-align: right; - display: inline-block; - font-size: 23px; - span.select { - box-shadow: inset 0 1px 3px #ddd; - border: 1px solid #ccc; - font-family: Calibri, Arial, Helvetica, sans-serif; - } - .react-datepicker__input-container input { - height: 38px; - } - label { - font-size: 16px; - display: inline-block; - vertical-align: middle; - font-weight: 100; - padding: 5px; - } - .atdd { - display: inline-block; - font-weight: 100; - } - .delivery-date { - display: inline-block; - padding: 5px; - } - .delivery-time { - display: inline-block; - padding: 5px 15px 5px 5px; - } - .need-it-faster { - font-size: 16px; - margin-top: 15px; - padding-right: 5px; - } - .need-it-faster-message { - font-size: 15px; - font-weight: normal; - width: 600px; - margin-top: 9px; + .field { + display: flex; + flex-direction: column; + + label { + font-weight: unset; + font-size: unset; + margin-bottom: 4px; + } + + input[type='text'], + input[type='email'] { + border: 1px solid colors.$grey200; + font-family: Calibri, Arial, Helvetica, sans-serif; + + &:focus { + border-color: colors.$blue300; } - .errors-date { - font-weight: 100; - font-size: 14px; - display: inline-block; - margin-right: 6px; - text-align: right; - &.past-date { - color: red; - } - &.too-far-date { - color: #ffa038; - .tip { - display: inline-block; - width: 5px; - margin-right: 20px; - i { - position: relative; - color: #a7a7a7; - font-size: 16px; - top: 2px; - } - } - } - &.generic-error { - color: red; - } + + &:active { + border-color: colors.$blue300; } } - @media only screen and (max-width: 1199px) and (min-width: 992px) { - width: 79%; - } - @media only screen and (max-width: 991px) and (min-width: 768px) { - width: 79%; - } - } - .need-it-faster-box { - margin-top: 0 !important; - .need-it-faster-close { - position: relative; - top: -29px; - left: 12px; - text-align: center; - padding: 5px 4px; - margin: 0; - width: 115px; - height: 115px; - border-radius: 15px; - background: white; - i { - margin: 0; - position: relative; - top: 2px; - font-size: 15px; - background: colors.$grey2; - color: #000000; - } - } - .delivery-box { - padding: 14px 15px; - text-align: left; - border: 1px solid colors.$grey2; - > div { - display: flex; - align-items: center; - } - .fields { - .field { - label { - font-weight: unset; - font-size: unset; - } - input[type='text'], - input[type='email'] { - box-shadow: inset 0 1px 3px #ddd; - border: 1px solid #ccc; - font-family: Calibri, Arial, Helvetica, sans-serif; - border-radius: 2px; - &:focus { - border-color: #85b7d9; - } - &:active { - border-color: #85b7d9; - } - } - &.input-time { - width: 130px; - .selection.dropdown { - width: 100%; - min-width: 101px !important; - border: 1px solid #ccc; - box-shadow: inset 0 1px 3px #ddd; - border-radius: 2px; - .text { - font-weight: 100 !important; - } - .menu { - height: 210px; - } - } - } - &.gmt { - position: relative; - width: 165px; - margin-right: 20px; - } - .get-price { - font-family: Calibri, Arial, Helvetica, sans-serif; - padding: 9px 11px; - vertical-align: top; - font-size: 18px; - border: 1px solid colors.$translatedBlue; - border-radius: 2px; - box-shadow: none !important; - background-color: #ffffff !important; - font-weight: 700; - margin-top: 33px; - &:hover { - text-decoration: none; - //box-shadow: 0 0 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24) !important; - border: 1px solid colors.$translatedBlue; - background-color: colors.$grey3; - } - &:focus { - box-shadow: none !important; - background-color: colors.$grey3 !important; - } - } - } - } - } - } - .delivery-order-not-available { - margin-top: 24px; - width: 45%; - float: right; - .quote-not-available-message { - float: right; - text-align: right; - font-size: 20px; - margin-right: 57px; - line-height: 30px; - } - } - .order-box-outsource { - display: inline-block; - width: 18%; - min-width: 199px; - .order-box { - background-color: #a7d7916b; - height: 70px; - text-align: center; - margin-bottom: 5px; - display: flex; - flex-direction: column; - align-items: center; - .price-pw { - font-size: 16px; - color: colors.$black; - font-weight: 100; - cursor: pointer; - } - .outsource-price { - font-size: 26px; - font-weight: 700; - padding: 17px 0 10px; - } - .content { - font-family: Calibri, Arial, Helvetica, sans-serif; - font-size: 15px; - a { - color: #000000; - font-weight: 100; - margin-left: 10px; - } - i { - margin-left: 5px; + + &.input-time { + width: 130px; + + .selection.dropdown { + width: 100%; + min-width: 101px !important; + border: 1px solid colors.$grey200; + box-shadow: inset 0 1px 3px colors.$grey200; + + .text { + font-weight: 100 !important; } + .menu { - height: 236px; - left: -10px; + height: 210px; } } } - @media only screen and (max-width: 1199px) and (min-width: 992px) { - width: 21%; - } - @media only screen and (max-width: 991px) and (min-width: 768px) { - width: 21%; + + &.gmt { + position: relative; + width: 250px; + margin-right: 20px; } } } - .easy-pay-box { - width: 100%; - padding: 5px 20px 15px; + + } + + .delivery-order-not-available { + margin-top: 24px; + width: 45%; + float: right; + + .quote-not-available-message { + float: right; text-align: right; - .easy-pay { + font-size: 20px; + margin-right: 57px; + line-height: 30px; + } + } + + .order-box-outsource { + display: flex; + width: 260px; + padding: 16px; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 8px; + border-radius: variables.$border-radius-big; + background-color: rgba(colors.$green800, 0.08); + + #accept-outsource-quote { + width: 100%; + } + + .order-box { + display: flex; + height: 28px; + justify-content: space-between; + align-items: center; + align-self: stretch; + + .price-pw { + font-size: 16px; + cursor: pointer; + } + + .outsource-price { + font-size: 28px; + line-height: 20px; font-weight: 700; - margin-bottom: 0; - font-size: 14px; - span { + color: colors.$green1000; + } + + .content { + font-family: Calibri, Arial, Helvetica, sans-serif; + font-size: 15px; + + a { + color: colors.$black; font-weight: 100; + margin-left: 10px; } - } - } - .customer-request { - .customer-box { - padding: 0 15px 15px; - position: relative; - overflow: hidden; - width: 55%; - .title-pointer { - h3 { - display: inline-block; - width: 50%; - padding-left: 30px; - margin-bottom: 5px; - } - .pointers { - /*display: inline-block; - text-align: right; - width: 50%;*/ - text-align: right; - .pointer { - width: 12px; - height: 12px; - background: #d5d8dc; - display: inline-block; - border-radius: 50%; - margin-right: 5px; - cursor: pointer; - transition: 0.3s ease; - &.active { - background: colors.$greenDefault; - } - } - } + + i { + margin-left: 5px; } - .slider-box { - min-height: 110px; - position: relative; - border: 1px solid #a8bbb2; - padding: 15px 0px; - .appendix { - display: inline-block; - width: 8%; - vertical-align: top; - font-size: 28px; - position: relative; - top: -3px; - color: #a8bbb2; - right: 13px; - background: #f1f3f2; - padding: 6px 2px; - text-align: center; - } - .customer-box-info { - width: 90%; - display: inline-block; - position: absolute; - opacity: 0; - &.fade-in { - transition: 1.5s; - opacity: 1; - } - .customer-text { - padding-bottom: 10px; - font-size: 14px; - line-height: 18px; - } - .customer-info { - width: 55%; - display: inline-block; - .customer-photo { - display: inline-block; - width: 30px; - height: 30px; - border-radius: 50%; - vertical-align: middle; - } - .customer-name { - display: inline-block; - margin-left: 10px; - } - .customer-role { - display: inline-block; - margin-left: 3px; - font-weight: 700; - } - } - .customer-corporate-logo { - display: inline-block; - width: 45%; - text-align: right; - vertical-align: middle; - img { - width: auto; - vertical-align: middle; - padding: 6px; - height: 40px; - } - .c-export { - height: 30px !important; - } - } - } + + .menu { + height: 236px; + left: -10px; } } - .request-box { - width: 45%; - .title-request { - position: absolute; - right: 30px; - bottom: 60px; - h3 { - margin-bottom: 5px; - padding-left: 30px; - } - } - .request-info-box { - color: #909894; - position: absolute; - bottom: 20px; - right: 30px; - .mobile-mail-box, - .account-box { - .item { - padding: 0; - .icon { - padding-right: 0; - margin-right: 5px; - } - .content { - padding-left: 0; - .header, - .description { - font-family: Calibri, Arial, Helvetica, sans-serif; - color: inherit; - } - a { - color: #000000 !important; - } - } - } - .call { - .icon { - margin-right: 0; - } - } - .send-email { - } - .open-chat { - i { - position: relative; - font-size: 16px; - } - .content { - .button { - font-family: Calibri, Arial, Helvetica, sans-serif; - border: 1px solid #c1c1c1; - background: #f3f3f3; - position: relative; - top: 5px; - width: 100%; - margin-right: 0; - padding: 9px 10px; - .sign { - width: 10px; - height: 10px; - display: inline-block; - vertical-align: baseline; - margin-right: 5px; - border-radius: 50%; - position: relative; - top: 1px; - &.online-item { - background-color: colors.$translatedBlue; - } - &.offline-item { - background-color: gray; - } - } - } - } - } + } + + } + } + + .easy-pay-box { + width: 100%; + padding: 5px 20px 15px; + text-align: right; + + .easy-pay { + font-weight: 700; + margin-bottom: 0; + font-size: 14px; + + span { + font-weight: 100; + } + } + } + + .customer-request { + display: flex; + padding: 16px; + justify-content: space-between; + align-items: flex-start; + align-self: stretch; + border-radius: 16px; + border: 1px solid colors.$grey100; + background: colors.$white; + + .customer-box { + display: flex; + flex-direction: column; + align-items: flex-start; + + .title-pointer { + align-self: flex-end; + + h3 { + display: inline-block; + width: 50%; + padding-left: 30px; + margin-bottom: 5px; + } + + .pointers { + /*display: inline-block; + text-align: right; + width: 50%;*/ + text-align: right; + + .pointer { + width: 12px; + height: 12px; + background: colors.$grey200; + display: inline-block; + border-radius: 50%; + margin-right: 5px; + cursor: pointer; + transition: 0.3s ease; + + &.active { + background: colors.$green500; } } } } - } - .outsource-to-vendor-reduced { - padding-top: 30px !important; - padding-left: 15px !important; - padding-right: 15px !important; - position: relative; - min-height: 145px; - .reduced-boxes { - .container-reduced { - padding: 0 10px; - width: 81%; + .slider-box { + display: flex; + width: 512px; + padding: 16px 16px 16px 48px; + flex-direction: column; + align-items: flex-start; + gap: 16px; + align-self: stretch; + border-radius: variables.$border-radius-default; + border: 1px solid colors.$grey100; + position: relative; + height: 135px; + @media (max-width: 1200px) { + width: 430px; + } + .quote { + position: absolute; + left: 8px; + top: 8px; + font-size: 64px; + line-height: 72px; + font-weight: 700; + color: colors.$grey700; + } + + .customer-box-info { + width: 90%; display: inline-block; - vertical-align: top; - .job-menu, - .open-translate { - display: none; + opacity: 0; + position: absolute; + padding-right: 16px; + + &.fade-in { + transition: 1.5s; + opacity: 1; } - .title-reduced { - font-size: 24px; - font-weight: 100; + + .customer-text { + padding-bottom: 10px; + font-size: 14px; + line-height: 18px; } - .payment-service { - display: inline-block; - width: 63%; - vertical-align: top; - position: relative; - top: 10px; - .service-box { + + .customer-info { + display: flex; + + .customer-photo { display: inline-block; - font-size: 22px; - font-weight: 700; - .service { - display: inline-block; - &.project-management { - } - &.translation { - margin-left: 6px; - margin-right: 6px; - } - &.revision { - margin-right: 6px; - } - } + width: 30px; + height: 30px; + border-radius: 50%; + vertical-align: middle; + overflow: hidden; } - .fiducial-logo { + + .customer-name { display: inline-block; - img { - width: 100px; - position: relative; - top: 9px; - margin-left: 4px; - } + margin-left: 10px; } - .view-more { - z-index: 1; - position: relative; - } - } - .delivery-order { - display: inline-block; - width: 37%; - text-align: right; - position: relative; - top: -15px; - .need-it-faster-box { - .delivery-box { - border: 1px solid colors.$grey2; - } - } - .delivery-box { + + .customer-role { display: inline-block; - font-size: 18px; + margin-left: 3px; font-weight: 700; - > div { - display: flex; - align-items: center; - } - label { - padding: 5px; - font-size: 16px; - color: gray; - font-weight: 100; - display: flex; - } - .delivery-date, - .delivery-time { - display: inline-block; - padding: 5px; - } - .atdd { - display: inline-block; - font-weight: 100; - } - .delivery-time { - padding-right: 15px !important; - } - .gmt { - } - } - } - .delivery-order-not-available { - width: 40%; - float: right; - position: absolute; - right: -10px; - top: 20px; - .quote-not-available-message { - float: right; - text-align: right; - font-size: 20px; - margin-right: 57px; - line-height: 30px; } } - .errors-date { - font-weight: 100; - font-size: 14px; - display: inline-block; - margin-right: 6px; - text-align: right; - width: 100%; - position: relative; - top: -10px; - &.generic-error { - color: red; - } - } - .confirm-delivery-input { - text-align: right; - margin-top: 8px; - } - } - .order-box-outsource { - display: inline-block; - float: right; - text-align: center; - margin-top: -17px; - width: 18%; - min-width: 200px; - .order-box { - background-color: #a7d7916b; - padding: 25px 5px 15px; - margin-bottom: 5px; - display: flex; - flex-direction: column; - align-items: center; - .price-pw { - font-size: 16px; - color: colors.$black; - font-weight: 100; - cursor: pointer; - } - .outsource-price { - font-size: 28px; - font-weight: 700; - margin-bottom: 10px; - } - .content { - font-family: Calibri, Arial, Helvetica, sans-serif; - a { - color: #000000; - font-weight: 100; - font-size: 14px; - } - i { - margin-left: 5px !important; - } - .menu { - top: -5px; - left: -23px; - height: 95px; - } - } - } - .order-button-outsource { - .open-order, - .confirm-order { - width: 100%; - font-family: Calibri, Arial, Helvetica, sans-serif; - padding: 10px 22px; - vertical-align: top; - font-size: 16px; - border-radius: 2px; - margin: 0px; - } - } - } - .confirm-delivery-box { - text-align: right; - display: inline-block; - width: 100%; - margin-top: 10px; - } - @media only screen and (max-width: 1199px) and (min-width: 992px) { - .container-reduced { - width: 79%; - .payment-service { - width: 60%; - top: 18px !important; - } - .delivery-order { - width: 35%; - top: -15px; - .delivery-box { - label { - padding: 5px; - font-size: 16px; - color: gray; - font-weight: 100; - display: grid; - } - .gmt { - position: relative; - top: 15px; - } - } - } - } - } - @media only screen and (max-width: 991px) and (min-width: 768px) { - .container-reduced { - width: 79%; - .payment-service { - width: 60%; - top: 18px !important; - } - .delivery-order { - width: 35%; - top: -15px; - .delivery-box { - label { - padding: 5px; - font-size: 16px; - color: gray; - font-weight: 100; - display: grid; - } - .gmt { - position: relative; - top: 15px; - } - } - } - } - } - @media only screen and (max-width: 767px) { - .container-reduced { - width: 79%; - .payment-service { - width: 60%; - top: 18px !important; + .customer-corporate-logo { + margin-left: auto; + + img { + width: auto; + height: 20px; } - .delivery-order { - width: 35%; - top: -15px; - .delivery-box { - label { - padding: 5px; - font-size: 16px; - color: gray; - font-weight: 100; - display: grid; - } - .gmt { - position: relative; - top: 15px; - } - } + + .c-export { + height: 15px !important; } } } } } - &.compact-background { - background: #ffffff; - padding-bottom: 25px; - padding-top: 25px; - } - } - .order-button-outsource { - margin: 0; - .open-order, - .confirm-order { - font-family: Calibri, Arial, Helvetica, sans-serif; - padding: 10px; - margin: 0; - font-size: 18px; - border-radius: 2px; - width: 100%; - } - .open-outsourced { - font-family: Calibri, Arial, Helvetica, sans-serif; - padding: 11px 0 !important; - vertical-align: top; - font-size: 16px; - border-radius: 2px; - width: 100%; - float: right; - margin-right: 0 !important; - &:hover { - box-shadow: - 0 0 0 #e0e0e0, - 0 0 2px rgba(0, 0, 0, 0.12), - 0 2px 4px rgba(0, 0, 0, 0.24) !important; - } - &:focus { - box-shadow: none !important; - } - &:active { - box-shadow: none !important; + .request-box { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + + .title-request { + font-size: 20px; + line-height: 28px; + font-weight: 700; } - } - } - @media only screen and (min-width: 1200px) { - } + .request-info-box { + display: flex; + align-items: center; + gap: 16px; - @media only screen and (min-width: 1380px) { - } - @media only screen and (max-width: 1199px) and (min-width: 992px) { - .outsource-container { - width: 105%; - .container-reduced { - width: 79%; - } - } - } + .item { + display: flex; + align-items: center; + gap: 8px; + .icon { + padding-right: 0; + margin-right: 5px; + } - @media only screen and (max-width: 991px) and (min-width: 768px) { - } + .content { + padding-left: 0; + + .header, + .description { + font-family: Calibri, Arial, Helvetica, sans-serif; + color: inherit; + } + + a { + color: colors.$black !important; + } + } + } - @media only screen and (max-width: 767px) { + } + } } } diff --git a/public/css/sass/commons/_progress-mc-bar.scss b/public/css/sass/commons/_progress-mc-bar.scss index f8ce814736..748e8bce3e 100644 --- a/public/css/sass/commons/_progress-mc-bar.scss +++ b/public/css/sass/commons/_progress-mc-bar.scss @@ -1,4 +1,5 @@ -@use "../commons/colors"; +@use '../tokens/colors'; +@use '../commons/variables'; #manage-container .progress-bar { height: 20px; top: 15px; @@ -23,11 +24,11 @@ //min-width: 120px; position: relative; .meter { - height: 12px; + height: 16px; width: 100%; float: left; margin: 0px 15px 0px 0 !important; - background-color: #d0d1d1; + background-color: colors.$grey200; overflow: hidden; border-radius: 10px; > div { @@ -52,47 +53,45 @@ } .translated-bar { - background-color: colors.$translatedBlue; + background-color: colors.$blue500; } .approved-bar { - background-color: colors.$approvedGreen; + background-color: colors.$green800; } .approved-bar-2nd-pass { - background-color: colors.$approved2Green; + background-color: colors.$purple500; } .warning-bar { - background-color: colors.$rebuttedRed; + background-color: colors.$orange600; } .draft-bar { - background-color: colors.$grey4; + background-color: colors.$grey100; } } } .multiple { - .btn { - .progress-bar { - border: 0px; - height: 6px; - margin-top: 0px; + .btn .progress-bar { + border: 0px; + height: 6px; + margin-top: 0px; + } - .progr { - height: 23px; - width: 100%; - min-width: 1px; - .meter { + .btn .progress-bar .progr { + height: 23px; + width: 100%; + min-width: 1px; + .meter { + height: 8px; + margin: -5px 0 0 0 !important; + border: 0px; + border-radius: variables.$border-radius-default; + a { + height: 8px; + border-radius: 0px; + &:after { + top: -5px; height: 8px; - margin: -5px 0 0 0 !important; - border: 0px; - border-radius: 8px; - a { - height: 8px; - border-radius: 0px; - &:after { - top: -5px; - height: 8px; - } - } } } } diff --git a/public/css/sass/commons/_reset.scss b/public/css/sass/commons/_reset.scss new file mode 100644 index 0000000000..77ee000c34 --- /dev/null +++ b/public/css/sass/commons/_reset.scss @@ -0,0 +1,37 @@ +*, *::before, *::after { + box-sizing: border-box; +} + +*:not(dialog) { + margin: 0; +} +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} + +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} + +input, button, textarea, select { + font: inherit; +} + +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; +} + +p { + text-wrap: pretty; +} +h1, h2, h3, h4, h5, h6 { + text-wrap: balance; +} + +ul { + margin: 0; + padding: 0; + list-style: none; +} \ No newline at end of file diff --git a/public/css/sass/commons/_shadows.scss b/public/css/sass/commons/_shadows.scss index 7ba6c2a818..1db019c953 100644 --- a/public/css/sass/commons/_shadows.scss +++ b/public/css/sass/commons/_shadows.scss @@ -1,9 +1,6 @@ +@use '../tokens/colors'; //boxes .shadow-1 { - box-shadow: 0 0 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), + box-shadow: 0 0 0 colors.$grey200, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24) !important; } -//header example navbar -.shadow-2 { - box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); -} diff --git a/public/css/sass/commons/_sub-header.scss b/public/css/sass/commons/_sub-header.scss index 8644248114..3ac6725ea7 100644 --- a/public/css/sass/commons/_sub-header.scss +++ b/public/css/sass/commons/_sub-header.scss @@ -1,10 +1,7 @@ -@use '../commons/colors'; - +@use '../tokens/colors'; +@use '../commons/variables'; .sub-head { color: white; - .ui.container.equal.width.grid { - width: 1335px !important; - } .projects-state { width: 40px !important; } @@ -30,9 +27,9 @@ .search-state-filters { input.search-projects { height: 40px; - border-radius: 2px; - background-color: #fff; - color: #002b5c; + border-radius: variables.$border-radius-default; + background-color: colors.$white; + color: colors.$blue900; transition: 0.2s ease-in; font-size: 14px; max-width: 320px; @@ -40,75 +37,14 @@ padding: 12px 16px; box-shadow: none; border: none; - opacity: 0.4; &::placeholder { - color: #002b5c; + color: colors.$blue900; } &:focus { border: none !important; - opacity: 1; & + .dropdown { - background-color: #ffffff; - } - } - } - .ui.dropdown { - background-color: #fff; - border-left: 1px solid #002b5c; - /*transition: 0.2s ease-in;*/ - color: #002b5c; - font-weight: 500; - padding: 2px 16px 2px 8px; - line-height: 1.21; - border-radius: 0px 2px 2px 0px; - font-size: 1em; - min-width: 110px; - display: grid; - grid-template-columns: 36px auto; - align-items: center; - opacity: 0.4; - &:hover, - &:active, - &:focus { - opacity: 1; - } - .text { - svg { - display: none; - } - } - .menu { - min-width: 144px; - padding: 8px 8px 12px 8px; - border-radius: 2px; - border: solid 1px #cdd4de; - right: 0 !important; - left: auto !important; - box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); - - &::after { - left: 50% !important; - } - - .item { - border-radius: 2px; - color: #002b5c; - font-size: 15px; - padding: 8px !important; - font-weight: normal; - display: grid; - grid-template-columns: auto 16px; - align-items: center; - margin: 4px 0 0 0; - - &:hover { - background-color: rgba(0, 0, 0, 0.03); - } - &.selected { - background-color: #002b5c; - color: #ffffff !important; - } + background-color: colors.$white; } } } @@ -117,21 +53,15 @@ .filter-project-status-dropdown-trigger { gap: 0 !important; - border-radius: 0 !important; - opacity: 0.4; - margin-left: 1px; - - &:hover, - &[data-state='open'] { - opacity: 1; - } + border-radius: 0 variables.$border-radius-default + variables.$border-radius-default 0 !important; } .filter-project-status-dropdown { min-width: 140px; .dropdownmenu-item { &:not([data-disabled]).selected { - background-color: #00254f !important; + background-color: colors.$blue950 !important; color: white !important; } } diff --git a/public/css/sass/commons/_tooltip.scss b/public/css/sass/commons/_tooltip.scss index ced1221454..70dbc6ecf5 100644 --- a/public/css/sass/commons/_tooltip.scss +++ b/public/css/sass/commons/_tooltip.scss @@ -1,14 +1,15 @@ +@use '../tokens/colors'; #powerTip { cursor: default; - background-color: #fff; + background-color: colors.$white; border-radius: 6px; - color: #000; + color: colors.$black; display: none; padding: 8px !important; position: absolute; white-space: nowrap; - z-index: 2147483647; - border: 1px solid #d4d4d5; + z-index: var(--z-tooltip); + border: 1px solid colors.$grey200; border-radius: 0.28571429rem; box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); @@ -19,11 +20,11 @@ content: ''; width: 0.71428571em; height: 0.71428571em; - background: #ffffff; + background: colors.$white; -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 2; - box-shadow: -1px -1px 0px 0px #d4d4d5; + box-shadow: -1px -1px 0px 0px colors.$grey200; top: -4px; } diff --git a/public/css/sass/commons/_typography.scss b/public/css/sass/commons/_typography.scss index cd3833d0e4..11ad54577b 100644 --- a/public/css/sass/commons/_typography.scss +++ b/public/css/sass/commons/_typography.scss @@ -1,32 +1,28 @@ -h1, -h2, -h3, -h4, -h5 { - line-height: 1.28571429em; - font-weight: bold; - padding: 0em; -} +@use './variables'; h1 { - min-height: 1rem; - font-size: 2rem; + margin: 0; + font: variables.$font-style-heading1; } - h2 { - font-size: 1.71428571rem; + margin: 0; + font: variables.$font-style-heading2; } - h3 { - font-size: 1.28571429rem; + margin: 0; + font: variables.$font-style-heading3; } - h4 { - font-size: 1.07142857rem; + margin: 0; + font: variables.$font-style-heading4; } - h5 { - font-size: 1rem; + margin: 0; + font: variables.$font-style-heading5; +} +h6 { + margin: 0; + font: variables.$font-style-heading6; } h1:first-child, @@ -34,7 +30,7 @@ h2:first-child, h3:first-child, h4:first-child, h5:first-child { - margin-top: 0em; + margin-top: 0; } h1:last-child, @@ -42,14 +38,14 @@ h2:last-child, h3:last-child, h4:last-child, h5:last-child { - margin-bottom: 0em; + margin-bottom: 0; } p { margin: 0 0 16px 0; - line-height: 1.4285em; + line-height: 23px; &:last-child { - margin-bottom: 0em; + margin-bottom: 0; } } @@ -63,7 +59,7 @@ body ::-webkit-scrollbar { body ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); - border-radius: 0px; + border-radius: 0; } body ::-webkit-scrollbar-thumb { diff --git a/public/css/sass/commons/_variables.scss b/public/css/sass/commons/_variables.scss index 369d44c0d4..6c04bda804 100644 --- a/public/css/sass/commons/_variables.scss +++ b/public/css/sass/commons/_variables.scss @@ -1,8 +1,36 @@ -$approved-color: #639d5e; -$translated-color: #0798bc; -$rejected-color: #b02429; -$disabled-color: #ebebeb; -$disabled-border-color: #b3b3b3; +@use 'sass:list'; + +// Typography: +$font-family: Calibri, Arial, Helvetica, sans-serif; + +$font-weight-regular: 400; +$font-weight-medium: 500; +$font-weight-bold: 700; + +$font-size-big: 18px; +$font-size-base: 16px; +$font-size-small: 14px; +$font-size-xsmall: 12px; + +$line-height-big: 26px; +$line-height-base: 24px; +$line-height-small: 20px; +$line-height-xsmall: 16px; + +$font-style-big: $font-weight-regular list.slash($font-size-big, $line-height-big) $font-family; //500 18/26 Calibri, Arial, Helvetica, sans-serif +$font-style-base: $font-weight-regular list.slash($font-size-base, $line-height-base) $font-family; //500 16/24 Calibri, Arial, Helvetica, sans-serif +$font-style-small: $font-weight-regular list.slash($font-size-small, $line-height-small) $font-family; //400 14/20 Calibri, Arial, Helvetica, sans-serif +$font-style-xsmall: $font-weight-regular list.slash($font-size-xsmall, $line-height-xsmall) $font-family; //400 12/16 Calibri, Arial, Helvetica, sans-serif + +$font-style-heading1: $font-weight-bold 68px/80px $font-family; +$font-style-heading2: $font-weight-bold 48px/56px $font-family; +$font-style-heading3: $font-weight-bold 34px/40px $font-family; +$font-style-heading4: $font-weight-bold 24px/28px $font-family; +$font-style-heading5: $font-weight-bold 20px/24px $font-family; +$font-style-heading6: $font-weight-bold list.slash($font-size-base, $line-height-base) $font-family; + +$border-radius-default: 8px; +$border-radius-big: 16px; /******* Notifications ***********/ @@ -10,10 +38,10 @@ $notifications-width: 400px; $notificationShadowOpacity: 0.9; -$notification-success: #5ea400; -$notification-error: #ec3d3d; -$notification-warning: #ebad1a; -$notification-info: #369cc7; +$notification-success: #11C38F; +$notification-error: #ED655C ; +$notification-warning: #D9943E; +$notification-info: #60A9F6; @mixin box-sizing($boxsizing) { -webkit-box-sizing: $boxsizing; diff --git a/public/css/sass/commons/icons_main.scss b/public/css/sass/commons/icons_main.scss deleted file mode 100644 index eba2d4d73d..0000000000 --- a/public/css/sass/commons/icons_main.scss +++ /dev/null @@ -1 +0,0 @@ -@use 'icons'; diff --git a/public/css/sass/components/Analyze/JobAnalyze.scss b/public/css/sass/components/Analyze/JobAnalyze.scss index 3ff00e3621..b9b580f6a2 100644 --- a/public/css/sass/components/Analyze/JobAnalyze.scss +++ b/public/css/sass/components/Analyze/JobAnalyze.scss @@ -1,36 +1,33 @@ -@use '../../commons/_colors'; - +@use '../../tokens/colors'; +@use '../../commons/variables'; .job-analyze-header { - background-color: colors.$grey2; display: flex; - height: 32px; + height: 40px; align-items: center; - width: 100%; - justify-content: space-between; - font-size: 16px; - .job-analyze-header_left { - display: flex; - align-items: center; - gap: 16px; + align-self: stretch; + background: colors.$grey100; + font: variables.$font-style-small; + padding: 0 24px; + gap: 4px; + .job-analyze-header__id { + color: colors.$grey700; + font: variables.$font-style-xsmall; + min-width: 80px; } - .job-analyze-languages, - .job-analyze-header_right { - span { - font-weight: 700; - line-height: 16px; - } - } - .job-analyze-languages { + .job-analyze-header__languages { display: flex; align-items: center; - gap: 2px; + gap: 4px; + font-weight: 700; + } + .job-analyze-header__words { + color: colors.$blue500; + margin-left: auto; + font-weight: 700; } } .chunks-analyze { - padding: 0 0 16px 0; - padding-left: 0 !important; - padding-right: 0 !important; width: 100%; background-color: colors.$white; } @@ -41,10 +38,9 @@ 80px, 100px ); - grid-template-rows: 125px; - padding: 0 !important; - border-bottom: 1px solid colors.$grey3; - background-color: colors.$grey4; + grid-template-rows: 68px; + background-color: colors.$grey50; + font: variables.$font-style-xsmall; &.mtqe { grid-template-columns: minmax(100px, 150px) repeat(8, 1fr) minmax(80px, 100px); } @@ -53,9 +49,8 @@ flex-direction: column; height: 100%; text-align: right; - border-left: 1px solid colors.$grey3; min-width: 46px; - font-size: 16px; + color: colors.$grey400; &:first-child { border-left: none; > div { @@ -64,8 +59,7 @@ } :first-child { height: 85px; - border-bottom: 1px solid colors.$grey3; - font-weight: bold; + color: colors.$black; } > div { height: 32px; @@ -82,13 +76,13 @@ flex-direction: column; height: 100%; text-align: right; - color: colors.$grey; - background-color: colors.$grey5; + color: colors.$grey400; padding-right: 6px; - font-size: 16px; - :first-child { + border-right: 1px solid colors.$grey100; + :first-child { height: 85px; font-weight: normal; + color: colors.$grey400; } > div { height: 32px; @@ -99,8 +93,9 @@ display: flex; justify-content: flex-end; font-weight: 700; - font-size: 20px; - text-align: center; + text-align: right; + align-items: flex-end; + padding-right: 2px; > div { justify-content: center; border-bottom: none; @@ -112,23 +107,22 @@ .chunk-analyze-container { width: 100%; padding: 0 !important; + font: variables.$font-style-xsmall; .chunk-analyze-info { display: grid; grid-template-columns: minmax(100px, 150px) repeat(11, 1fr) minmax( 80px, 100px ); - padding-top: 16px; background-color: colors.$white; position: relative; - font-size: 16px; &.mtqe { grid-template-columns: minmax(100px, 150px) repeat(8, 1fr) minmax(80px, 100px); } .chunk-analyze-info-background { position: absolute; width: 86%; - background: colors.$grey; + background: colors.$grey600; height: 24px; right: 10px; top: 40px; @@ -136,8 +130,7 @@ border-radius: 4px 4px 0 0; } .chunk-analyze-info-header { - height: 48px; - background-color: #f5f6f7; + height: 56px; border-radius: 4px; display: flex; flex-direction: column; @@ -148,57 +141,53 @@ } .chunk-analyze-info-index { color: colors.$black !important; - font-weight: 700; - font-size: 14px; + font-weight: 700 !important; } .chunk-analyze-info-files { - color: colors.$black !important; + color: colors.$blue500 !important; display: flex; align-items: center; gap: 4px; text-decoration: underline; cursor: pointer; } + .chunk-analyze-info-files svg { + color: colors.$blue500 !important; + } :first-child { - color: colors.$grey; - font-size: 14px; + color: colors.$grey600; } > div { - height: 24px; + height: 28px; width: 100%; color: colors.$black; justify-content: space-between; display: flex; padding: 2px 8px; - font-size: 16px; + font-weight: 700; + align-items: center; } } .chunk-analyze-info-total { - > div { - justify-content: center !important; - } + background-color: colors.$grey50; :last-child { - font-size: 16px !important; font-weight: 700; } } > div { - border-right: 1px solid colors.$grey3; - &:last-child, - &:first-child { - border-right: none; - } > div:not(.chunk-analyze-info-header) { - height: 24px; + height: 28px; justify-content: right; display: flex; padding-right: 6px; line-height: 24px; + font-weight: 700; + align-items: center; } :first-child { - font-size: 14px; - color: colors.$grey; + font-weight: 400 !important; + color: colors.$grey600; } } } @@ -212,19 +201,18 @@ grid-template-rows: 24px; display: grid; padding: 0; - color: colors.$grey; + color: colors.$grey600; position: relative; &.mtqe { grid-template-columns: minmax(100px, 150px) repeat(8, 1fr) minmax(80px, 100px); } .chunk-file-detail-background { position: absolute; - width: 86%; - background: colors.$grey; + width: 100%; + background: colors.$grey50; height: 24px; - right: 10px; top: 0px; - opacity: 0.1; + z-index: 1; &.last { border-radius: 0 0 4px 4px; } @@ -234,15 +222,15 @@ justify-content: left; } > div { - border-right: 1px solid colors.$grey3; justify-content: right; display: flex; padding-right: 6px; line-height: 24px; + z-index: 2; } .chunk-file-detail-filename { - background-color: colors.$white; - padding-right: 0; + justify-content: space-between; + padding: 0 12px; svg { margin-top: 5px; } @@ -251,25 +239,17 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: 12px; - width: 100px; - line-height: 24px; + max-width: 100px; + text-align: right; } > div { - display: flex; align-items: flex-start; - margin: 0 6px; - padding: 0 6px; width: 100%; gap: 4px; - background-color: colors.$grey4; cursor: default; } } - .chunk-file-detail-total { - justify-content: center; - border-right: none; - } + } .analyze-page .more-columns { grid-template-columns: minmax(100px, 150px) repeat(12, 1fr) minmax(80px,100px) !important; diff --git a/public/css/sass/components/CattolFooter.scss b/public/css/sass/components/CattolFooter.scss index b8535485f9..b7b16335a6 100644 --- a/public/css/sass/components/CattolFooter.scss +++ b/public/css/sass/components/CattolFooter.scss @@ -1,4 +1,4 @@ -@use '../commons/colors'; +@use '../tokens/colors'; .stats-foo { position: fixed; bottom: 0; @@ -35,7 +35,7 @@ .grey-box { display: flex; flex-direction: column; - background-color: colors.$grey5; + background-color: colors.$grey50; border-radius: 4px; padding: 5px 10px; line-height: 1.2; @@ -45,7 +45,7 @@ } > :last-child { - color: colors.$grey6; + color: colors.$grey700; } .grey-box-row { diff --git a/public/css/sass/components/Footer.scss b/public/css/sass/components/Footer.scss index 11dd15a108..0d100cb806 100644 --- a/public/css/sass/components/Footer.scss +++ b/public/css/sass/components/Footer.scss @@ -1,7 +1,7 @@ -@use "../commons/colors"; +@use "../tokens/colors"; .normal-foo { - background-color: colors.$grey4; + background-color: colors.$grey100; min-width: 992px; width: 100%; .footer-body { @@ -26,15 +26,15 @@ background-size: cover; } .description { - color: colors.$grey1; + color: colors.$grey500; font-weight: 100; font-size: 12px; text-align: left; line-height: 14px; - .link { - color: #00aee4; - text-decoration: underline; - } + } + .description .link { + color: colors.$blue500; + text-decoration: underline; } } } @@ -50,7 +50,7 @@ gap: 5px; a { margin: 0; - color: colors.$grey1; + color: colors.$grey500; text-align: left; font-size: 16px; font-weight: bold; @@ -58,12 +58,12 @@ display: flex; align-items: center; &.email-link { - color: #fff; - background-color: colors.$grey1; + color: colors.$white; + background-color: colors.$grey500; padding: 6px 24px; border-radius: 2px; &:hover { - background-color: colors.$grey6; + background-color: colors.$grey700; } } } diff --git a/public/css/sass/components/MarkAsCompleteButton.scss b/public/css/sass/components/MarkAsCompleteButton.scss deleted file mode 100644 index ab8764f6a2..0000000000 --- a/public/css/sass/components/MarkAsCompleteButton.scss +++ /dev/null @@ -1,39 +0,0 @@ -@use "../commons/colors"; -#markAsCompleteButton.isMarkableAsComplete { - background: colors.$translatedBlue; - color: #fff !important; - width: auto !important; - border-radius: 2px 0 0 2px; - padding: 0 5px !important; - text-transform: uppercase; - margin: 0 !important; -} -input#markAsCompleteButton[disabled] { - background: #d7d7d8; -} - -#markAsCompleteButton { - width: 30px !important; - height: 30px; - text-align: right; - background: transparent; - border: none; - - &.isMarkedComplete { - background-image: url('/public/img/icons/icon-mark-active.svg'); - background-size: cover; - } - &.isMarkableAsComplete { - opacity: 1; - padding: 0 !important; - border-radius: 0; - background: transparent url('/public/img/icons/icon-mark.svg'); - background-size: cover; - } - &.notMarkedComplete { - background: transparent url('/public/img/icons/icon-mark.svg'); - opacity: 0.7; - background-size: cover; - cursor: not-allowed; - } -} diff --git a/public/css/sass/components/MembersFilter.scss b/public/css/sass/components/MembersFilter.scss index 5e645ffb97..685fb07bf0 100644 --- a/public/css/sass/components/MembersFilter.scss +++ b/public/css/sass/components/MembersFilter.scss @@ -1,118 +1,142 @@ -@use '../commons/colors'; +@use '../tokens/colors'; -.members-filter-dropdown-container { +.members-filter-trigger-button { position: relative; - margin-top: 3px; - - .dropdown { - position: absolute; - left: 0; - visibility: hidden; - z-index: 1; - background-color: white; - margin-top: 5px; - padding: 5px; - min-width: 250px; - right: 0; - max-height: 450px; - overflow: auto; - opacity: 0; - transition: opacity 0.2s linear; - box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); - - &.open { - visibility: visible; - opacity: 1; - } - - ul { - padding: 0; - margin: 0; - list-style: none; - display: flex; - flex-direction: column; - - > li { - display: flex; - align-items: center; - gap: 5px; - cursor: pointer; - padding: 10px; - color: black; - - &:not(.item-filter) { - justify-content: space-between; - > :last-child { - color: colors.$translatedBlue; - font-weight: bold; - } - } + min-width: 180px; + max-width: 220px; + border-radius: 35px !important; + justify-content: start !important; + padding-left: 4px !important; + padding-right: 5px !important; + font-size: 14px !important; + color: black !important; + + &:disabled { + box-shadow: unset !important; + border: 1px solid colors.$grey200; + } - &:hover { - background-color: colors.$grey9; - } + > :first-child { + margin-left: 0 !important; + padding-left: 0 !important; + } - &.active { - background-color: colors.$darkBlueHover; - color: colors.$white; + > :last-child { + margin-left: auto; + margin-right: 6px; + } - &:not(.item-filter) { - > :last-child { - color: white; - } - } - } + > svg { + transition: transform 0.2s ease-in-out; + } - &.disabled { - cursor: default; - pointer-events: none; - opacity: 0.5; - } - } + &.members-filter-open { + > svg { + transform: rotate(180deg); } } - .trigger-button { - position: relative; - min-width: 180px; - max-width: 220px; - height: 35px !important; - border-radius: 35px !important; - justify-content: start !important; - padding-left: 0 !important; - font-size: 14px !important; - color: black !important; + .members-filter-user-full-name { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } +} - &:disabled { - box-shadow: unset !important; - border: 1px solid colors.$grey8; - //color: $grey6 !important; - } +.members-filter-item-filter { + display: flex; + align-items: center; + gap: 5px; + cursor: pointer; + padding: 10px; + color: black; + + > :first-child { + font-size: 12px; + border: 2px solid colors.$blue500; + color: colors.$blue500; + border-radius: 100%; + width: 28px; + height: 28px; + display: flex; + text-align: center; + background-color: colors.$grey100; + padding: 6px 4px; + font-weight: bold; + margin-right: 0.25em; + line-height: 1; + } + &.members-filter-all { > :first-child { - margin-left: 3px !important; - padding-left: 0 !important; + font-size: 11px; } + } +} - > :last-child { - margin-left: auto; - margin-right: 6px; - } +.members-filter-popover-content { + z-index: 7; +} - > svg { - transition: transform 0.2s ease-in-out; - } +.members-filter-dropdown-content { + background-color: white; + padding: 5px; + min-width: 250px; + max-height: 450px; + overflow: auto; + box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); + + ul { + padding: 0; + margin: 0; + list-style: none; + display: flex; + flex-direction: column; + + > li { + display: flex; + align-items: center; + gap: 5px; + cursor: pointer; + padding: 10px; + + &:hover { + background-color: colors.$grey75; + } + + &.active { + background-color: colors.$blue950; + color: colors.$white; + + &:not(.members-filter-item-filter) { + > :last-child { + color: colors.$white; + } + } + } + + &:not(.members-filter-item-filter) { + justify-content: space-between; - &.open { - > svg { - transform: rotate(180deg); + > :last-child { + font-weight: bold; + color: colors.$blue500; + } } } + } - .user-full-name { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + .add-new-member { + border-bottom: 1px solid colors.$grey200; + margin-bottom: 10px; + text-transform: uppercase; + color: colors.$blue500; + font-weight: bold; + justify-content: space-between; + + > svg { + border: 1px solid colors.$blue500; + border-radius: 50%; } } @@ -123,7 +147,7 @@ background-color: unset !important; } - .input-component { + div[class*="input-component"] { width: 100%; input { @@ -135,37 +159,6 @@ .no-results { text-align: center; - color: #9e9e9e; - } - - .item-filter { - display: flex; - align-items: center; - gap: 5px; - cursor: pointer; - padding: 10px; - color: black; - - > :first-child { - font-size: 12px; - border: 2px solid colors.$translatedBlue; - color: colors.$translatedBlue; - border-radius: 100%; - width: 28px; - height: 28px; - display: flex; - text-align: center; - background-color: colors.$grey4; - padding: 6px 4px; - font-weight: bold; - margin-right: 0.25em; - line-height: 1; - } - - &.all { - > :first-child { - font-size: 11px; - } - } + color: colors.$grey400; } } diff --git a/public/css/sass/components/NotificationBox.scss b/public/css/sass/components/NotificationBox.scss index 60206414a6..0174049d73 100644 --- a/public/css/sass/components/NotificationBox.scss +++ b/public/css/sass/components/NotificationBox.scss @@ -1,171 +1,133 @@ @use '../commons/variables'; +@use '../tokens/colors'; /******* Notifications ************/ +.notifications-wrapper-inside { + .translator-notification-sent { + font-weight: bold; + line-height: 28px; + span { + color: colors.$blue700; + } + } +} + +.notification-item { + display: flex; + justify-content: space-between; + width: 100%; + border-radius: 12px; + background-color: colors.$white; + padding: 16px; + box-shadow: 0 1px 20px rgba(colors.$grey700, 0.3); + opacity: 0; + @include variables.transition(0.3s ease-in-out); + text-align: left; + > :first-child { + display: flex; + gap: 12px; + } + &:not(:last-child) { + margin-bottom: 20px; + } +} + .notifications-position { - font-family: inherit; position: fixed; width: variables.$notifications-width; + height: auto; padding: 0 10px 10px 10px; z-index: 99999999; @include variables.box-sizing(border-box); - height: auto; } .notifications-position-bl { - @extend .notifications-position; top: auto; bottom: 30px; left: 20px; right: auto; } .notifications-position-bc { - @extend .notifications-position; top: auto; bottom: 30px; margin: 0 auto; left: 50%; - margin-left: calc(-1 * (variables.$notifications-width / 2)); } .notifications-position-br { - @extend .notifications-position; top: auto; bottom: 30px; left: auto; right: 0px; } .notifications-position-tl { - @extend .notifications-position; top: 60px; bottom: auto; left: 0px; right: auto; } .notifications-position-tc { - @extend .notifications-position; top: 60px; bottom: auto; margin: 0 auto; left: 50%; - margin-left: calc(-1 * (variables.$notifications-width / 2)); } .notifications-position-tr { - @extend .notifications-position; top: 60px; bottom: auto; left: auto; } -.notification-type { - position: relative; - width: 100%; - text-align: left; - background-color: #fff; - @include variables.border-radius(2px); - font-size: 16px; - margin: 10px 0 0; - padding: 15px; - box-shadow: 0 1px 10px #666; - display: block; - @include variables.box-sizing(border-box); - opacity: 0; - @include variables.transition(0.3s ease-in-out); - .notification-message { - word-wrap: break-word; - } +.notification-item-icon { + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + border-radius: 50%; } .notification-type-success { - @extend .notification-type; - border-top: 3px solid variables.$notification-success; -} + .notification-item-icon { + background-color: rgba(variables.$notification-success, 0.1); -.notification-type-error { - @extend .notification-type; - border-top: 3px solid variables.$notification-error; + svg { + color: variables.$notification-success; + } + } } -.notification-type-warning { - @extend .notification-type; - border-top: 3px solid variables.$notification-warning; -} +.notification-type-error { + .notification-item-icon { + background-color: rgba(variables.$notification-error, 0.1); -.notification-type-info { - @extend .notification-type; - border-top: 3px solid variables.$notification-info; -} -.notification-message { - .warning-call-to { - text-transform: uppercase; - margin: 5px 0 0; - text-align: right; - a { - text-decoration: underline; - color: #4183c4; - font-weight: 700; - &:hover { - text-decoration: none; - } + svg { + color: variables.$notification-error; + transform: rotate(180deg); } } -} -.notification-close-button { - font-size: 14px; - position: absolute; - top: 10px; - right: 10px; - line-height: 14px; - background-color: #333; - color: #ffffff; - border-radius: 50%; - width: 14px; - height: 14px; - font-weight: bold; - text-align: center; - cursor: pointer; - &:hover { - background-color: #666; + .notification-item-content > :first-child { + color: variables.$notification-error; } } -.notification-title { - font-size: 18px; - margin: 0 0 7px 0; - padding: 0; - font-weight: bold; -} - -.notification-title-success { - @extend .notification-title; - color: variables.$notification-success; -} -.notification-title-error { - @extend .notification-title; - color: variables.$notification-error; -} -.notification-title-warning { - @extend .notification-title; - color: variables.$notification-warning; -} -.notification-title-info { - @extend .notification-title; - color: variables.$notification-info; -} +.notification-type-warning { + .notification-item-icon { + background-color: rgba(variables.$notification-warning, 0.1); -.notification-message{ - a { - color: variables.$notification-info; - } - a.bold { - font-weight: bold; + svg { + color: variables.$notification-warning; + transform: rotate(180deg); + } } + } -.notifications-wrapper-inside { - .translator-notification-sent { - font-weight: bold; - line-height: 28px; - span { - color: #4183c4; +.notification-type-info { + .notification-item-icon { + background-color: rgba(variables.$notification-info, 0.1); + + svg { + color: variables.$notification-info; } } } diff --git a/public/css/sass/components/ProjectBulkActions.scss b/public/css/sass/components/ProjectBulkActions.scss index 9e26309504..ce45dcf92e 100644 --- a/public/css/sass/components/ProjectBulkActions.scss +++ b/public/css/sass/components/ProjectBulkActions.scss @@ -1,17 +1,10 @@ -@use '../commons/colors'; +@use '../tokens/colors'; .project-bulk-actions-background { position: fixed; z-index: 3; - top: 80px; + top: 145px; margin-left: -100px; - background: colors.$grey5; - background: linear-gradient( - 180deg, - rgba(colors.$grey5, 1) 0%, - rgba(colors.$grey5, 1) 84%, - rgba(colors.$grey5, 0) 100% - ); &.project-bulk-actions-background-hidden { display: none; @@ -24,7 +17,7 @@ padding: 5px; justify-content: center; align-items: center; - background-color: colors.$grey4; + background-color: colors.$white; border-radius: 24px; > div { @@ -39,7 +32,7 @@ width: 25px; height: 25px; font-size: 12px; - background-color: colors.$grey6; + background-color: colors.$grey700; border-radius: 50%; display: flex; align-items: center; @@ -49,11 +42,11 @@ } .jobs-selected-reached-limit { - background-color: colors.$orangeDefaultHover; + background-color: colors.$orange400; } > span:not(:first-of-type) { - color: colors.$grey6; + color: colors.$grey700; } > div { @@ -62,8 +55,8 @@ } } - .button-component-container:disabled { - color: colors.$grey7 !important; + button:disabled { + color: colors.$grey400 !important; } } @@ -80,6 +73,10 @@ .bulk-actions-circle-button { border-radius: 50% !important; + + &:hover { + background-color: colors.$grey100 !important; + } } .project-bulk-spacer { @@ -88,6 +85,6 @@ width: 30px; height: 1px; display: block; - background: colors.$grey7; + background: colors.$grey400; } } diff --git a/public/css/sass/components/Projects/JobContainer.scss b/public/css/sass/components/Projects/JobContainer.scss new file mode 100644 index 0000000000..1e40542231 --- /dev/null +++ b/public/css/sass/components/Projects/JobContainer.scss @@ -0,0 +1,162 @@ +@use '../../tokens/colors'; + +.job-container { + display: flex; + flex-direction: column; +} + +.job-container-grid { + display: grid; + grid-template-columns: + 20px 180px minmax(auto, 240px) + 140px 100px minmax(0, 1fr) auto auto auto; + align-items: center; + padding: 16px 24px; + gap: 16px; + border-bottom: 1px solid colors.$grey100; + + .chunks-job-container & { + border-bottom: unset; + } + + .job-container-id { + display: flex; + flex-direction: column; + color: colors.$grey700; + } +} + +.chunks-job-container { + display: flex; + flex-direction: column; + padding: 16px 24px; + gap: 16px; + border-bottom: 1px solid colors.$grey100; + + .chunks-job-container-line { + display: flex; + justify-content: space-between; + + .chunks-job-container-line-sx { + > :last-child { + display: flex; + } + } + + .chunks-job-container-line-sx, + .chunks-job-container-line-dx { + display: flex; + gap: 16px; + } + } + + .chunks-job-container-list { + padding-left: 8px; + } +} + +.chunk-job-container { + grid-template-columns: + 180px minmax(auto, 240px) + 140px 100px 1fr auto auto auto; + padding: 16px 0px 16px 24px; +} + +.job-container-grid, +.chunks-job-container { + .job-languages-code { + display: flex; + align-items: center; + gap: 4px; + color: colors.$black; + + svg { + color: colors.$grey400; + transform: rotate(270deg); + } + } +} + +.job-container-outsource { + display: flex; + justify-content: end; + align-items: center; + gap: 10px; +} + +.job-activity-icons { + display: flex; + gap: 4px; + justify-content: center; + align-items: center; +} + +.job-container-button-weight-normal { + font-weight: normal !important; +} + +.job-container-words-button { + span { + color: colors.$grey400; + } +} + +.job-container-outsource-container { + display: flex; +} + +.job-container-outsource { + > div { + min-width: 0; + } +} + +.job-container-outsource-logo { + display: flex; + width: 100px; + + img { + width: 100px; + } +} + +.job-delivery-date { + display: flex; + min-width: 0; + align-items: center; + + > div { + white-space: nowrap; + display: block; + overflow: hidden; + } + + > span { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } +} + +.job-delivery-date-button-close { + flex-shrink: 0; + margin-left: 5px; +} + +@media only screen and (min-width: 1300px) { + .job-delivery-email { + max-width: 130px; + } + + .job-delivery-date { + > :nth-child(2) { + flex-shrink: 0; + } + } +} + +.job-delivery-email { + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/public/css/sass/components/Projects/ProjectContainer.scss b/public/css/sass/components/Projects/ProjectContainer.scss new file mode 100644 index 0000000000..1c36b621f9 --- /dev/null +++ b/public/css/sass/components/Projects/ProjectContainer.scss @@ -0,0 +1,98 @@ +@use '../../tokens/colors'; +@use '../../commons/variables'; + +.project-container { + display: flex; + flex-direction: column; + background-color: colors.$white; + border: 1px solid colors.$grey150; + border-radius: 18px; + overflow: hidden; +} + +.project-container-header { + display: flex; + justify-content: space-between; + padding: 7px 24px; + align-items: center; + align-self: stretch; + background-color: colors.$grey50; +} + +.project-container-header-sx, +.project-container-header-dx { + display: flex; + gap: 16px; + align-items: center; +} + +.project-container-header-dx { + gap: 8px; +} + +.project-container-header-name { + display: flex; + align-items: center; + gap: 2px; + + h6 { + font-weight: bold; + } + + &:has(> form) { + gap: 8px; + } +} + +.project-container-form-edit-name { + display: inline-block; + + fieldset { + border: unset; + margin: 0; + padding: 0; + } + + input[type='text'] { + height: 28px; + min-width: 250px; + max-width: 400px; + border-radius: variables.$border-radius-default; + &:active, + &:focus { + box-shadow: unset; + border: 1px solid colors.$grey500; + } + } +} + +.project-container-footer { + display: flex; + align-items: center; + padding: 10px 24px; + + > * { + color: colors.$grey700 !important; + font-size: 12px !important; + font-style: italic !important; + } + + button { + padding: 0 !important; + font-weight: normal !important; + } + + > :last-child { + margin-left: auto; + } +} + +.project-team-dropdown, +.user-project-dropdown { + border-radius: 999px !important; + font-weight: normal !important; +} + +.project-menu-dropdown { + border-radius: 50% !important; +} diff --git a/public/css/sass/components/ReviewExtendedPanel.scss b/public/css/sass/components/ReviewExtendedPanel.scss index 78cbc04a6d..85d9c87ba2 100644 --- a/public/css/sass/components/ReviewExtendedPanel.scss +++ b/public/css/sass/components/ReviewExtendedPanel.scss @@ -1,6 +1,6 @@ @use '../commons/divider'; @use '../commons/shadows'; -@use '../commons/colors'; +@use '../tokens/colors'; @use '../commons/variables'; h1, h2, @@ -17,353 +17,411 @@ input { position: absolute; top: 65px; width: 100%; - .re-wrapper { - height: 100%; - position: relative; - .re-warning-not-added-issue { - p { - background: variables.$notification-error; - color: #fff; - padding: 5px 10px; - a { - color: #fff; - font-weight: bolder; - cursor: pointer; - &:hover { - color: #fff; - text-decoration: underline; - } - } - } - } - .re-warning-selected-text-issue { - p { - background: #ffeb3b; - color: #000; - padding: 5px 10px; - } - } - .re-issues-box { - .re-issues-box-title { - } - .re-list { - overflow-y: auto; - max-height: 500px; - - &.no-scroll { - overflow-y: hidden; - } - .re-item-head { - border-bottom: 1px solid #f2f4f7; - padding-top: 10px; - margin-right: 1px; - font-size: 16px; - font-weight: bold; - padding-bottom: 3px; - } - &.issues { - .re-item-head { - margin-top: 3px; - padding-bottom: 5px; - } - } - .re-item { - &:hover, - &.active { - background: colors.$grey5 !important; - } - .re-item-box { - display: flex; - justify-content: space-between; - align-items: center; - position: relative; - padding: 5px 5px 5px 7px; - } - .re-issue { - .issue-head { - max-width: 85%; - min-width: 30px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: flex; - font-size: 14px; - .re-category-issue-head { - overflow: hidden; - text-overflow: ellipsis; - margin-right: 3px; - } - } - .issue-activity-icon { - .icon-buttons { - display: flex; - } - } - } - .re-error { - padding: 0 10px; - height: 100%; - min-height: 45px; - min-width: 30px; - display: flex; - align-items: center; - justify-content: space-between; - .error-name { - } - } - .comments-view { - .re-add-comment { - padding: 10px; - .re-comment-input { - border-radius: 20px !important; - } - } - .re-comment-list { - .re-comment { - background: #fff; - padding: 5px 10px; - margin-bottom: 0; - .re-revisor { - color: colors.$approvedGreen; - } - .re-revisor2 { - color: colors.$approved2Green; - } - .re-translator { - color: colors.$translatedBlue; - } - .re-comment-date { - color: lightslategray; - } - .re-selected-text { - color: #000; - } - } - .re-highlighted { - padding: 10px; - border-bottom: 1px solid #797979; - } - - span.re-selected-text { - margin-right: 5px; - } - } - } - .re-severities-buttons { - display: none; - } - &.severity-buttons:hover, - &.active { - .re-severities-buttons { - display: flex; - button { - padding: 7px 10px; - background-color: #f2f4f7; - @media only screen and (max-width: 1450px) { - padding: 7px 7px; - } - @media only screen and (max-width: 1260px) { - padding: 7px 5px; - } - @media only screen and (max-width: 1140px) { - padding: 7px 3px; - } - - &:hover, - &.active { - background-color: #cacbcd; - } - } - } - .error-name { - padding-right: 10px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - @media only screen and (max-width: 1260px) { - .error-name { - max-width: 55% !important; - } - } - @media only screen and (max-width: 1024px) { - .error-name { - max-width: 53% !important; - } - } - } - } - } - &.re-issues-box-empty { - display: none; - } - } - .re-item.issue-comments-open { - transition: 0.3s ease; - background: #f2f4f7; - } - .re-created { - background: colors.$grey3; - padding: 10px 10px 10px; - margin-bottom: 0; - .issues { - .re-item-issue-value { - background: #ffffff; - } - } - } - .re-to-create { - background: #ffffff; - .errors { - max-height: 450px; - .re-category-item { - } - } - } +} + +.review-balloon-container .re-wrapper { + height: 100%; + position: relative; +} + +.review-balloon-container .re-wrapper .re-warning-not-added-issue p { + background: variables.$notification-error; + color: colors.$white; + padding: 5px 10px; +} + +.review-balloon-container .re-wrapper .re-warning-not-added-issue p a { + color: colors.$white; + font-weight: bolder; + cursor: pointer; + + &:hover { + color: colors.$white; + text-decoration: underline; + } +} + +.review-balloon-container .re-wrapper .re-warning-selected-text-issue p { + background: colors.$orange200; + color: colors.$black; + padding: 5px 10px; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list { + overflow-y: auto; + max-height: 500px; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list.no-scroll { + overflow-y: hidden; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item-head { + border-bottom: 1px solid colors.$grey50; + padding-top: 10px; + margin-right: 1px; + font-size: 16px; + font-weight: bold; + padding-bottom: 3px; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list.issues .re-item-head { + margin-top: 3px; + padding-bottom: 5px; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item { + &:hover, + &.active { + background: colors.$grey50 !important; + } +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .re-item-box { + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + padding: 5px 5px 5px 7px; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .re-issue .issue-head { + max-width: 85%; + min-width: 30px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: flex; + font-size: 14px; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .re-issue .issue-head .re-category-issue-head { + overflow: hidden; + text-overflow: ellipsis; + margin-right: 3px; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .re-issue .issue-activity-icon .icon-buttons { + display: flex; + gap: 4px; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .re-error { + padding: 0 10px; + height: 100%; + min-height: 45px; + min-width: 30px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .comments-view .re-add-comment { + padding: 10px; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .comments-view .re-add-comment .re-comment-input { + border-radius: 20px !important; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .comments-view .re-comment-list .re-comment { + background: colors.$white; + padding: 5px 10px; + margin-bottom: 0; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .comments-view .re-comment-list .re-comment .re-revisor { + color: colors.$green800; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .comments-view .re-comment-list .re-comment .re-revisor2 { + color: colors.$purple500; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .comments-view .re-comment-list .re-comment .re-translator { + color: colors.$blue500; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .comments-view .re-comment-list .re-comment .re-comment-date { + color: lightslategray; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .comments-view .re-comment-list .re-comment .re-selected-text { + color: colors.$black; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .comments-view .re-comment-list .re-highlighted { + padding: 10px; + border-bottom: 1px solid colors.$grey600; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .comments-view .re-comment-list span.re-selected-text { + margin-right: 5px; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .re-severities-buttons button { + cursor: pointer; + font-size: 12px; + border: 1px solid rgba(34, 36, 38, 0.15); + border-right: none; + border-radius: 0; + background: colors.$white; + color: rgba(0, 0, 0, 0.6); + outline: none; + font-weight: bold; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .re-severities-buttons button:first-child { + border-radius: 4px 0 0 4px; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .re-severities-buttons button:last-child { + border-right: 1px solid rgba(34, 36, 38, 0.15); + border-radius: 0 4px 4px 0; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .re-severities-buttons button:only-child { + border-radius: 3px; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item .re-severities-buttons { + display: none; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.severity-buttons:hover .re-severities-buttons, +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.active .re-severities-buttons { + display: flex; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.severity-buttons:hover .re-severities-buttons button, +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.active .re-severities-buttons button { + padding: 4px 8px; + background-color: colors.$grey50; +} + +@media only screen and (max-width: 1450px) { + .review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.severity-buttons:hover .re-severities-buttons button, + .review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.active .re-severities-buttons button { + padding: 7px 7px; + } +} + +@media only screen and (max-width: 1260px) { + .review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.severity-buttons:hover .re-severities-buttons button, + .review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.active .re-severities-buttons button { + padding: 7px 5px; } } + +@media only screen and (max-width: 1140px) { + .review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.severity-buttons:hover .re-severities-buttons button, + .review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.active .re-severities-buttons button { + padding: 7px 3px; + } +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.severity-buttons:hover .re-severities-buttons button:hover, +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.severity-buttons:hover .re-severities-buttons button.active, +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.active .re-severities-buttons button:hover, +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.active .re-severities-buttons button.active { + background-color: colors.$grey200; +} + +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.severity-buttons:hover .error-name, +.review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.active .error-name { + padding-right: 10px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +@media only screen and (max-width: 1260px) { + .review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.severity-buttons:hover .error-name, + .review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.active .error-name { + max-width: 55% !important; + } +} + +@media only screen and (max-width: 1024px) { + .review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.severity-buttons:hover .error-name, + .review-balloon-container .re-wrapper .re-issues-box .re-list .re-item.active .error-name { + max-width: 53% !important; + } +} + +.review-balloon-container .re-wrapper .re-issues-box.re-issues-box-empty { + display: none; +} + +.review-balloon-container .re-wrapper .re-item.issue-comments-open { + transition: 0.3s ease; + background: colors.$grey50; +} + +.review-balloon-container .re-wrapper .re-created { + background: colors.$grey150; + padding: 10px 10px 10px; + margin-bottom: 0; +} + +.review-balloon-container .re-wrapper .re-created .issues .re-item-issue-value { + background: colors.$white; +} + +.review-balloon-container .re-wrapper .re-to-create { + background: colors.$white; +} + +.review-balloon-container .re-wrapper .re-to-create .errors { + max-height: 450px; +} + article { &.comment-opened-0 { margin-top: 270px; } + &.comment-opened-1 { margin-top: 180px; } + &.comment-opened-2 { margin-top: 120px; } + &.comment-opened-empty-0 { margin-top: 110px; } } .re-abb-issue { - background: #e5e9f1; + background: colors.$grey100; padding: 0 4px; margin-right: 5px; - color: black; + color: colors.$black; width: fit-content; height: fit-content; min-width: 25px; text-align: center; } - +.re-close-balloon { + position: absolute !important; + right: 0; +} .re-open-view.re-issues { top: 0px; - border-top: 12px solid #fff; + border-top: 12px solid colors.$white; border-left: 14px solid transparent; filter: drop-shadow(-1px 0px 1px rgba(0, 0, 0, 0.2)); margin-left: -14px; position: absolute; + &.error { border-top: 12px solid variables.$notification-error; } + &.warning { - border-top: 12px solid #ffeb3b; + border-top: 12px solid colors.$orange200; } } .re-wrapper.thereAreIssues .re-open-view.re-issues { top: -1px; - border-top: 12px solid colors.$grey3; -} - -section { - &.editAreaLocked.opened { - .outersource .copy { - display: none; - } - .segment-text-area-container { - position: relative !important; - width: 100% !important; - float: right !important; - .textarea-container { - padding: 0 5px; - font-size: 18px; - margin: 3px 0 2px; - } - } - .buttons { - .left { - float: left; - } - - .right { - float: right; - } - } - } - &.editAreaLocked .errorTaggingArea { - line-height: 27px; - padding: 4px 0 0 0; - } - .errorTaggingArea, - .editableTarget, - .trackChanges { - font-family: 'calibri', Arial, Helvetica, sans-serif; - padding: 3px; - line-height: 27px; - padding: 4px 0 0 0; - } + border-top: 12px solid colors.$grey150; +} - .errorTaggingArea { - .highlight { - background-color: #7eb30c; - } - } +section.editAreaLocked.opened .outersource .copy { + display: none; +} - .errorTaggingArea::selection { - background-color: #ffeb3b; - } +section.editAreaLocked.opened .segment-text-area-container { + position: relative !important; + width: 100% !important; + float: right !important; +} - .translation-issues-button { - cursor: pointer; - position: relative; - } +section.editAreaLocked.opened .segment-text-area-container .textarea-container { + padding: 0 5px; + font-size: 18px; + margin: 3px 0 2px; +} - .revise-button { - position: relative; - background-color: colors.$black100; - display: flex; - padding: 3px; - justify-content: center; - align-items: center; - gap: 6px; - align-self: stretch; - cursor: pointer; - border-radius: 8px; - width: 18px; - height: 18px; - margin-left: 8px; - } +section.editAreaLocked.opened .buttons .left { + float: left; +} - .translation-issues-button .revise-button { - display: block; - position: relative; - &.no-object { - display: none; - } - } +section.editAreaLocked.opened .buttons .right { + float: right; +} - &:hover .translation-issues-button .revise-button, - .translation-issues-button:hover .revise-button, - .segment-side-buttons:hover - .translation-issues-button - .revise-button.no-object { - display: block !important; - } +section.editAreaLocked .errorTaggingArea { + line-height: 27px; + padding: 4px 0 0 0; +} + +section .errorTaggingArea, +section .editableTarget, +section .trackChanges { + font-family: 'calibri', Arial, Helvetica, sans-serif; + padding: 3px; + line-height: 27px; + padding: 4px 0 0 0; +} + +section .errorTaggingArea .highlight { + background-color: colors.$green700; +} + +section .errorTaggingArea::selection { + background-color: colors.$orange200; +} + +section .translation-issues-button { + cursor: pointer; + position: relative; +} + +section .revise-button { + position: relative; + background-color: colors.$black100; + display: flex; + padding: 3px; + justify-content: center; + align-items: center; + gap: 6px; + align-self: stretch; + cursor: pointer; + border-radius: variables.$border-radius-default; + width: 18px; + height: 18px; + margin-left: 8px; +} + +section .translation-issues-button .revise-button { + display: block; + position: relative; - .revise-button-2 { - background: colors.$approved2Green; + &.no-object { + display: none; } } +section:hover .translation-issues-button .revise-button, +section .translation-issues-button:hover .revise-button, +section .segment-side-buttons:hover .translation-issues-button .revise-button.no-object { + display: block !important; +} + +section .revise-button-2 { + background: colors.$purple500; +} + .undo-issue-deleted { cursor: pointer; } .editing-highlight { - background-color: colors.$grey5 !important; + background-color: colors.$grey50 !important; } .editing-backward-container { @@ -375,59 +433,58 @@ section { .issue-panel-edit-mode { padding: 10px; +} - .re-issues-box { - border: 2px solid white; - } +.issue-panel-edit-mode .re-issues-box { + border: 2px solid colors.$white; } + //*******************************************************/ //Download Button .downloadtr-button.approved-2ndpass { - background: colors.$approved2Green; - color: #fff !important; + background: colors.$purple500; + color: colors.$white !important; } .severities-dropdown-trigger { width: 24px !important; height: 30px !important; +} - > * { - margin: 0 !important; - } +.severities-dropdown-trigger > * { + margin: 0 !important; } -.review-extended-issues-tab-group { - .tabs-container { - display: flex; - position: absolute; - top: 10px; - z-index: 1; - } +.review-extended-issues-tab-group .tabs-container { + display: flex; + position: absolute; + top: 10px; + z-index: 1; +} + +.review-extended-issues-tab-group .tab { + display: flex; + align-items: center; + height: 42px; + font-size: 14px; + color: colors.$black; + padding: 0 15px; + cursor: pointer; - .tab { - display: flex; - align-items: center; - height: 42px; - font-size: 14px; - color: black; - padding: 0 15px; - cursor: pointer; - - &.active { - background-color: white; - border-radius: 4px 4px 0 0; - border-bottom: unset; - font-weight: bold; - } - - &.disabled { - opacity: 0.6; - pointer-events: none; - } + &.active { + background-color: colors.$white; + border-radius: 4px 4px 0 0; + border-bottom: unset; + font-weight: bold; } - .tab-content { - margin-top: 41px; + &.disabled { + opacity: 0.6; + pointer-events: none; } } + +.review-extended-issues-tab-group .tab-content { + margin-top: 41px; +} diff --git a/public/css/sass/components/SegmentsContainer.scss b/public/css/sass/components/SegmentsContainer.scss index ef7596cc5b..c87850fc47 100644 --- a/public/css/sass/components/SegmentsContainer.scss +++ b/public/css/sass/components/SegmentsContainer.scss @@ -1,4 +1,5 @@ -@use '../commons/colors'; +@use '../tokens/colors'; +@use '../commons/variables'; .virtual-list { width: 100%; height: 100%; @@ -11,7 +12,7 @@ height: auto; section.editor { - border: 1px solid colors.$grey2; + border: 1px solid colors.$grey300; } } @@ -24,13 +25,13 @@ .row-border-radius-top { section { - border-top-left-radius: 8px; - border-top-right-radius: 8px; - border-top-color: colors.$grey2 !important; + border-top-left-radius: variables.$border-radius-default; + border-top-right-radius: variables.$border-radius-default; + border-top-color: colors.$grey300 !important; .body { - border-top-left-radius: 8px; - border-top-right-radius: 8px; + border-top-left-radius: variables.$border-radius-default; + border-top-right-radius: variables.$border-radius-default; overflow: hidden; } } @@ -42,27 +43,25 @@ .row-border-radius-bottom { section { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; + border-bottom-left-radius: variables.$border-radius-default; + border-bottom-right-radius: variables.$border-radius-default; &.editor { - .footer { - .tab { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - } + .footer .tab { + border-bottom-left-radius: variables.$border-radius-default; + border-bottom-right-radius: variables.$border-radius-default; } } } section.opened { - margin-bottom: 8px; + margin-bottom: variables.$border-radius-default; } section:not(.editor) { .body { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; + border-bottom-left-radius: variables.$border-radius-default; + border-bottom-right-radius: variables.$border-radius-default; overflow: hidden; } } @@ -75,7 +74,7 @@ > :not(:first-child) > div > :first-child:not(.editor) { - border-top-color: colors.$grey3; + border-top-color: colors.$grey150; } .sticky-project-bar { @@ -84,7 +83,7 @@ z-index: 2; width: 100%; padding-left: 5%; - background-color: colors.$grey5; + background-color: colors.$grey50; &.sticky-project-bar-compressed { padding-top: 10px; diff --git a/public/css/sass/components/UploadFile.scss b/public/css/sass/components/UploadFile.scss index 8c09c93aae..a34c2cae9b 100644 --- a/public/css/sass/components/UploadFile.scss +++ b/public/css/sass/components/UploadFile.scss @@ -1,6 +1,6 @@ -@use '../commons/colors'; -.upload-files-container { - border: 1px dashed #ccc; +@use '../tokens/colors'; +.upload-files-container, .upload-box-not-logged, .upload-waiting-logged { + border: 1px dashed colors.$grey200; min-height: 200px; border-radius: 4px; padding: 24px; @@ -16,7 +16,7 @@ align-items: flex-start; } &.isDragging { - background-color: colors.$grey7; + background-color: colors.$grey400; } .upload-files-start { display: flex; @@ -32,7 +32,7 @@ } span { font-size: 24px; - color: colors.$grey1 + color: colors.$grey500 } } .upload-files-list { @@ -44,7 +44,7 @@ grid-template-columns: 2fr 1fr 24px; align-items: center; padding: 8px; - border-bottom: 1px dashed #ccc; + border-bottom: 1px dashed colors.$grey200; &.zip-folder { padding-left: 40px; } @@ -57,21 +57,14 @@ font-size: 16px; max-width: 80%; } - .file-icon { - height: 30px; - min-width: 30px; - display: block; - background-size: 25px !important; - margin-bottom: 4px; - } .file-item-error { - color: colors.$redDefault; + color: colors.$red500; } .file-item-warning { - color: colors.$orangeDefault; + color: colors.$orange200; } .file-item-success { - color: colors.$greenDefault; + color: colors.$green500; } .file-item-info { display:flex; @@ -83,10 +76,10 @@ } .importing-progress { .progress { - background-color: colors.$approvedGreen; + background-color: colors.$green800; } .progress-wrapper { - background-color: rgba(colors.$approvedGreen, 0.24); + background-color: rgba(colors.$green800, 0.24); } } } diff --git a/public/css/sass/components/UserProjectDropdown.scss b/public/css/sass/components/UserProjectDropdown.scss index 85dc7df5ea..47345793b1 100644 --- a/public/css/sass/components/UserProjectDropdown.scss +++ b/public/css/sass/components/UserProjectDropdown.scss @@ -1,102 +1,106 @@ -@use '../commons/colors'; +@use '../tokens/colors'; -.user-project-dropdown-container { +.user-project-dropdown-trigger { position: relative; + padding: 10px 10px 10px 1px !important; + transition-property: + color, background-color, box-shadow, opacity, padding !important; + background-color: colors.$grey100 !important; + border: 1px solid colors.$grey200 !important; + + &:disabled { + color: colors.$grey400 !important; + } - .dropdown { - position: absolute; - visibility: hidden; - z-index: 1; - background-color: white; - margin-top: 5px; - padding: 5px; - min-width: 250px; - right: 0; - max-height: 450px; - overflow: auto; - opacity: 0; - transition: opacity 0.2s linear; - box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); - - &.open { - visibility: visible; - opacity: 1; + &.not-assignee { + box-shadow: unset !important; + background-color: transparent !important; + border: 1px solid colors.$grey400; + + &:hover { + border-color: colors.$blue500; + color: colors.$blue500 !important; } - ul { - padding: 0; - margin: 0; - list-style: none; + > span { display: flex; - flex-direction: column; - - > li { - display: flex; - align-items: center; - gap: 5px; - cursor: pointer; - padding: 10px; - - &:hover { - background-color: colors.$grey9; - } - - &.active { - background-color: colors.$darkBlueHover; - color: colors.$white; - } - } + align-items: center; + gap: 10px; + padding: 0 10px; } } - .trigger-button { - position: relative; - padding: 10px 10px 10px 1px !important; - transition: padding 0.2s ease-out; + &:hover:not(:disabled):not(.not-assignee) { + padding-right: 32px !important; - &.not-assignee { - box-shadow: unset !important; - background-color: transparent !important; - border: 1px solid colors.$grey7; + .button-remove-assignee { + opacity: 1; + } + } +} - &:hover { - border-color: colors.$translatedBlue; - color: colors.$translatedBlue !important; - } +.button-remove-assignee { + position: absolute; + right: 3px; + display: flex; + width: 24px; + height: 24px; + justify-content: center; + align-items: center; + background-color: rgba(colors.$grey400, 0.5); + border-radius: 50%; + color: colors.$white; + transition: opacity 0.2s ease-in-out; + opacity: 0; + + &:hover { + background-color: rgba(colors.$grey400, 0.7); + } +} - > span { - display: flex; - align-items: center; - gap: 10px; - padding: 0 10px; - } - } +.user-project-dropdown-content { + background-color: white; + padding: 5px; + min-width: 250px; + max-height: 450px; + overflow: auto; + box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); + + ul { + padding: 0; + margin: 0; + list-style: none; + display: flex; + flex-direction: column; - &:disabled { - box-shadow: unset !important; - border: 1px solid colors.$grey8; - //color: $grey6 !important; - } + > li { + display: flex; + align-items: center; + gap: 5px; + cursor: pointer; + padding: 10px; - &:hover:not(:disabled):not(.not-assignee) { - padding-right: 32px !important; + &:hover { + background-color: colors.$grey75; + } - .button-remove-assignee { - visibility: visible; + &.active { + background-color: colors.$blue950; + color: colors.$white; } } } .add-new-member { - border-bottom: 1px solid colors.$grey8; + border-bottom: 1px solid colors.$grey200; margin-bottom: 10px; text-transform: uppercase; - color: colors.$translatedBlue; + color: colors.$blue500; font-weight: bold; justify-content: space-between; > svg { - border: 1px solid colors.$translatedBlue; + border: 1px solid colors.$blue500; border-radius: 50%; } } @@ -108,7 +112,7 @@ background-color: unset !important; } - .input-component { + div[class*="input-component"] { width: 100%; input { @@ -120,24 +124,6 @@ .no-results { text-align: center; - color: #9e9e9e; - } - - .button-remove-assignee { - visibility: hidden; - position: absolute; - right: 3px; - display: flex; - width: 24px; - height: 24px; - justify-content: center; - align-items: center; - background-color: rgba(colors.$grey7, 0.5); - border-radius: 50%; - color: colors.$white; - - &:hover { - background-color: rgba(colors.$grey7, 0.7); - } + color: colors.$grey400; } } diff --git a/public/css/sass/components/bulk-approve-bar/bulk_approve_bar.scss b/public/css/sass/components/bulk-approve-bar/bulk_approve_bar.scss index 696c174343..c34de8e400 100644 --- a/public/css/sass/components/bulk-approve-bar/bulk_approve_bar.scss +++ b/public/css/sass/components/bulk-approve-bar/bulk_approve_bar.scss @@ -1,8 +1,10 @@ -@use "../../commons/colors"; +@use '../../tokens/colors'; .bulk-approve-bar { + display: flex; + justify-content: space-between; position: relative; z-index: 2; - background: #edf4fd; + background: colors.$blue50; padding: 8px 10px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.43); float: left; @@ -18,21 +20,10 @@ vertical-align: middle; } .bulk-back-info { + display: flex; + align-items: center; width: 50%; text-align: left; - .bulk-back { - .back-bulk { - background: transparent; - padding: 0; - margin-left: 6px; - position: relative; - top: 2px; - i { - position: relative; - top: 1px; - } - } - } .bulk-info { padding-left: 53px; font-size: 18px; @@ -41,33 +32,22 @@ } } .bulk-activity-icons { + display: flex; + justify-content: end; width: 50%; text-align: right; padding-right: 6.3%; .approve-all-segments { - line-height: 18px; - background: transparent; - font-weight: 100; - padding: 6px 10px; - border-radius: 2px; - transition: 0.3s ease; - width: auto; - vertical-align: bottom; - margin-right: 0; - &:hover { - box-shadow: 0 0 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), - 0 2px 4px rgba(0, 0, 0, 0.24) !important; - } &.translated-all-bulked { - border: 1px solid colors.$translatedBlue; - color: colors.$translatedBlue; + border: 1px solid colors.$blue500; + color: colors.$blue500; } &.approved-all-bulked { - border: 1px solid colors.$approvedGreen; - color: colors.$approvedGreen; + border: 1px solid colors.$green800; + color: colors.$green800; &.approved-2nd-pass { - border: 1px solid colors.$approved2Green; - color: colors.$approved2Green; + border: 1px solid colors.$purple500; + color: colors.$purple500; } } i { @@ -81,6 +61,14 @@ } } } + .mark-button { + > :first-child { + display: flex; + border-radius: 50%; + border: 2px colors.$blue500 solid; + padding: 2px; + } + } .label-filters { display: inline-block; &.labl { diff --git a/public/css/sass/components/common/Accordion.scss b/public/css/sass/components/common/Accordion.scss deleted file mode 100644 index d5f176feec..0000000000 --- a/public/css/sass/components/common/Accordion.scss +++ /dev/null @@ -1,41 +0,0 @@ -@use '../../commons/colors'; - -.accordion-component { - overflow: hidden; -} - -.accordion-component-title { - display: flex; - justify-content: space-between; - align-items: center; - padding: 14px 24px; - font: 12px; - background-color: colors.$grey3; - border-radius: 8px; - cursor: pointer; - - &.accordion-expanded { - border-radius: 8px 8px 0 0; - } - - > svg { - transition-property: transform; - transition-duration: 0.3s; - transition-timing-function: 'ease-in-out'; - } - - &.accordion-expanded > svg { - transform: rotateZ(180deg); - } -} - -.accordion-component-content { - max-height: 0; - transition-property: max-height; - transition-duration: 0.3s; - transition-timing-function: 'ease-in-out'; - transform-origin: top center; - padding: 0 24px; - border-radius: 0 0 8px 8px; - background-color: colors.$grey4; -} diff --git a/public/css/sass/components/common/Badge.scss b/public/css/sass/components/common/Badge.scss deleted file mode 100644 index b4a2d3e906..0000000000 --- a/public/css/sass/components/common/Badge.scss +++ /dev/null @@ -1,127 +0,0 @@ -@use '../../commons/colors'; - -.badge-container { - display: inline-flex; - align-items: center; - gap: 4px; - margin: 0; - border-radius: 20px; - padding: 0 8px; - height: 24px; - font-size: 14px; - font-weight: 500; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - > svg { - flex-shrink: 0; - } -} - -// Type and Mode modifiers -.badge-black { - &.badge-default { - background-color: rgba(colors.$black, 0.5); - color: colors.$white; - } - - &.badge-full { - background-color: rgba(colors.$black, 0.72); - } - - &.badge-outline { - border: solid 1px colors.$black; - color: colors.$black; - } -} - -.badge-primary { - &.badge-default { - border: solid 1px colors.$translatedBlueTransparent; - background-color: rgba(colors.$translatedBlueTransparent, 0.24); - color: colors.$translatedBlue; - } - - &.badge-full { - background-color: rgba(colors.$translatedBlue, 0.72); - color: colors.$white; - } - - &.badge-outline { - border: solid 1px colors.$translatedBlue; - color: colors.$translatedBlue; - } -} - -.badge-green { - &.badge-default { - border: solid 1px colors.$approvedGreenTransparent; - background-color: rgba(colors.$approvedGreenTransparent, 0.24); - color: colors.$greenDefaultHover; - } - - &.badge-full { - background-color: rgba(colors.$approvedGreen, 0.72); - color: colors.$white; - } - - &.badge-outline { - border: solid 1px colors.$approvedGreen; - color: colors.$greenDefaultHover; - } -} - -.badge-yellow { - &.badge-default { - border: solid 1px colors.$orangeDefaultTransparent; - background-color: rgba(colors.$orangeDefaultTransparent, 0.24); - color: colors.$orangeDefaultHover; - } - - &.badge-full { - background-color: rgba(colors.$orangeDefault, 0.72); - color: colors.$white; - } - - &.badge-outline { - border: solid 1px colors.$orangeDefault; - color: colors.$orangeDefaultHover; - } -} - -.badge-blue { - &.badge-default { - border: solid 1px colors.$linkBlue; - background-color: rgba(colors.$linkBlue, 0.24); - color: colors.$linkBlue; - } - - &.badge-full { - background-color: rgba(colors.$linkBlue, 0.72); - color: colors.$white; - } - - &.badge-outline { - border: solid 1px colors.$linkBlue; - color: colors.$linkBlue; - } -} - -.badge-red { - &.badge-default { - border: solid 1px colors.$redDefault; - background-color: rgba(colors.$redDefault, 0.24); - color: colors.$redDefault; - } - - &.badge-full { - background-color: rgba(colors.$redDefault, 0.72); - color: colors.$white; - } - - &.badge-outline { - border: solid 1px colors.$redDefault; - color: colors.$redDefault; - } -} diff --git a/public/css/sass/components/common/Button.scss b/public/css/sass/components/common/Button.scss deleted file mode 100644 index 589abda59a..0000000000 --- a/public/css/sass/components/common/Button.scss +++ /dev/null @@ -1,294 +0,0 @@ -@use '../../commons/colors'; - -button.button-component-container, -a.button-component-container { - appearance: none; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - border: none; - background-color: transparent; - text-decoration: none; - white-space: nowrap; - cursor: pointer; - display: flex; - border-radius: 4px; - width: auto; - font-weight: 500; - transition-property: color, background-color, box-shadow, opacity; - transition-duration: 0.3s; - transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); - &:focus { - outline: none; - } - - &:disabled { - cursor: not-allowed; - } - - svg { - flex-shrink: 0; - pointer-events: none; - } - - // Mode modifiers - &.basic { - background-color: var(--btnBgColor); - color: var(--btnTextColor); - - &:not(:disabled):hover, - &:not(:disabled):focus-visible { - background-color: var(--btnBgColorAlt); - color: var(--btnTextColor); - } - - &:disabled { - background-color: var(--btnBgColorSemitransAlt); - color: var(--btnTextColorDisabled); - - svg { - color: var(--btnTextColorDisabled); - } - } - } - &.outline { - box-shadow: inset 0 0 0 1px var(--btnBorderColor); - color: var(--btnAltTextColor); - - &:not(:disabled).button--active { - box-shadow: inset 0 0 0 1px var(--btnBorderColorActive); - background-color: var(--btnBgColorSemitransAlt); - } - - &:not(:disabled):hover, - &:not(:disabled):focus-visible { - box-shadow: inset 0 0 0 1px var(--btnBorderColorHover); - background-color: var(--btnBgColorSemitrans); - color: var(--btnAltTextColorHover); - } - - &:disabled { - box-shadow: inset 0 0 0 1px var(--btnBorderColorDisabled); - color: var(--btnAltTextColorDisabled); - - svg { - color: var(--btnAltTextColorDisabled); - } - } - } - &.ghost { - color: var(--btnAltTextColor); - - &:not(:disabled).button--active, - &:not(:disabled).button--active:hover { - background-color: var(--btnBgColorSemitransAlt); - color: var(--btnAltTextColor); - } - - &:not(:disabled):hover, - &:not(:disabled):focus-visible { - background-color: var(--btnBgColorSemitrans); - color: var(--btnAltTextColor); - } - - &:disabled { - color: var(--btnAltTextColorDisabled); - } - } - &.link { - color: var(--btnAltTextColor); - - &:not(:disabled).button--active { - color: colors.$grey8; - } - - &:not(:disabled):hover, - &:not(:disabled):focus-visible { - color: colors.$black; - } - - &:disabled { - color: var(--btnAltTextColorDisabled); - } - } - - // Size modifiers - &.small { - height: 28px; - padding: 0 10px; - font-size: 12px; - font-weight: 500; - } - &.standard { - height: 40px; - padding: 0 16px; - line-height: 40px; - font-size: 14px; - font-weight: bold; - } - &.medium { - height: 40px; - padding: 0 16px; - line-height: 40px; - font-size: 16px; - font-weight: bold; - } - &.big { - height: 48px; - padding: 0 24px; - line-height: 48px; - font-size: 18px; - font-weight: bold; - } - &.iconSmall { - width: 24px; - height: 24px; - line-height: 24px; - font-size: 12px; - } - &.iconStandard { - width: 40px; - height: 40px; - line-height: 40px; - font-size: 14px; - } - &.iconBig { - width: 48px; - height: 48px; - line-height: 48px; - font-size: 16px; - } - &.fullWidth { - width: 100%; - } - &.linkSmall { - height: auto; - font-size: 14px; - } - &.linkMedium { - height: auto; - font-size: 16px; - } - &.linkBig { - height: auto; - font-size: 18px; - } - - // Waiting state - .hiddenContent { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - white-space: nowrap; - visibility: hidden; - } - &.waiting .spinner { - position: absolute; - } -} - -// Type modifiers -.default { - --btnTextColor: #{colors.$grey6}; - --btnTextColorDisabled: #{colors.$grey8}; - --btnAltTextColor: #{colors.$grey6}; - --btnAltTextColorHover: #{colors.$grey}; - --btnAltTextColorDisabled: #{rgba(colors.$white, 0.12)}; - - --btnBorderColor: #{colors.$grey8}; - --btnBorderColorHover: #{colors.$grey6}; - --btnBorderColorActive: #{colors.$grey6}; - --btnBorderColorDisabled: #{rgba(colors.$white, 0.12)}; - - --btnBgColor: #{colors.$white}; - --btnBgColorAlt: #{colors.$grey9}; - --btnBgColorSemitrans: #{rgba(colors.$white, 0.5)}; - --btnBgColorSemitransAlt: #{rgba(colors.$white, 0.5)}; -} -.primary { - --btnTextColor: #{colors.$white}; - --btnTextColorDisabled: #{colors.$white}; - --btnAltTextColor: #{colors.$translatedBlue}; - --btnAltTextColorHover: #{colors.$translatedBlueHover}; - --btnAltTextColorDisabled: #{rgba(colors.$translatedBlue, 0.24)}; - - --btnBorderColor: #{rgba(colors.$translatedBlue, 0.24)}; - --btnBorderColorHover: #{colors.$translatedBlueHover}; - --btnBorderColorActive: #{colors.$translatedBlue}; - --btnBorderColorDisabled: #{rgba(colors.$translatedBlue, 0.24)}; - - --btnBgColor: #{colors.$translatedBlue}; - --btnBgColorAlt: #{colors.$translatedBlueHover}; - --btnBgColorSemitrans: #{rgba(colors.$translatedBlue, 0.12)}; - --btnBgColorSemitransAlt: #{rgba(colors.$translatedBlue, 0.24)}; -} -.info { - --btnTextColor: #{colors.$white}; - --btnTextColorDisabled: #{colors.$white}; - --btnAltTextColor: #{colors.$linkBlue}; - --btnAltTextColorHover: #{colors.$linkBlueHover}; - --btnAltTextColorDisabled: #{rgba(colors.$linkBlue, 0.24)}; - - --btnBorderColor: #{rgba(colors.$linkBlue, 0.24)}; - --btnBorderColorHover: #{colors.$linkBlue}; - --btnBorderColorActive: #{colors.$linkBlue}; - --btnBorderColorDisabled: #{rgba(colors.$linkBlue, 0.24)}; - - --btnBgColor: #{colors.$linkBlue}; - --btnBgColorAlt: #{colors.$linkBlueHover}; - --btnBgColorSemitrans: #{rgba(colors.$linkBlue, 0.12)}; - --btnBgColorSemitransAlt: #{rgba(colors.$linkBlue, 0.24)}; -} -.success { - --btnTextColor: #{colors.$white}; - --btnTextColorDisabled: #{colors.$white}; - --btnAltTextColor: #{colors.$greenDefault}; - --btnAltTextColorHover: #{colors.$greenDefaultHover}; - --btnAltTextColorDisabled: #{rgba(colors.$greenDefault, 0.24)}; - - --btnBorderColor: #{rgba(colors.$greenDefault, 0.24)}; - --btnBorderColorHover: #{colors.$greenDefault}; - --btnBorderColorActive: #{colors.$greenDefault}; - --btnBorderColorDisabled: #{rgba(colors.$greenDefault, 0.24)}; - - --btnBgColor: #{colors.$greenDefault}; - --btnBgColorAlt: #{colors.$greenDefaultHover}; - --btnBgColorSemitrans: #{rgba(colors.$greenDefault, 0.12)}; - --btnBgColorSemitransAlt: #{rgba(colors.$greenDefault, 0.24)}; -} -.warning { - --btnTextColor: #{colors.$white}; - --btnTextColorDisabled: #{colors.$white}; - --btnAltTextColor: #{colors.$warning}; - --btnAltTextColorHover: #{colors.$warningHover}; - --btnAltTextColorDisabled: #{rgba(colors.$warning, 0.24)}; - - --btnBorderColor: #{rgba(colors.$warning, 0.24)}; - --btnBorderColorHover: #{colors.$warning}; - --btnBorderColorActive: #{colors.$warning}; - --btnBorderColorDisabled: #{rgba(colors.$warning, 0.24)}; - - --btnBgColor: #{colors.$warning}; - --btnBgColorAlt: #{colors.$warningHover}; - --btnBgColorSemitrans: #{rgba(colors.$warning, 0.12)}; - --btnBgColorSemitransAlt: #{rgba(colors.$warning, 0.24)}; -} -.critical { - --btnTextColor: #{colors.$white}; - --btnTextColorDisabled: #{colors.$white}; - --btnAltTextColor: #{colors.$redDefault}; - --btnAltTextColorHover: #{colors.$redDefaultHover}; - --btnAltTextColorDisabled: #{rgba(colors.$redDefault, 0.24)}; - - --btnBorderColor: #{rgba(colors.$redDefault, 0.24)}; - --btnBorderColorHover: #{colors.$redDefault}; - --btnBorderColorActive: #{colors.$redDefault}; - --btnBorderColorDisabled: #{rgba(colors.$redDefault, 0.24)}; - - --btnBgColor: #{colors.$redDefault}; - --btnBgColorAlt: #{colors.$redDefaultHover}; - --btnBgColorSemitrans: #{rgba(colors.$redDefault, 0.12)}; - --btnBgColorSemitransAlt: #{rgba(colors.$redDefault, 0.24)}; -} diff --git a/public/css/sass/components/common/Dropdown.scss b/public/css/sass/components/common/Dropdown.scss index f577e3634c..a2450b0ee6 100644 --- a/public/css/sass/components/common/Dropdown.scss +++ b/public/css/sass/components/common/Dropdown.scss @@ -1,14 +1,15 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; +@use '../../commons/variables'; // General dropdown .custom-dropdown { position: relative; margin-top: 0px; border-radius: 4px; - box-shadow: 0 0 16px rgba(colors.$grey6, 0.4); + box-shadow: 0 0 16px rgba(colors.$grey700, 0.4); width: 100%; height: auto; - background-color: colors.$grey5; + background-color: colors.$grey50; } /*.custom-dropdown::before { content: ''; @@ -23,7 +24,7 @@ .custom-dropdown::before { border-left: 8px solid transparent; border-right: 8px solid transparent; - border-bottom: 6px solid colors.$grey5; + border-bottom: 6px solid colors.$grey50; } .select__dropdown--setting-position { @@ -42,22 +43,24 @@ } .select__dropdown--is-reversed .custom-dropdown::before { margin-top: auto; - border-top: 6px solid colors.$grey5; + border-top: 6px solid colors.$grey50; border-bottom: none; } // Search bar .dropdown__search-bar { position: relative; - background-color: colors.$grey5; + background-color: colors.$grey50; box-shadow: none; padding: 0; + border-radius: variables.$border-radius-default; + input + svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); - color: colors.$grey; + color: colors.$grey600; cursor: pointer; pointer-events: none; } @@ -68,7 +71,7 @@ .dropdown__search-bar input, .dropdown__search-bar input:hover, .dropdown__search-bar input:focus { - background-color: colors.$grey5; + background-color: colors.$grey50; border: none !important; box-shadow: none; } @@ -77,11 +80,11 @@ } .dropdown__search-bar-input::placeholder { - color: colors.$grey; + color: colors.$grey600; } .dropdown__search-bar-input--highlighted { - background-color: colors.$grey4 !important; + background-color: colors.$grey100 !important; } // Most popular options @@ -104,15 +107,23 @@ } .dropdown__most-popular::before { left: 0; - background-image: linear-gradient(to right, colors.$black, rgba(colors.$black, 0)); + background-image: linear-gradient( + to right, + colors.$black, + rgba(colors.$black, 0) + ); } .dropdown__most-popular::after { right: 0; - background-image: linear-gradient(to right, rgba(colors.$black, 0), colors.$black); + background-image: linear-gradient( + to right, + rgba(colors.$black, 0), + colors.$black + ); } .dropdown__most-popular-option { - color: colors.$translatedBlue; + color: colors.$blue500; cursor: pointer; &:hover, @@ -192,7 +203,7 @@ .code-badge { display: block; text-align: center; - background-color: colors.$grey7; + background-color: colors.$grey400; border-radius: 4px; padding: 2px 4px; color: colors.$white; @@ -200,20 +211,20 @@ white-space: nowrap; font-weight: normal !important; a { - color: colors.$white; + color: colors.$white; } } } .dropdown__option--is-highlighted-option, .dropdown__option:hover { - background-color: colors.$grey4; + background-color: colors.$grey100; } .dropdown__option--is-active-option, .dropdown__option.dropdown__option--is-active-option:hover { - color: colors.$grey6; - background-color: colors.$grey8; + color: colors.$grey700; + background-color: colors.$grey200; svg { opacity: 1; @@ -223,8 +234,8 @@ .dropdown__option--is-no-results-found, .dropdown__option.dropdown__option--is-no-results-found:hover { - color: colors.$grey2; - background-color: colors.$grey5; + color: colors.$grey300; + background-color: colors.$grey50; cursor: default; svg { @@ -312,7 +323,7 @@ align-items: center; height: 72px; padding: 0 40px; - box-shadow: inset 0 1px 0 0 colors.$grey6; + box-shadow: inset 0 1px 0 0 colors.$grey700; } .dropdown__footer-copy { diff --git a/public/css/sass/components/common/HomePageSection.scss b/public/css/sass/components/common/HomePageSection.scss index 8541f2adb2..6102df5a0b 100644 --- a/public/css/sass/components/common/HomePageSection.scss +++ b/public/css/sass/components/common/HomePageSection.scss @@ -1,11 +1,11 @@ -@use "../../commons/colors"; +@use "../../tokens/colors"; .home-page-section { .layout-bottom { height: 260px; padding: 48px 0; display: flex; flex-direction: column; - background-color: colors.$darkBlue; + background-color: colors.$blue900; align-items: center; gap: 8px; h3 { @@ -27,12 +27,8 @@ } } } -.layout-container { - position: relative; +.layout__container { z-index: 2; - margin-left: auto; - margin-right: auto; - width: 100%; display: flex; flex-direction: column; h1 { @@ -55,61 +51,58 @@ display: flex; gap: 16px; align-items: center; - h3 { - margin-top: 0; - font-size: 28px; - line-height: 32px; - color: #333; - } - img { - width: 64px; - height: 64px; - } } p { font-size: 18px; line-height: 24px; - color: colors.$grey6; + color: colors.$grey700; + } + } + .content-box .content-box_header { + h3 { + margin-top: 0; + font-size: 28px; + line-height: 32px; + color: colors.$grey1300; + } + img { + width: 64px; + height: 64px; } } } } @media (max-width: 829px) { - .layout-container { - max-width: 382px; + .layout__container { .layout-grid { grid-template-columns: 1fr; } } } @media (min-width: 830px) { - .layout-container { - max-width: 766px; + .layout__container { .layout-grid { grid-template-columns: 1fr 1fr; } } } @media (min-width: 1024px) { - .layout-container { - max-width: 928px; + .layout__container { .layout-grid { grid-template-columns: 1fr 1fr; } } } @media (min-width: 1280px) { - .layout-container { - max-width: 1080px; + .layout__container { .layout-grid { grid-template-columns: 1fr 1fr; } } } @media (min-width: 1440px) { - .layout-container { - max-width: 1280px; + .layout__container { .layout-grid { grid-template-columns: 1fr 1fr 1fr; } diff --git a/public/css/sass/components/common/MenuButton.scss b/public/css/sass/components/common/MenuButton.scss deleted file mode 100644 index 44f73d1ee0..0000000000 --- a/public/css/sass/components/common/MenuButton.scss +++ /dev/null @@ -1,110 +0,0 @@ -@use '../../commons/colors'; - -.menu-button { - display: flex; - justify-content: center; - font-size: 16px; -} - -.menu-button-wrapper { - display: flex; - cursor: pointer; - - button { - cursor: pointer; - } - - > button { - color: colors.$black; - background: colors.$grey4; - padding: 4px 8px; - text-align: center; - border: 1px solid colors.$grey7; - } - - .label { - border-radius: 2px 0 0 2px; - - &:hover { - background-color: colors.$grey5; - } - } - - .icon { - display: flex; - align-items: center; - border-radius: 0 2px 2px 0; - border-left: 0; - padding: 0 2px; - - &:hover { - color: colors.$grey7; - } - } -} - -.menu-button-items { - position: absolute; - z-index: 20; - display: flex; - flex-direction: column; - box-shadow: - 0 0 0 #e0e0e0, - 0 0 2px rgba(0, 0, 0, 0.12), - 0 2px 4px rgba(0, 0, 0, 0.24); - padding: 8px; - background-color: colors.$white; - margin-top: 10px; - - > :not(:last-child) { - border-bottom: solid 1px colors.$grey4; - } -} - -.menu-button-items-rect-arrow { - &::before { - content: ''; - border-left: 8px solid transparent; - border-right: 0px solid transparent; - border-bottom: 8px solid #ffffff; - bottom: 100%; - left: auto; - right: 0; - position: absolute; - } -} - -.menu-button-items-reversed { - transform: translateY(calc((100% + 4px) * -1)); - margin-top: 0px; - &::after { - content: ''; - border-left: 8px solid transparent; - border-right: 0px solid transparent; - border-top: 8px solid #ffffff; - top: 100%; - right: 0; - left: auto; - position: absolute; - } - &::before { - visibility: hidden; - } -} - -.menu-button-item { - display: flex; - align-items: center; - gap: 5px; - border: none; - padding: 8px; - text-align: left; - font-size: 16px; - background-color: unset; - cursor: pointer; - - &:not(:disabled):hover { - background-color: colors.$grey9; - color: colors.$translatedBlue; - } -} diff --git a/public/css/sass/components/common/NumericStepper.scss b/public/css/sass/components/common/NumericStepper.scss deleted file mode 100644 index 9e6e0b2f01..0000000000 --- a/public/css/sass/components/common/NumericStepper.scss +++ /dev/null @@ -1,37 +0,0 @@ -@use '../../commons/colors'; - -.numeric-stepper-component { - display: flex; - max-width: 70px; - height: 28px; - - input { - width: 100%; - height: 100%; - outline: none; - border: 1px solid colors.$grey8; - text-align: center; - } - - .container-controls { - display: flex; - flex-direction: column; - - button { - height: 14px !important; - line-height: 1 !important; - padding: 0 !important; - background: colors.$grey4 !important; - border: 1px solid colors.$grey7 !important; - border-radius: 0 !important; - - &:hover { - background-color: colors.$grey5 !important; - } - } - - button:first-child { - transform: rotate(180deg); - } - } -} diff --git a/public/css/sass/components/common/SegmentedControl.scss b/public/css/sass/components/common/SegmentedControl.scss deleted file mode 100644 index 93ca582321..0000000000 --- a/public/css/sass/components/common/SegmentedControl.scss +++ /dev/null @@ -1,81 +0,0 @@ -@use '../../commons/colors'; - -.segmented-control__wrapper > label { - display: block; - margin-bottom: 8px; - cursor: default; -} - -.segmented-control { - position: relative; - display: flex; - user-select: none; - border-radius: 4px; - background-color: colors.$grey5; - - &--auto-width { - display: inline-flex; - } -} - -.segmented-control__option { - .segmented-control--auto-width & { - flex: 0 0 auto; - } -} - -.segmented-control__label { - position: relative; - z-index: 2; - display: flex; - align-items: center; - justify-content: center; - margin: 0; - font-size: 16px; - line-height: 48px; - color: colors.$grey1; - transition: color 0.3s cubic-bezier(0.77, 0, 0.175, 1); - cursor: pointer; - - .segmented-control--auto-width & { - padding: 0 16px; - white-space: nowrap; - } - - .segmented-control--compact & { - line-height: 40px; - } - - .segmented-control--single & { - cursor: default; - } - - &:hover { - color: colors.$grey6; - } -} - -.segmented-control input { - display: none; -} -.segmented-control input:checked + .segmented-control__label { - color: white; -} - -.segmented-control__cursor { - position: absolute; - top: 0; - bottom: 0; - left: 0; - z-index: 1; - padding: 4px; - box-sizing: border-box; - transition: transform 0.2s ease-out, width 0.2s ease-out; -} -.segmented-control__cursor:before { - content: ''; - display: block; - height: 100%; - border-radius: 4px; - background-color: colors.$translatedBlue; -} diff --git a/public/css/sass/components/common/Select.scss b/public/css/sass/components/common/Select.scss index c649f363d6..e6ce732b66 100644 --- a/public/css/sass/components/common/Select.scss +++ b/public/css/sass/components/common/Select.scss @@ -1,4 +1,6 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; +@use '../../commons/variables'; + //selects .select { user-select: none; @@ -48,8 +50,8 @@ .select { margin: 0; - border: 1px solid colors.$grey2; - border-radius: 2px; + border: 1px solid colors.$grey300; + border-radius: variables.$border-radius-default; padding: 4px 8px; outline: none; font-size: 14px; @@ -57,13 +59,11 @@ width: 100%; background-color: colors.$white; white-space: nowrap; - color: colors.$grey6; + color: colors.$grey700; transition: box-shadow 0.3s cubic-bezier(0.77, 0, 0.175, 1); - overflow: hidden; - text-overflow: ellipsis; display: block; &::placeholder { - color: colors.$grey1; + color: colors.$grey500; opacity: 1; } .icon-reset { @@ -71,6 +71,11 @@ align-items: center; height: 100%; } + > span { + overflow: hidden; + text-overflow: ellipsis; + display: block; + } } .select--is-focused { @@ -80,7 +85,7 @@ .select--is-invalid, .select--is-invalid:hover, .select--is-invalid:focus { - box-shadow: inset 0 0 0 2px colors.$redDefault !important; + box-shadow: inset 0 0 0 2px colors.$red500 !important; } .select-with-icon__wrapper { @@ -99,7 +104,7 @@ .select-with-icon__wrapper input + svg { right: 12px; - color: colors.$grey; + color: colors.$grey600; } .input--invisible, @@ -145,23 +150,23 @@ label inset: 0; z-index: 10; padding: 40px; - background-color: rgba(colors.$grey, 0.6); + background-color: rgba(colors.$grey600, 0.6); } // Disabled state .select--is-disabled { - //background-color: colors.$grey6; + //background-color: colors.$grey700; box-shadow: none; - color: colors.$grey7; + color: colors.$grey400; cursor: not-allowed; &::placeholder { - color: colors.$grey7; + color: colors.$grey400; opacity: 1; } & ~ svg { - color: colors.$grey7 !important; + color: colors.$grey400 !important; } } @@ -170,26 +175,27 @@ label z-index: 12; top: 0; } -.select, .select__dropdown-wrapper { - .new-color { - box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.25) inset; - background: #ffffff; - } - .draft-color { - background: colors.$grey1; - } - .translated-color, - .post-edited-color { - background: colors.$translatedBlue; - } - .approved-color { - background: colors.$approvedGreen; - } - .approved-2ndpass-color, .approved2-color { - background: colors.$approved2Green; - } - .rejected-color { - background: colors.$rebuttedRed; - } - +.select, +.select__dropdown-wrapper { + .new-color { + box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.25) inset; + background: colors.$white; + } + .draft-color { + background: colors.$grey500; + } + .translated-color, + .post-edited-color { + background: colors.$blue500; + } + .approved-color { + background: colors.$green800; + } + .approved-2ndpass-color, + .approved2-color { + background: colors.$purple500; + } + .rejected-color { + background: colors.$orange600; + } } diff --git a/public/css/sass/components/common/TeamModal.scss b/public/css/sass/components/common/TeamModal.scss index cd4fe45a0c..74fb583c24 100644 --- a/public/css/sass/components/common/TeamModal.scss +++ b/public/css/sass/components/common/TeamModal.scss @@ -1,11 +1,11 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; .team-modal { display: flex; flex-direction: column; padding: 30px; gap: 30px; - height: 700px; + height: 685px; .team-name-container { align-items: center; @@ -39,7 +39,6 @@ } .button-invite { - display: flex; margin-left: auto; margin-top: 10px; } @@ -52,7 +51,7 @@ border-radius: 4px; padding: 6px; font-size: 15px; - color: #000; + color: colors.$black; transition: 0.6s; > input { @@ -72,7 +71,7 @@ margin-right: 2px; > svg { - color: colors.$grey6; + color: colors.$grey700; } } @@ -87,7 +86,7 @@ .no-result { font-size: 14px; - color: #666666; + color: colors.$grey700; padding: 7px; } @@ -106,10 +105,10 @@ } .removing-user-message { - color: colors.$grey1; + color: colors.$grey500; } - .button-remove { + .remove-user-button { margin-left: auto; } @@ -125,23 +124,6 @@ } } - .confirm-button { - height: 26px; - font-size: 14px !important; - min-width: unset; - gap: 5px !important; - border-radius: unset; - padding: 0 8px; - display: flex; - } - - .close-button { - width: 30px; - padding: 0 !important; - display: flex !important; - justify-content: center !important; - } - .pending-member-remove { display: flex; align-items: center; @@ -149,7 +131,7 @@ margin-left: auto; > span { - color: colors.$grey1; + color: colors.$grey500; font-size: 14px; } } @@ -169,7 +151,7 @@ width: 40px; max-width: 40px; height: 40px; - background-color: colors.$grey2; + background-color: colors.$grey300; border-radius: 50%; vertical-align: middle; text-align: center; @@ -187,13 +169,17 @@ > :not(:first-child) { font-size: 14px; - color: colors.$grey1; + color: colors.$grey500; } } - .button-close { - display: flex; + h5 { + margin-bottom: 10px; + } + + .submit-team-button { margin-left: auto; + width: 80px; } } @@ -202,18 +188,18 @@ height: 40px; padding: 0 10px; border-radius: 4px; - box-shadow: inset 0 1px 3px #ddd; + box-shadow: inset 0 1px 3px colors.$grey200; border: 1px solid rgba(34, 36, 38, 0.15); background-color: white; &:focus { outline: none; - border-color: colors.$linkBlueTransparent; + border-color: colors.$blue300; } } .team-modal-create { - height: 510px; + height: 485px; > p { margin: 0; diff --git a/public/css/sass/components/common/UserDisconnectedBox.scss b/public/css/sass/components/common/UserDisconnectedBox.scss index 29e9816471..26be47a9ec 100644 --- a/public/css/sass/components/common/UserDisconnectedBox.scss +++ b/public/css/sass/components/common/UserDisconnectedBox.scss @@ -1,5 +1,6 @@ -@use "../../commons/colors"; -.user-disconnect-box{ +@use '../../tokens/colors'; +@use '../../commons/variables'; +.user-disconnect-box { position: fixed; top: 0; right: 0; @@ -16,7 +17,7 @@ display: flex; flex-direction: column; margin: 0; - border-radius: 8px; + border-radius: variables.$border-radius-default; width: 100%; background-color: colors.$white; max-width: 500px; @@ -34,4 +35,4 @@ } } } -} \ No newline at end of file +} diff --git a/public/css/sass/components/common/UserMenu.scss b/public/css/sass/components/common/UserMenu.scss index 5fbc4885a2..2ed5c90db1 100644 --- a/public/css/sass/components/common/UserMenu.scss +++ b/public/css/sass/components/common/UserMenu.scss @@ -1,4 +1,4 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; .header-buttons { display: flex; gap: 20px; @@ -10,13 +10,15 @@ color: colors.$white !important; } .header-button-signup { - color: colors.$darkBlue !important; + color: colors.$blue900 !important; } - +} +.user-menu-popover { + line-height: 0; } .user-menu-popover-avatar { - width: 35px; - height: 35px; + width: 40px; + height: 40px; border-radius: 20px; } @@ -26,12 +28,13 @@ padding: 20px 0; gap: 15px; min-width: 250px; + line-height: 1.2; > hr { margin: 0; border: none; height: 1px; - background-color: colors.$grey9; + background-color: colors.$grey75; } .user-info { @@ -84,10 +87,10 @@ width: 100%; display: block; text-decoration: none; - color: colors.$grey6; + color: colors.$grey700; &:hover { - background-color: colors.$grey5 !important; - color: colors.$darkBlue !important; + background-color: colors.$grey50 !important; + color: colors.$blue900 !important; } } } diff --git a/public/css/sass/components/header/FilesMenu.scss b/public/css/sass/components/header/FilesMenu.scss index ae8da1c5f0..f6ac3b05cc 100644 --- a/public/css/sass/components/header/FilesMenu.scss +++ b/public/css/sass/components/header/FilesMenu.scss @@ -1,111 +1,44 @@ -@use "../../commons/colors"; -.breadcrumbs { - display: grid; - grid-template-columns: 25px auto; - padding: 14px 0 4px 0; - position: relative; - .icon-container { - position: relative; +@use "../../tokens/colors"; - span#project-badge { - position: absolute; - left: -10px; - top: -8px; - font-family: Calibri, Arial, Helvetica, sans-serif !important; - color: #fff; - } - } - #pname-container { - margin: 0 10px 0 0; - overflow: hidden; - cursor: pointer; +.files-menu-button { + color: colors.$white !important; + text-decoration: underline !important; + &:hover { + text-decoration: none !important; } - .project-name { - color: #fff; - display: block; - text-decoration: underline; - &:hover { - text-decoration: none; - } + span[class*="filename-label"] span[class*="name"] { + max-width: 200px; } } - -.job-menu-files { - top: 50px; - display: block; - width: 315px; - background: colors.$grey3; - box-shadow: 0px 1px 12px #999; - z-index: 2; - padding: 0; - font-size: 14px; - position: absolute; - border: solid 1px #cdd4de; - .to-current { - background: #fff; - padding: 12px 16px; - cursor: pointer; - display: flex; - border-bottom: 1px solid colors.$grey2; - .icon-iconmoon:before { - color: #acb3bd; - font-size: 16px; - margin-right: 10px; - padding-right: 2px; - font-size: 16px; - content: '\f112'; - transform: rotate(180deg); - display: inline-block; - } - - .current-shortcut { - visibility: hidden; - padding-left: 8px; - } +.files-menu-header { + max-height: 340px; + .current-shortcut { + visibility: hidden; &:hover { - .current-shortcut { - visibility: visible; - } + visibility: visible; } } - .file-list-container { - overflow-y: auto; - max-height: 60vh; - .file-list-label { - padding: 6px 16px; - display: block; + .selected { + background: colors.$blue900; + color: colors.$white; + } + .dropdownmenu-item { + display: flex; + align-items: center; + justify-content: space-between; + &:first-child { + justify-content: flex-start; } - .file-list-item { - padding: 4px 6px; + > div { display: flex; align-items: center; - cursor: pointer; - .file-icon { - height: 33px; - padding: 5px; - margin: 0 8px 0 0; - width: 30px; - float: left; - background-size: 25px !important; - } - .file-name { - display: block; - max-width: 230px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - span.current-icon { - margin-left: auto; - svg { - display: block; - margin-right: 8px; - } - } - &.current { - background: colors.$darkBlue; - color: #ffffff; - } + gap: 10px; + } + .file-name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 350px; } } } diff --git a/public/css/sass/components/header/TeamDropdown.scss b/public/css/sass/components/header/TeamDropdown.scss index c2b4701d53..ad3f4d4cb1 100644 --- a/public/css/sass/components/header/TeamDropdown.scss +++ b/public/css/sass/components/header/TeamDropdown.scss @@ -1,4 +1,4 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; .team-dropdown { position: relative; @@ -28,43 +28,42 @@ list-style: none; display: flex; flex-direction: column; + } - > li { - display: flex; - align-items: center; - justify-content: space-between; - cursor: pointer; - padding: 10px; + ul > li { + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; + padding: 10px; - &:hover { - background-color: colors.$grey9; + &:hover { + background-color: colors.$grey75; + } - .container-icon-settings { - visibility: visible; - color: colors.$translatedBlue; - } - } + &.active { + background-color: colors.$blue950; + color: colors.$white; + } - &.active { - background-color: colors.$darkBlueHover; - color: colors.$white; + .container-icon-settings { + display: flex; + align-items: center; + visibility: hidden; + } + } - .container-icon-settings { - color: colors.$white; - } - } + ul > li:hover .container-icon-settings { + visibility: visible; + color: colors.$blue500; + } - .container-icon-settings { - display: flex; - align-items: center; - visibility: hidden; - } - } + ul > li.active .container-icon-settings { + color: colors.$white; } } .trigger-button { - height: 35px !important; border-radius: 20px; background-color: white !important; @@ -80,14 +79,14 @@ } .create-new-team { - border-bottom: 1px solid colors.$grey8; + border-bottom: 1px solid colors.$grey200; margin-bottom: 10px; text-transform: uppercase; - color: colors.$translatedBlue; + color: colors.$blue500; font-weight: bold; > svg { - border: 1px solid colors.$translatedBlue; + border: 1px solid colors.$blue500; border-radius: 50%; } } diff --git a/public/css/sass/components/header/header.scss b/public/css/sass/components/header/header.scss index 0b4cad827d..69f8e81000 100644 --- a/public/css/sass/components/header/header.scss +++ b/public/css/sass/components/header/header.scss @@ -1,4 +1,5 @@ -@use "../../commons/colors"; +@use '../../tokens/colors'; +@use '../../commons/variables'; header { .revision-mark { /*float: left; @@ -13,19 +14,163 @@ header { line-height: 23px; color: white; text-align: center; - border-radius: 2px; - margin-top: 7px; - border: 1px solid #ffffff; + border-radius: 4px; + border: 1px solid colors.$white; &.revision-r1 { - background: colors.$approvedGreen; + background: colors.$green800; } &.revision-r2 { - background: colors.$approved2Green; + background: colors.$purple500; } } +} + +.markAsCompleteButton { + width: 40px !important; +} + +$icon-scale: 30px; + +/* Default */ + +header { + .wrapper { + grid-template-columns: + 208px minmax(0, 48px) minmax(120px, max-content) + auto max-content; /*208px minmax(0,48px) minmax(200px, max-content) auto 120px;*/ + align-items: center; + } + + .logo-menu { + display: grid; + align-items: center; + + .logo { + margin: 0; + background: url(/public/img/logo_matecat_big_white.svg) 0 0 no-repeat; + width: 190px; + height: 40px; + } + } + + .header-menu { + display: grid; + /*grid-template-columns: repeat(9, auto);*/ + grid-auto-flow: column; + align-items: center; + justify-content: right; + column-gap: 16px; + z-index: 4; + color: colors.$white; + margin-right: 16px; + button.qaButton, + .markAsCompleteButton, + > button { + color: colors.$white !important; - #files-instructions svg { - display: block; + &:disabled { + color: #{rgba(colors.$white, 0.5)} !important; + } + } + + .button-badge { + display: flex; + width: 16px; + height: 16px; + padding: 2px 6px; + justify-content: center; + align-items: center; + gap: 4px; + position: absolute; + right: -6px; + top: -4px; + background-color: white; + border-radius: 999px; + font-size: 12px; + line-height: 14px; + + &.button-badge-left { + right: unset; + left: -4px; + } + + &.button-badge-warning { + background-color: colors.$orange200; + color: colors.$white; + } + + &.button-badge-info { + background-color: colors.$blue500; + color: colors.$white; + } + + &.button-badge-error { + background-color: colors.$red500; + color: colors.$white; + } + + &.button-badge-success { + background-color: colors.$green800; + color: colors.$white; + } + } + + #action-filter { + &.active, + &.open { + opacity: 1; + + #filter { + fill: colors.$white; + } + } + } + + .comments-popover { + width: 300px; + max-height: 600px; + overflow: auto; + .popover-comments-container { + padding: 8px 0; + display: flex; + flex-direction: column; + gap: 4px; + } + .popover-comments-item { + display: flex; + flex-direction: column; + gap: 8px; + padding: 8px; + border-radius: variables.$border-radius-default; + background-color: #{rgba(colors.$grey75, 0.5)}; + &.resolved { + background-color: #{rgba(colors.$green300, 0.15)}; + &:hover { + background-color: #{rgba(colors.$green300, 0.25)}; + } + } + &:hover { + background-color: colors.$grey75; + } + } + .popover-comments-item .popover-comments-item-header { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + gap: 4px; + font-size: 14px; + font-weight: 600; + margin-bottom: 4px; + color: colors.$grey1300; + } + .popover-comments-item-name { + color: colors.$grey600; + } + .popover-comments-item .popover-comments-item-text { + padding: 4px; + } + } } } diff --git a/public/css/sass/components/header/qaComponent.scss b/public/css/sass/components/header/qaComponent.scss index 3724001fa5..7f41edfc32 100644 --- a/public/css/sass/components/header/qaComponent.scss +++ b/public/css/sass/components/header/qaComponent.scss @@ -1,4 +1,4 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; /********** QA Component **********/ .qa-wrapper { position: relative; @@ -8,165 +8,14 @@ } .qa-container { - background-color: #fff; + background-color: colors.$white; height: 50px; - box-shadow: 0 1px 3px #666; + box-shadow: 0 1px 3px colors.$grey700; border-radius: 0 0 2px 2px; display: block; - color: #4d4d4d; + color: colors.$grey700; } -.qa-issues-types { - display: flex; - flex-grow: 1; - flex-direction: row; - justify-content: flex-start; -} - -.qa-issues-container, -.qa-lexiqa-container { - width: 150px; - height: 50px; - align-items: center; - display: flex; - text-align: center; - justify-content: center; - font-size: 15px; - font-weight: normal; - position: relative; - cursor: pointer; - box-sizing: border-box; -} - -.qa-issues-container.segments-with-issues { - width: 190px; -} - -.qa-issues-container:hover, -.qa-lexiqa-container:hover { - background-color: #d0d0d0; -} - -.qa-issues-container.selected, -.qa-lexiqa-container.selected { - box-shadow: inset 0px -3px 0px #4d4d4d; -} - -.qa-counter { - width: 125px; - font-size: 16px; - color: #333; -} - -.icon-qa-issues, -.icon-qa-glossary, -.icon-conflicts, -.icon-qa-total-issues, -.icon-qa-lexiqa { - width: 30px; - height: 30px; - margin-right: 10px; - margin-top: 8px; -} - -.icon-conflicts { - margin-right: -2px; - margin-left: 15px; -} - -.icon-qa-total-issues:before { - content: '\e903'; - font-size: 25px; -} - -.icon-qa-glossary:before { - content: '\ea4f'; - font-size: 25px; -} - -.icon-conflicts:before { - content: '\f071'; - font-size: 25px; -} - -.icon-qa-issues:before { - content: '\ea7f'; - font-size: 25px; -} - -.icon-qa-lexiqa:before { - content: '\f044'; - font-size: 25px; - margin-top: 0px; - display: block; -} - -.qa-total-issues-counter { - top: 10px; - left: 10px; -} - -.qa-issues-counter { - top: 10px; - left: 25px; -} - -.qa-glossary-counter { - top: 10px; - left: 10px; -} - -.qa-conflicts-issues-counter { - top: 10px; - left: 15px; -} - -.qa-lexiqa-counter { - top: 10px; - left: 35px; -} - -.icon-qa-right-arrow:before { - content: '\ea3c'; - font-size: 18px; -} - -.icon-qa-left-arrow:before { - content: '\ea40'; - font-size: 18px; -} - -.qa-move-up, -.qa-move-down { - color: #797979; -} - -.qa-move-down { - margin-left: 15px; -} - -.qa-move-up:hover, -.qa-move-down:hover { - color: black; -} - -.qa-move-up:active, -.qa-move-down:active { - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - background-color: #eee; -} - -.qa-arrows.qa-arrows-disabled .qa-move-up, -.qa-arrows.qa-arrows-disabled .qa-move-down, -.qa-arrows.qa-arrows-disabled .qa-move-up:hover, -.qa-arrows.qa-arrows-disabled .qa-move-down:hover { - cursor: default; - opacity: 0.5; - color: #797979; -} - -/************************************************/ - .qa-container { .qa-container-inside { height: 100%; @@ -178,6 +27,7 @@ .label-issues { font-weight: 700; margin-right: 5px; + &.labl { margin-left: 70px; } @@ -200,47 +50,20 @@ display: flex; flex-grow: 3; align-items: center; - .qa-issue { - } - .icon-cancel-circle { - color: #e1565a; - } - .icon-warning2 { - color: #ea862c; - } - .ui.basic.buttons { - button { - font-size: 16px !important; - padding: 10px; - color: #000000 !important; - font-family: calibri; - display: flex; - gap: 4px; - &.error svg { - color: colors.$red800; - } - &.warning svg { - color: colors.$orangeDefault; - } - &:hover { - background: #f2f4f7 !important; - } - &.mc-bg-gray { - background: #f2f4f7 !important; - } - - } + > div { + display: flex; + gap: 8px; } .qa-lexiqa-info { margin-left: 5px; font-weight: 700; - a { - margin: 0 3px; - font-weight: 700; - text-decoration: underline; - &:hover { - text-decoration: none; - } + } + .qa-lexiqa-info a { + margin: 0 3px; + font-weight: 700; + text-decoration: underline; + &:hover { + text-decoration: none; } } } @@ -253,10 +76,18 @@ flex-direction: row; justify-content: flex-end; align-items: center; - .info-navigation-issues { - display: inline-block; - margin: 0 15px 0 10px; - } + } + .qa-actions .qa-arrows { + display: flex; + justify-content: center; + gap: 10px; + } + } + .qa-actions .info-navigation-issues { + display: flex; + align-items: center; + b { + margin-right: 2px; } } } diff --git a/public/css/sass/components/header/search.scss b/public/css/sass/components/header/search.scss index 1f5a4b25b2..79a2a32442 100644 --- a/public/css/sass/components/header/search.scss +++ b/public/css/sass/components/header/search.scss @@ -1,129 +1,147 @@ -@use "../../commons/colors"; +@use '../../tokens/colors'; + .searchbox { position: relative; float: left; width: 100%; font-size: 12px; - background: #ffffff; + background: colors.$white; box-shadow: 0 0 4px rgba(0, 0, 0, 0.45); - .block.buttons { - margin-top: -6px !important; - } - .search-inputs { - height: 74px; - } - #exec-filter { - float: right; - } - .block.right { - margin-right: 0 !important; - } - .btn { - float: right; - font-weight: bold; - margin: 4px 0px 3px 10px; - padding: 2px 10px; - height: 28px; - background: #eeeeef; - cursor: pointer; - font-size: 14px; - width: fit-content; - text-transform: uppercase; - &:disabled { - cursor: not-allowed; - background: #ffffff; - color: #d0d0d0; - color: #d0d0d0; - border: 1px solid #d0d0d0; - font-weight: 100; - } - } +} - input[type='button']:hover { - border-width: 1px; - } - .search-input { - width: 200px; - font-size: 12px !important; - height: 23px; - padding: 0 5px; - border: 1px solid #abadb3; - -webkit-transition: all 100ms ease-in; - -moz-transition: all 100ms ease-in; - } +.searchbox .block.buttons { + margin-top: -6px !important; +} - .search-input:hover { - -moz-box-shadow: inset 0 1px 1px #e6e7e8; - -webkit-box-shadow: inset 0 1px 1px #e6e7e8; - } +.searchbox .search-inputs { + height: 74px; +} - .search-input:focus { - -moz-box-shadow: inset 0 1px 2px #ccc; - -webkit-box-shadow: inset 0 1px 2px #ccc; - color: #000; - } +.searchbox #exec-filter { + float: right; +} - @media only screen and (max-width: 1200px) { - .search-input { - width: 160px; - } - } - @media only screen and (max-width: 1100px) { - .search-input { - width: 140px; - } - } - @media only screen and (max-width: 1050px) { - .search-input { - width: 132px; - } - } - label { - display: inline; - width: auto !important; - margin-right: 5px; - text-transform: uppercase; - } - input[type='button'], - input[type='submit'] { - text-transform: uppercase; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - .block { - float: left; - margin-right: 10px; - text-align: left; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - .block .field { - width: 100%; - text-align: right; - margin-bottom: 5px; - } - .block.right { - float: right !important; - margin-top: -5px !important; - } - .block.right .block { - margin-right: 0px; - margin-left: 20px; +.searchbox .block.right { + margin-right: 0 !important; +} + +.searchbox .btn { + float: right; + font-weight: bold; + margin: 4px 0px 3px 10px; + padding: 2px 10px; + height: 28px; + background: colors.$grey100; + cursor: pointer; + font-size: 14px; + width: fit-content; + text-transform: uppercase; + + &:disabled { + cursor: not-allowed; + background: colors.$white; + color: colors.$grey200; + border: 1px solid colors.$grey200; + font-weight: 100; } - .block.right .block .btn { - margin-right: 0px; - margin-left: 10px; +} + +.searchbox input[type='button']:hover { + border-width: 1px; +} + +.searchbox .search-input { + width: 200px; + font-size: 12px !important; + height: 23px; + padding: 0 5px; + border: 1px solid colors.$grey400; + -webkit-transition: all 100ms ease-in; + -moz-transition: all 100ms ease-in; +} + +.searchbox .search-input:hover { + -moz-box-shadow: inset 0 1px 1px colors.$grey100; + -webkit-box-shadow: inset 0 1px 1px colors.$grey100; +} + +.searchbox .search-input:focus { + -moz-box-shadow: inset 0 1px 2px colors.$grey200; + -webkit-box-shadow: inset 0 1px 2px colors.$grey200; + color: colors.$black; +} + +@media only screen and (max-width: 1200px) { + .searchbox .search-input { + width: 160px; } - .block.vcentered { - padding-top: 7px !important; +} + +@media only screen and (max-width: 1100px) { + .searchbox .search-input { + width: 140px; } - .search-options label { - text-transform: capitalize; +} + +@media only screen and (max-width: 1050px) { + .searchbox .search-input { + width: 132px; } } +.searchbox label { + display: inline; + width: auto !important; + margin-right: 5px; + text-transform: uppercase; +} + +.searchbox input[type='button'], +.searchbox input[type='submit'] { + text-transform: uppercase; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.searchbox .block { + float: left; + margin-right: 10px; + text-align: left; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.searchbox .block .field { + width: 100%; + text-align: right; + margin-bottom: 5px; +} + +.searchbox .block.right { + float: right !important; + margin-top: -5px !important; +} + +.searchbox .block.right .block { + margin-right: 0px; + margin-left: 20px; +} + +.searchbox .block.right .block .btn { + margin-right: 0px; + margin-left: 10px; +} + +.searchbox .block.vcentered { + padding-top: 7px !important; +} + +.searchbox .search-options label { + text-transform: capitalize; +} + input#exec-cancel, input#exec-find, input#exec-find, @@ -132,315 +150,461 @@ button#exec-replace { } /////////// New Find -.ui.form { +.search-form { box-sizing: border-box; - .find-wrapper { - //TODO: Transform in SCSS Component for all INPUT TYPES - .find-element { - input:not(.input--invisible), { - border-radius: 2px !important; - border: 1px solid rgba(34, 36, 38, 0.15) !important; - box-shadow: inset 0 1px 3px #ddd !important; - font-size: 1.2em !important; - padding: 8px 16px 7px !important; - - &::-webkit-input-placeholder { - color: #929292; - } - - &:hover { - border-color: rgba(34, 36, 38, 0.35) !important; - } - - &:focus { - border-color: #85b7d9 !important; - background: #ffffff !important; - color: rgba(0, 0, 0, 0.8) !important; - /*outline: none;*/ - } - } +} + +.search-form .find-wrapper .find-element input:not(.input--invisible) { + border-radius: 2px !important; + border: 1px solid rgba(34, 36, 38, 0.15) !important; + box-shadow: inset 0 1px 3px colors.$grey200 !important; + font-size: 1.2em !important; + padding: 8px 16px 7px !important; + + &::-webkit-input-placeholder { + color: colors.$grey400; + } + + &:hover { + border-color: rgba(34, 36, 38, 0.35) !important; + } + + &:focus { + border-color: colors.$blue300 !important; + background: colors.$white !important; + color: rgba(0, 0, 0, 0.8) !important; + /*outline: none;*/ + } +} + +.search-form .find-wrapper .find-container { + background-color: colors.$white; + padding: 10px 0 0; + margin-bottom: 0; + box-shadow: 0 1px 3px colors.$grey700; + border-radius: 0 0 0 0; + display: block; + color: colors.$grey700; +} + +.search-form .find-wrapper .find-container .find-container-inside { + height: 100%; + padding: 0 6.5% 0 5%; + text-align: left; + display: flex; +} + +.search-form .find-wrapper .find-container .find-container-inside .find-list { + display: flex; + width: 100%; + padding-bottom: 10px; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element { + display: inline-block; + width: 29%; + margin-right: 10px; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element.find-dropdown-status { + width: fit-content; + margin-right: 0; +} + +//TODO: Transform in SCSS Component for all DROPDOWN BUTTON +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element.find-dropdown-status + .find-dropdown { + display: flex; + align-items: center; + font-weight: normal; + height: 37px; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element.find-dropdown-status + .find-dropdown + .select { + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + padding: 9px 46px 9px 12px; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element.find-dropdown-status + .find-dropdown.disabled { + background: unset; + opacity: 0.5 !important; + border: none; + pointer-events: none; + box-shadow: inherit !important; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element.find-dropdown-status + .find-dropdown.disabled + .active + .menu.transition { + visibility: hidden !important; + + &:after { + display: none; + } +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element.find-dropdown-status + .find-dropdown + .circular.label.new-color { + box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.25) inset; + background: colors.$white; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element.find-dropdown-status + .find-dropdown + .circular.label.draft-color { + background: colors.$grey100; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element.find-dropdown-status + .find-dropdown + .circular.label.translated-color { + background: colors.$blue500; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element.find-dropdown-status + .find-dropdown + .circular.label.approved-color { + background: colors.$green800; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element.find-dropdown-status + .find-dropdown + .circular.label.approved-2ndpass-color { + background: colors.$purple500; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element.find-dropdown-status + .find-dropdown + .circular.label.rejected-color { + background: colors.$red400; +} + +.find-element.find-dropdown-status .find-dropdown { + .status-dot { + &.new-color { + box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.25) inset; + background: colors.$white; + } + &.draft-color { + background: colors.$grey100; + } + &.translated-color, + &.post-edited-color { + background: colors.$blue500; } - .find-container { - background-color: #fff; - padding: 10px 0 0; - margin-bottom: 0; - box-shadow: 0 1px 3px #666; - border-radius: 0 0 0 0; - display: block; - color: #4d4d4d; - .find-container-inside { - height: 100%; - padding: 0 6.5% 0 5%; - text-align: left; - display: flex; - .find-list { - display: flex; - width: 100%; - padding-bottom: 10px; - } - .find-element { - display: inline-block; - width: 29%; - margin-right: 10px; - &.find-dropdown-status { - width: fit-content; - margin-right: 0; - //TODO: Transform in SCSS Component for all DROPDOWN BUTTON - .find-dropdown { - display: flex; - align-items: center; - font-weight: normal; - height: 37px; - .select { - display: flex; - flex-direction: row; - align-items: center; - gap: 5px; - padding: 9px 46px 9px 12px; - } - .ui.cancel.label { - padding: 4px; - background-color: #d6d6d6; - border-radius: 15px; - top: 8px; - line-height: 0px; - right: 0px; - &:hover { - background-color: #cccccc !important; - } - } - .ui.input input { - box-shadow: inset 0 1px 3px #ddd; - } - - &.not-filtered { - .ui.basic.button { - &.disabled { - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.25) inset !important; - } - } - } - &.disabled { - background: unset; - opacity: 0.5 !important; - border: none; - pointer-events: none; - box-shadow: inherit !important; - .active .menu.transition { - visibility: hidden !important; - &:after { - display: none; - } - } - } - .circular.label { - &.new-color { - box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.25) inset; - background: #ffffff; - } - &.draft-color { - background: #e8e8e8; - } - &.translated-color { - background: colors.$translatedBlue; - } - &.approved-color { - background: colors.$approvedGreen; - } - &.approved-2ndpass-color { - background: colors.$approved2Green; - } - &.rejected-color { - background: #dc2e34; - } - } - } - } - &.find-clear-all { - width: fit-content; - margin-right: 0; - } - .find-in-source { - margin-bottom: 5px; - } - .find-exact-match { - display: flex; - gap: 12px; - .exact-match { - display: flex; - align-items: center; - gap: 4px; - line-height: 21px; - } - } - .find-in-target { - margin-bottom: 5px; - } - .enable-replace-check { - display: flex; - align-items: center; - gap: 4px; - line-height: 21px; - &.disable { - opacity: 0.5; - } - } - .find-in-replace { - input { - margin-bottom: 5px; - } - button { - padding: 5px 10px; - } - } - - .find-clear { - margin-left: 13px; - border-left: 1px solid #d6d6d7; - padding-left: 15px; - position: relative; - top: 9px; - button { - color: grey; - text-decoration: underline; - border: none; - background: none; - outline: none; - &:hover { - text-decoration: none; - } - } - } - } - .find-element-container { - display: inline-block; - width: 29%; - margin-left: 15px; - margin-right: 10px; - .find-element { - width: unset; - display: block; - } - } - .find-actions { - display: flex; - justify-content: flex-end; - align-items: flex-start; - margin-top: 4px; - button { - border-radius: 2px; - &:hover, - &.active { - box-shadow: 0 0 0 1px #0055b8 inset; - color: #0055b8 !important; - background: #fff !important; - } - - &:last-child { - width: max-content; - } - &.disabled { - box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important; - } - } - } - .find-option { - display: flex; - align-items: center; - gap: 4px; - margin-top: 7px; - } - } - .search-display { - display: flex; - justify-content: space-between; - align-items: center; - height: 100%; - font-size: 1.2em; - padding: 15px 6.5% 15px 5%; - text-align: left; - background: #f2f4f7; - .found { - margin: 0; - margin-right: 20px; - span { - .param { - font-weight: 700; - color: black; - background: yellow; - margin: 0 3px; - padding: 3px 3px; - border-radius: 2px; - } - } - } - .search-result-buttons { - display: flex; - p { - padding: 8px 5px; - margin-bottom: 0; - } - .ui.basic.button { - width: 36px; - height: 36px; - padding: 0; - margin: 0; - line-height: 36px; - margin-left: 10px; - position: relative; - span { - position: absolute; - font-size: 12px; - color: #878788; - -webkit-transition: all 100ms ease-in; - -moz-transition: all 100ms ease-in; - visibility: hidden; - width: 160px; - left: -50px; - top: 26px; - } - &.disabled { - box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important; - span { - display: none; - } - } - &:hover { - span { - visibility: visible; - } - } - } - } - } + &.approved-color { + background: colors.$green800; + } + &.approved-2ndpass-color { + background: colors.$purple500; + } + &.rejected-color { + background: colors.$red400; } } - .select-with-icon__wrapper { - height: 37px; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element.find-clear-all { + width: fit-content; + margin-right: 0; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element + .find-in-source { + margin-bottom: 5px; + + input { + width: 100%; } - .select__dropdown-wrapper { - min-width: 180px; - margin-top: 1px; - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); - border: 1px solid rgba(34, 36, 38, 0.15); +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element + .find-exact-match { + display: flex; + gap: 12px; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element + .find-exact-match + .exact-match { + display: flex; + align-items: center; + gap: 4px; + line-height: 21px; + + input[type='checkbox'] { + margin: 0; } +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element + .find-in-target { + margin-bottom: 5px; - .custom-dropdown.select__dropdown { - background-color: #fff; + input { + width: 100%; } +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element + .enable-replace-check { + display: flex; + align-items: center; + gap: 4px; + line-height: 21px; - ul.dropdown__list { - min-height: 165px; + &.disable { + opacity: 0.5; } - li.dropdown__option { - padding: 8px; + input[type='checkbox'] { + margin: 0; } +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element + .find-in-replace + input { + margin-bottom: 5px; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element + .find-in-replace + button { + padding: 5px 10px; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element + .find-clear { + margin-left: 13px; + border-left: 1px solid colors.$grey200; + padding-left: 15px; + position: relative; + top: 9px; +} - .dropdown__option span { - display: flex; - align-items: center; - gap: 8px; - font-size: 16px; +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element + .find-clear + button { + color: grey; + text-decoration: underline; + border: none; + background: none; + outline: none; + + &:hover { + text-decoration: none; } } + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element-container { + display: inline-block; + width: 29%; + margin-left: 15px; + margin-right: 10px; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-element-container + .find-element { + width: unset; + display: block; +} + +.search-form + .find-wrapper + .find-container + .find-container-inside + .find-actions { + display: flex; + justify-content: flex-end; + align-items: flex-start; + gap: 8px; +} + +.search-form .find-wrapper .find-container .find-container-inside .find-option { + display: flex; + align-items: center; + gap: 4px; + margin-top: 7px; +} + +.search-form .find-wrapper .find-container .search-display { + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; + font-size: 1.2em; + padding: 15px 6.5% 15px 5%; + text-align: left; + background: colors.$grey50; +} + +.search-form .find-wrapper .find-container .search-display .found { + margin: 0; + margin-right: 20px; +} + +.search-form .find-wrapper .find-container .search-display .found span .param { + font-weight: 700; + color: colors.$black; + background: yellow; + margin: 0 3px; + padding: 3px 3px; + border-radius: 2px; +} + +.search-form + .find-wrapper + .find-container + .search-display + .search-result-buttons { + display: flex; + justify-content: center; + gap: 8px; + align-items: center; +} + +.search-form + .find-wrapper + .find-container + .search-display + .search-result-buttons + p { + padding: 8px 5px; + margin-bottom: 0; +} + +.search-form .select-with-icon__wrapper { + height: 37px; +} + +.search-form .select__dropdown-wrapper { + min-width: 180px; + margin-top: 1px; + box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); + border: 1px solid rgba(34, 36, 38, 0.15); +} + +.search-form .custom-dropdown.select__dropdown { + background-color: colors.$white; +} + +.search-form ul.dropdown__list { + min-height: 165px; + max-height: unset !important; +} + +.search-form li.dropdown__option { + padding: 8px; +} + +.search-form .dropdown__option span { + display: flex; + align-items: center; + gap: 8px; + font-size: 16px; +} diff --git a/public/css/sass/components/header/segmentsFilter.scss b/public/css/sass/components/header/segmentsFilter.scss index 11786f3fc6..267a77b9b6 100644 --- a/public/css/sass/components/header/segmentsFilter.scss +++ b/public/css/sass/components/header/segmentsFilter.scss @@ -1,42 +1,47 @@ -@use '../../commons/colors'; +@use "../../tokens/colors"; + +// --- Muted segments (filtered-out segments in editor) --- body section.muted { - background: #f2f4f7; + background: colors.$grey50; cursor: not-allowed; - .body { - .text { - opacity: 0.5; - .wrap { - .source { - } - .target { - .editarea { - border: none !important; - &:hover { - border: none !important; - } - } - } - } - .status-container { - .status { - opacity: 0.2; - } - } - } +} + +body section.muted .body .text { + opacity: 0.5; +} + +body section.muted .body .text .wrap .target .editarea { + border: none !important; + &:hover { + border: none !important; } } +body section.muted .body .text .status-container .status { + opacity: 0.2; +} + +section.muted .segment-side-buttons { + zoom: 0.8; +} + +// --- Search settings --- .search-settings-panel { - background: #efefef; + background: colors.$grey75; padding: 10px; position: absolute; width: 205px; - border: 1px solid #666; + border: 1px solid colors.$grey700; top: 48px; } -/* advanced filtering */ +.search-settings-info { + float: left; + margin-right: 10px; + color: colors.$grey700; +} +// --- Filter button --- header .filter:before { content: '\f0b0'; } @@ -44,7 +49,7 @@ header .filter:before { header .filter { display: block !important; text-decoration: none; - color: #eee; + color: colors.$grey75; box-shadow: none; border: 0; padding: 12px; @@ -52,77 +57,43 @@ header .filter { text-align: center; } -.advanced-filter-searchbox { - display: none; -} - -.advanced-filter-searchbox .search-select { - margin-left: 5px; -} - -.advanced-filter-searchbox { - display: block; - height: 48px; -} -/*.searchbox form { - width: auto; - padding: 11px 10px 0px 15px !important; -}*/ - -/* .searchbox .block { - margin-top: 5px; -}*/ - -.advanced-filter-searchbox { - z-index: 1 !important; -} - -/*.searchbox .search-settings { - text-decoration: underline; - float: left; - cursor: pointer; -}*/ - body.cattool .filter, body.cattool .filter:hover { - background: transparent !important; + background: transparent; cursor: pointer; } + body.cattool .filter:hover { - color: #ccc; + color: colors.$grey200; } .cattool header .filter { font-size: 25px; - padding: 10px; padding: 0; padding-top: 5px; width: 45px; margin: 0; } -#review-side-panel { - top: 48px; -} - -.search-settings-info { - float: left; - margin-right: 10px; - color: #666; +// --- Filter layout --- +.advanced-filter-searchbox { + display: block; + height: 48px; + z-index: 1 !important; } .filter-segments-count { - float: right !important; + float: right; font-weight: bold; font-size: 14px; } -#setStatus-filter { - margin-right: 0; +#review-side-panel { + top: 48px; } -section.muted .segment-side-buttons { - zoom: 0.8; +#setStatus-filter { + margin-right: 0; } .sf-segment-navigation-arrows { @@ -131,387 +102,340 @@ section.muted .segment-side-buttons { margin-top: -3px; } -///////////// New Filter Segments +// --- Main filter container --- +#header-bars-wrapper .filter-wrapper { + position: relative; + width: 100%; + float: left; + margin-top: 1px; +} -#header-bars-wrapper { - .filter-wrapper { - position: relative; - width: 100%; - float: left; - margin-top: 1px; - .filter-container { - background-color: #fff; - height: 50px; - box-shadow: 0 1px 3px #666; - border-radius: 0 0 2px 2px; - display: block; - color: #4d4d4d; - //TODO: Transform in SCSS Component for all INPUT TYPES - input:not(.input--invisible) { - border-radius: 2px !important; - border: 1px solid rgba(34, 36, 38, 0.15) !important; - box-shadow: inset 0 1px 3px #ddd !important; - font-size: 1.2em !important; - padding: 8px 16px 7px !important; - &::-webkit-input-placeholder { - color: rgba(0, 0, 0, 0.87); - } - &:hover { - border-color: rgba(34, 36, 38, 0.35) !important; - } - &:focus { - border-color: #85b7d9 !important; - background: #ffffff !important; - color: rgba(0, 0, 0, 0.8) !important; - outline: none; - } - } - .filter-container-inside { - height: 100%; - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 0 6.5% 0 5%; - align-items: center; - .filter-list { - display: flex; - flex-grow: 3; - align-items: center; - box-sizing: border-box; - .filter-dropdown { - display: flex; - align-items: center; - .select { - display: flex; - flex-direction: row; - align-items: center; - gap: 5px; - padding: 9px 30px 9px 12px; - border-radius: 40px; - height: 38px; - } - li.dropdown__option { - padding: 8px; - } - .dropdown__option span { - display: flex; - align-items: center; - gap: 8px; - font-size: 16px; - } - .custom-dropdown.select__dropdown { - background-color: #fff; - min-width: 120px; - } - .filter-category .select__dropdown-wrapper { - width: unset; - } - .select__dropdown { - background-color: #fff; - min-width: 120px; - } - .switch-container-outer { - padding: 0 10px; - } - .switch-container input:checked + span { - background-color: colors.$grey7; - } - &:nth-child(2) { - margin-left: 15px; - } - .ui.basic.button { - font-family: 'calibri', Arial, Helvetica, sans-serif; - font-size: 16px !important; - padding: 10px 20px; - border-radius: 2px; - /*transition: 0.3s ease;*/ - box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.25) inset; - - &:hover, - &.active { - box-shadow: 0 0 0 1px #0055b8 inset; - color: #0055b8 !important; - background: #fff !important; - } - - .text { - /*transition: 0.3s ease;*/ - display: flex; - align-items: center; - } - .ui.cancel.label { - position: absolute; - padding: 4px; - background-color: #d6d6d6; - border-radius: 15px; - top: 8px; - line-height: 0px; - right: 0px; - visibility: hidden; - &:hover { - background-color: #cccccc !important; - } - } - } - .filter-status, - .filter-activities, - .filter-data-sample { - &.not-filtered { - .ui.basic.button { - /*&:hover, &.active { - box-shadow: none; - color: #0055b8 !important; - border: 1px solid #0055b8; - background: #fff !important; - }*/ - &.disabled { - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.25) inset !important; - pointer-events: none; - } - } - } - &.filtered { - .ui.basic.button { - background-color: #ffffff !important; - box-shadow: - 0 0 0 #e0e0e0, - 0 0 2px rgba(0, 0, 0, 0.12), - 0 2px 4px rgba(0, 0, 0, 0.24) !important; - color: #000000 !important; - padding: 9px 20px 9px 15px; - &:hover { - width: fit-content; - .text { - margin-right: 15px; - } - .ui.cancel.label { - visibility: unset; - right: 5px; - } - } - } - } - &.disabled { - background: unset; - opacity: 0.5 !important; - box-shadow: unset; - border: none; - pointer-events: none; - } - } - .filter-status { - .circular.label { - &.new-color { - box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.25) inset; - background: #ffffff; - } - &.draft-color { - background: colors.$grey1; - } - &.translated-color, - &.post-edited-color { - background: colors.$translatedBlue; - } - &.approved-color { - background: colors.$approvedGreen; - } - &.approved-2ndpass-color { - background: colors.$approved2Green; - } - &.rejected-color { - background: colors.$rebuttedRed; - } - } - } - .filter-activities { - } - .filter-toggle { - .checkbox { - left: 5px; - top: 4px; - margin: 0 !important; - float: none; - label { - &:before { - background: #dcdfe4 !important; - } - &:after { - box-shadow: inset 0 0 0 1px rgba(34, 36, 38, 0.25); - background: #ffffff; - } - } - } - } - - .percent-item { - margin-left: 5px; - } - - .item, - .text { - .type-item, - .order-item { - display: inline-block; - } - .order-item { - float: right; - } - } - .text { - .order-item { - margin-left: 2px; - } - } - } - .clear-filter-element { - margin-left: 13px; - border-left: 1px solid #d6d6d7; - padding-left: 13px; - color: black; - display: flex; - justify-content: space-between; - .clear-filter, - .select-all-filter { - margin-right: 20px; - display: inline; - min-width: 65px; - button { - background: none; - color: grey; - text-decoration: underline; - cursor: pointer; - border: none; - padding: 0; - outline: none; - &:hover { - text-decoration: none; - } - } - } - } - } - .filter-navigator { - display: flex; - flex-grow: 1; - align-items: center; - .filter-actions { - display: flex; - flex-grow: 1; - flex-direction: row; - justify-content: flex-end; - align-items: center; - .info-navigation-filters { - display: inline-block; - margin: 0 15px 0 10px; - } - .label-filters { - display: inline-block; - &.labl { - margin-right: 10px; - position: relative; - } - .loader { - width: 20px; - height: 20px; - background: url(/public/img/loading.gif) 0 0 no-repeat !important; - position: absolute; - bottom: 0px; - display: block; - left: 85px; - background-size: 20px 20px !important; - } - } - } - } - } - } +#header-bars-wrapper .filter-container { + background-color: colors.$white; + height: 50px; + box-shadow: 0 1px 3px colors.$grey700; + border-radius: 0 0 2px 2px; + display: block; + color: colors.$grey700; +} + +#header-bars-wrapper .filter-container input:not(.input--invisible) { + border-radius: 2px; + border: 1px solid rgba(34, 36, 38, 0.15); + box-shadow: inset 0 1px 3px colors.$grey200; + font-size: 1.2em; + padding: 8px 16px 7px; + + &::-webkit-input-placeholder { + color: rgba(0, 0, 0, 0.87); + } + &:hover { + border-color: rgba(34, 36, 38, 0.35); } - .filter-arrows { - .button { - padding: 10px 13px; - display: inline-block; - width: 11px; - } + &:focus { + border-color: colors.$blue300; + background: colors.$white; + color: rgba(0, 0, 0, 0.8); + outline: none; } } -.data-sample-dropdown-container { - position: relative; +#header-bars-wrapper .filter-container-inside { + height: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0 6.5% 0 5%; + align-items: center; +} - .dropdown { - position: absolute; - visibility: hidden; - z-index: 1; - background-color: white; - margin-top: 5px; - min-width: 250px; - right: 0; - max-height: 450px; - overflow: auto; - opacity: 0; - transition: opacity 0.2s linear; - box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); - .divider { - width: 90%; - position: absolute; - background-color: lightgray; - height: 1px; - bottom: 0; - } - &.open { - visibility: visible; - opacity: 1; - } - - ul { - padding: 0; - margin: 0; - list-style: none; - display: flex; - flex-direction: column; - - > li { - display: flex; - align-items: center; - gap: 5px; - cursor: pointer; - padding: 10px; - position: relative; - &:hover { - background-color: colors.$grey4; - } - &.active { - background-color: colors.$grey8; - } - } - } - } +// --- Filter list --- +#header-bars-wrapper .filter-list { + display: flex; + flex-grow: 3; + align-items: center; + box-sizing: border-box; +} - .trigger-button { - position: relative; - transition: padding 0.2s ease-out; - font-weight: normal !important; - border-radius: 40px; - height: 38px !important; - &:disabled { - box-shadow: unset !important; - border: 1px solid colors.$grey8; - color: colors.$grey6 !important; - opacity: 0.5; - svg { - color: colors.$grey6 !important; - opacity: 0.5; - } - } +#header-bars-wrapper .filter-dropdown { + display: flex; + align-items: center; +} + +#header-bars-wrapper .filter-dropdown .select { + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + padding: 9px 30px 9px 12px; + border-radius: 40px; + height: 38px; +} + +#header-bars-wrapper .filter-dropdown li.dropdown__option { + padding: 8px; +} + +#header-bars-wrapper .filter-dropdown .dropdown__option span { + display: flex; + align-items: center; + gap: 8px; + font-size: 16px; +} + +#header-bars-wrapper .filter-dropdown .custom-dropdown.select__dropdown { + background-color: colors.$white; + min-width: 120px; +} + +#header-bars-wrapper .filter-dropdown .filter-category .select__dropdown-wrapper { + width: unset; +} + +#header-bars-wrapper .filter-dropdown .select__dropdown { + background-color: colors.$white; + min-width: 120px; +} + +#header-bars-wrapper .filter-dropdown div[class*="switch-container-outer"] { + padding: 0 10px; +} + +#header-bars-wrapper .filter-dropdown div[class*="switch-container"] input:checked + span { + background-color: colors.$grey400; +} + +#header-bars-wrapper .filter-dropdown:nth-child(2) { + margin-left: 15px; +} + +// --- Filter status / activities / data-sample states --- +#header-bars-wrapper .filter-dropdown .filter-status.disabled, +#header-bars-wrapper .filter-dropdown .filter-activities.disabled, +#header-bars-wrapper .filter-dropdown .filter-data-sample.disabled { + background: unset; + opacity: 0.5 !important; + box-shadow: unset; + border: none; + pointer-events: none; +} + +// --- Status color dots --- +#header-bars-wrapper .filter-status .circular.label, +#header-bars-wrapper .filter-status .status-dot { + &.new-color { + box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.25) inset; + background: colors.$white; } + &.draft-color { background: colors.$grey500; } + &.translated-color, &.post-edited-color { background: colors.$blue500; } + &.approved-color { background: colors.$green800; } + &.approved-2ndpass-color { background: colors.$purple500; } + &.rejected-color { background: colors.$orange600; } +} + +// --- Filter toggle checkbox --- +#header-bars-wrapper .filter-toggle .checkbox { + left: 5px; + top: 4px; + margin: 0 !important; + float: none; +} + +#header-bars-wrapper .filter-toggle .checkbox label:before { + background: colors.$grey150 !important; +} + +#header-bars-wrapper .filter-toggle .checkbox label:after { + box-shadow: inset 0 0 0 1px rgba(34, 36, 38, 0.25); + background: colors.$white; +} + +// --- Filter dropdown items --- +#header-bars-wrapper .filter-dropdown .percent-item { + margin-left: 5px; +} + +#header-bars-wrapper .filter-dropdown .item .type-item, +#header-bars-wrapper .filter-dropdown .item .order-item, +#header-bars-wrapper .filter-dropdown .text .type-item, +#header-bars-wrapper .filter-dropdown .text .order-item { + display: inline-block; +} + +#header-bars-wrapper .filter-dropdown .item .order-item, +#header-bars-wrapper .filter-dropdown .text .order-item { + float: right; } -.sample-size-item { +#header-bars-wrapper .filter-dropdown .text .order-item { + margin-left: 2px; +} + +// --- Clear filter / select all --- +#header-bars-wrapper .clear-filter-element { + margin-left: 13px; + border-left: 1px solid colors.$grey200; + padding-left: 13px; + color: colors.$black; + display: flex; + justify-content: space-between; +} + +#header-bars-wrapper .clear-filter, +#header-bars-wrapper .select-all-filter { + margin-right: 20px; + display: inline; + min-width: 65px; +} + +#header-bars-wrapper .clear-filter button, +#header-bars-wrapper .select-all-filter button { + background: none; + color: grey; + text-decoration: underline; + cursor: pointer; + border: none; + padding: 0; + outline: none; + &:hover { - background-color: unset !important; - cursor: default !important; + text-decoration: none; } } + +// --- Filter navigator --- +#header-bars-wrapper .filter-navigator { + display: flex; + flex-grow: 1; + align-items: center; +} + +#header-bars-wrapper .filter-actions { + display: flex; + flex-grow: 1; + flex-direction: row; + justify-content: flex-end; + align-items: center; +} + +#header-bars-wrapper .filter-arrows { + display: flex; + justify-content: center; + gap: 8px; + align-items: center; +} + +#header-bars-wrapper .info-navigation-filters { + display: inline-block; + margin: 0 15px 0 10px; +} + +#header-bars-wrapper .label-filters { + display: inline-block; + + &.labl { + margin-right: 10px; + position: relative; + } +} + +#header-bars-wrapper .label-filters .loader { + width: 20px; + height: 20px; + background: url(/public/img/loading.gif) 0 0 no-repeat !important; + position: absolute; + bottom: 0px; + display: block; + left: 85px; + background-size: 20px 20px !important; +} + +#header-bars-wrapper .filter-arrows .button { + padding: 10px 13px; + display: inline-block; + width: 11px; +} + +// --- Data sample dropdown --- +.data-sample-dropdown-container { + position: relative; +} + +.data-sample-dropdown-container .dropdown { + position: absolute; + visibility: hidden; + z-index: 1; + background-color: colors.$white; + margin-top: 5px; + min-width: 250px; + right: 0; + max-height: 450px; + overflow: auto; + opacity: 0; + transition: opacity 0.2s linear; + box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); +} + +.data-sample-dropdown-container .dropdown .divider { + width: 90%; + position: absolute; + background-color: lightgray; + height: 1px; + bottom: 0; +} + +.data-sample-dropdown-container .dropdown.open { + visibility: visible; + opacity: 1; +} + +.data-sample-dropdown-container .dropdown ul { + padding: 0; + margin: 0; + list-style: none; + display: flex; + flex-direction: column; +} + +.data-sample-dropdown-container .dropdown ul > li { + display: flex; + align-items: center; + gap: 5px; + cursor: pointer; + padding: 10px; + position: relative; + + &:hover { background-color: colors.$grey100; } + &.active { background-color: colors.$grey200; } +} + +.data-sample-dropdown-container .trigger-button { + position: relative; + transition: padding 0.2s ease-out; + font-weight: normal !important; + border-radius: 40px; + height: 38px !important; +} + +.data-sample-dropdown-container .trigger-button:disabled { + box-shadow: unset !important; + border: 1px solid colors.$grey200; + color: colors.$grey700 !important; + opacity: 0.5; +} + +.data-sample-dropdown-container .trigger-button:disabled svg { + color: colors.$grey700 !important; + opacity: 0.5; +} + +// --- Sample size --- +.sample-size-item:hover { + background-color: unset !important; + cursor: default !important; +} + .sample-size-container { display: flex; align-items: center; diff --git a/public/css/sass/components/pages/ActivityLogPage.scss b/public/css/sass/components/pages/ActivityLogPage.scss index ef6c33d122..1a2fbad8c2 100644 --- a/public/css/sass/components/pages/ActivityLogPage.scss +++ b/public/css/sass/components/pages/ActivityLogPage.scss @@ -1,5 +1,6 @@ @use 'NewProjectPage'; -@use "../../commons/colors"; +@use "../../commons/reset"; +@use "../../tokens/colors"; .activity-log-content { display: flex; @@ -18,7 +19,7 @@ .activity-log-table { height: 100%; overflow-y: auto; - border: 1px solid colors.$grey8; + border: 1px solid colors.$grey200; .activity-log-table-columns-name, .activity-log-table-columns-content { @@ -47,7 +48,7 @@ .activity-log-table-columns-content { > * { height: 40px; - border: 1px solid colors.$grey8; + border: 1px solid colors.$grey200; border-top: unset; padding: 10px; border-left: unset; @@ -58,13 +59,13 @@ } &:nth-child(odd) { - background-color: colors.$grey5; + background-color: colors.$grey50; } } .activity-table-column-order { - background-color: colors.$grey9; - border: 1px solid colors.$grey8; + background-color: colors.$grey75; + border: 1px solid colors.$grey200; padding: 5px; justify-content: space-between; cursor: pointer; @@ -97,7 +98,7 @@ width: 160px; label { - color: colors.$grey6; + color: colors.$grey700; } .select { @@ -105,7 +106,7 @@ padding: 5px; &:hover { - border-color: rgba(colors.$grey8, 0.8); + border-color: rgba(colors.$grey200, 0.8); box-shadow: none; } } @@ -115,7 +116,7 @@ width: 250px; font-size: 14px; border-radius: 2px; - border: 1px solid colors.$grey2; + border: 1px solid colors.$grey300; padding: 7px; } } diff --git a/public/css/sass/components/pages/AnalyzePage.scss b/public/css/sass/components/pages/AnalyzePage.scss index a8ca820c0e..32eb707302 100644 --- a/public/css/sass/components/pages/AnalyzePage.scss +++ b/public/css/sass/components/pages/AnalyzePage.scss @@ -1,11 +1,10 @@ @use "../../common-main"; +@use '../../commons/reset'; @use '../../commons/filter-teams'; -@use '../../commons/icons'; @use '../../commons/shadows'; @use '../../commons/project'; @use '../../commons/divider'; @use '../../commons/progress-mc-bar'; -@use '../../commons/buttons'; @use '../signin/OnBoarding'; @use '../../modals/split_modal'; @@ -16,10 +15,4 @@ @use '../../commons/analyze'; @use '../../commons/outsource'; @use '../../commons/date-picker-translator'; -@use '../common/CookieConsent'; -@use '../common/Tooltip'; -@use '../common/Button'; -@use '../common/LabelWithTooltip'; -@use '../common/Switch'; -@use '../common/Accordion'; @use '../Analyze/JobAnalyze'; \ No newline at end of file diff --git a/public/css/sass/components/pages/ApiDocPage.scss b/public/css/sass/components/pages/ApiDocPage.scss index d0cf75abc3..ac8598238a 100644 --- a/public/css/sass/components/pages/ApiDocPage.scss +++ b/public/css/sass/components/pages/ApiDocPage.scss @@ -1,3 +1,4 @@ +@use '../../tokens/colors'; /*API DOC page*/ @@ -13,7 +14,7 @@ header { text-align: left; width: 100%; position: fixed; - z-index: 999999999; + z-index: var(--z-sticky); /*border-bottom: 1px solid #5F5F5F; padding: 4px 0 5px 0;*/ height: 77px; /* was 38px for previous header*/ @@ -33,36 +34,36 @@ h3 { margin: 0px 0 0 0; padding: 0; font-size: 18px; - color: #999999 !important; + color: colors.$grey400 !important; font-weight: normal !important; } .tablestats { - border-right: 1px solid #ccc; + border-right: 1px solid colors.$grey200; } .tablestats th { - background-color: #efefef; + background-color: colors.$grey75; } .tablestats td, .tablestats th { - border-bottom: 1px solid #ccc; - border-left: 1px solid #ccc; + border-bottom: 1px solid colors.$grey200; + border-left: 1px solid colors.$grey200; padding: 6px 8px; margin: 1px 0; text-align: center; } .tablestats tr:hover { - background: #f7f8f9; + background: colors.$grey50; } .tablestats { - border-top: 1px solid #ccc; + border-top: 1px solid colors.$grey200; margin-bottom: 40px; - -moz-box-shadow: 0 1px 2px #ccc; - background: #fff; + -moz-box-shadow: 0 1px 2px colors.$grey200; + background: colors.$white; } .tablestats.continue { @@ -82,7 +83,7 @@ h3 { font-weight: bold !important; font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 18px; - color: #000 !important; + color: colors.$black !important; } .searchbox { @@ -95,7 +96,7 @@ h3 { .api .block-swagger { margin-top: -20px; - background: #fafafa; + background: colors.$grey50; } /* Bruteforce Override style.css and legacy.min.css */ @@ -114,7 +115,7 @@ section { /* Bruteforce Override style.css and legacy.min.css */ .api a { - color: #39699a; + color: colors.$blue400; } .api .menu { @@ -137,7 +138,7 @@ section { .api dt { float: left; text-align: left; - color: #666666; + color: colors.$grey700; width: 100px; padding-right: 20px; } @@ -170,12 +171,12 @@ section { .api h1, .api h2 { - color: #000 !important; + color: colors.$black !important; margin-top: 20px; } .api h3 { - color: #000 !important; + color: colors.$black !important; font-weight: bold !important; font-size: 22px !important; margin-bottom: 20px; @@ -187,7 +188,7 @@ section { margin: 10px 0; display: block; padding-bottom: 20px; - border-bottom: 1px dashed #ccc; + border-bottom: 1px dashed colors.$grey200; } .api .gototop.last { @@ -291,8 +292,8 @@ table { code { padding: 2px 4px; font-size: 90%; - color: #39699a; - background-color: #f4f4f4; + color: colors.$blue400; + background-color: colors.$grey75; white-space: nowrap; border-radius: 4px; } @@ -300,18 +301,18 @@ code { .req, .opt { font-family: inherit; - color: #c7254e; - background-color: #f9f2f4; + color: colors.$red400; + background-color: colors.$grey75; white-space: nowrap; padding: 2px 4px; - border-left: 2px solid #c7254e; + border-left: 2px solid colors.$red400; border-radius: 4px; } .opt { - background-color: #dff0d8; - border-left: 2px solid #3c763d; - color: #3c763d; + background-color: colors.$green50; + border-left: 2px solid colors.$green600; + color: colors.$green600; } .api p { @@ -326,54 +327,54 @@ code { } .outsource-btn { - border: 1px solid #666; + border: 1px solid colors.$grey700; border-radius: 4px; color: white; outline: 0; opacity: 0.9; padding: 0px !important; - border: 1px solid #ccc; + border: 1px solid colors.$grey200; cursor: pointer; } .outsource-btn:hover { - -moz-box-shadow: 0 0px 2px #666; - -webkit-box-shadow: 0 0px 2px #666; - box-shadow: 0 0px 2px #666; + -moz-box-shadow: 0 0px 2px colors.$grey700; + -webkit-box-shadow: 0 0px 2px colors.$grey700; + box-shadow: 0 0px 2px colors.$grey700; } .outsource-btn:active .outsource-price { - -moz-box-shadow: inset 0 0 5px 2px #888; - -webkit-box-shadow: inset 0 0 5px 2px #888; - box-shadow: inset 0 0 5px 2px #888; + -moz-box-shadow: inset 0 0 5px 2px colors.$grey400; + -webkit-box-shadow: inset 0 0 5px 2px colors.$grey400; + box-shadow: inset 0 0 5px 2px colors.$grey400; } .outsource-btn:active .outsource-delivery { - -moz-box-shadow: inset 0 -1px 2px 1px #888; - -webkit-box-shadow: inset 0 -1px 2px 1px #888; - box-shadow: inset 0 -1px 2px 1px #888; + -moz-box-shadow: inset 0 -1px 2px 1px colors.$grey400; + -webkit-box-shadow: inset 0 -1px 2px 1px colors.$grey400; + box-shadow: inset 0 -1px 2px 1px colors.$grey400; } .outsource-price { text-align: center; display: block; font-size: 18px; - background: #7eaf3e; + background: colors.$green300; font-weight: bold; padding: 10px; } .outsource-delivery { - background: #f4f4f4; + background: colors.$grey75; display: block; padding: 5px; margin-top: -5px; line-height: 18px; font-size: 12px; border-radius: 4px; - color: #333; + color: colors.$grey1300; - border-top: 1px solid #ccc; + border-top: 1px solid colors.$grey200; } .outsource-delivery strong { @@ -385,7 +386,7 @@ code { .lang-info { margin-top: 40px; margin-left: 10px; - color: #666; + color: colors.$grey700; font-size: 20px; } @@ -395,22 +396,22 @@ code { td[data-vote='Excellent'], td[data-vote='Verygood'], td[data-vote='Good'] { - background: #d8ead3; + background: colors.$green50; } .revision-info tr[data-vote='Poor'], td[data-vote='Poor'] { - background: #fdd7a4; + background: colors.$orange50; } .revision-info tr[data-vote='Acceptable'], td[data-vote='Acceptable'] { - background: #fff3cd; + background: colors.$orange50; } .revision-info tr[data-vote='Fail'], td[data-vote='Fail'] { - background: #f4cdcc; + background: colors.$red100; } .tablestats.revision { @@ -440,7 +441,7 @@ td[data-vote='Fail'] { #details-link { font-size: 16px; - color: #999; + color: colors.$grey400; text-shadow: none; margin-top: 15px; display: block; @@ -454,7 +455,7 @@ td[data-vote='Fail'] { position: relative; color: black; font-size: 24px; - z-index: 100000000; + z-index: var(--z-overlay); font-weight: bold; text-align: center; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); @@ -467,7 +468,7 @@ td[data-vote='Fail'] { #vote-box { width: 217px; - background: #f7f7f7; + background: colors.$grey50; height: 85px; position: absolute; right: 0px; @@ -477,10 +478,10 @@ td[data-vote='Fail'] { font-weight: bold; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3); padding: 50px 5px 10px; - z-index: 100000000; + z-index: var(--z-overlay); border-radius: 4px; - border: 1px solid #ececec; - box-shadow: 1px 1px 0px #e6e6e6; + border: 1px solid colors.$grey100; + box-shadow: 1px 1px 0px colors.$grey100; } .vote-area { @@ -497,27 +498,27 @@ td[data-vote='Fail'] { .blueline { width: 100%; height: 1px; - background: #09beec; + background: colors.$blue200; float: left; - box-shadow: 0px 1px 0px #ccc; + box-shadow: 0px 1px 0px colors.$grey200; } #vote-box[data-vote='Excellent'], #vote-box[data-vote='Verygood'], #vote-box[data-vote='Good'] { - color: #3c9423; + color: colors.$green700; } #vote-box[data-vote='Acceptable'] { - color: #eaba22; + color: colors.$orange400; } #vote-box[data-vote='Poor'] { - color: #ffa935; + color: colors.$orange600; } #vote-box[data-vote='Fail'] { - color: #e7504d; + color: colors.$red400; } table.tablestats.revision-info td, @@ -530,19 +531,19 @@ table.tablestats.revision-info th { .qa_eq_tr[data-vote='Excellent'] td, .qa_eq_tr[data-vote='Verygood'] td, .qa_eq_tr[data-vote='Good'] td { - border-color: #3c9423 !important; + border-color: colors.$green700 !important; } .qa_eq_tr[data-vote='Acceptable'] td { - border-color: #e5b007 !important; + border-color: colors.$orange400 !important; } .qa_eq_tr[data-vote='Poor'] td { - border-color: #ffa935 !important; + border-color: colors.$orange600 !important; } .qa_eq_tr[data-vote='Fail'] td { - border-color: #e7504d !important; + border-color: colors.$red400 !important; } .qa_eq_tr { @@ -570,7 +571,7 @@ table.tablestats.revision-info th { font-size: 22px; margin-bottom: 20px; font-weight: bold !important; - color: #333 !important; + color: colors.$grey1300 !important; } .vote-howto h2 { @@ -581,9 +582,9 @@ table.tablestats.revision-info th { blockquote { padding: 10px 20px; margin: 20px 30px 30px 30px; - background: #eee; + background: colors.$grey75; font-size: 16px; - border-left: 5px solid #aaa; + border-left: 5px solid colors.$grey400; width: 700px; } @@ -617,8 +618,8 @@ blockquote { overflow: scroll; } .pee-page header { - border-bottom: 1px solid #5c5c5c; - background-color: #4d4d4d; + border-bottom: 1px solid colors.$grey700; + background-color: colors.$grey700; padding: 0px 0 2px 0; margin-bottom: 20px; height: 45px; @@ -653,7 +654,7 @@ blockquote { position: relative; float: left; width: 4%; - text-shadow: 0px 0px 2px #fff; + text-shadow: 0px 0px 2px colors.$white; text-align: left; } @@ -671,12 +672,6 @@ blockquote { text-align: center; } -.chart-container .ui.segment { - /*height: 500px;*/ - border: none; - box-shadow: none; -} - .chart-container span { font-size: 18px; } @@ -696,15 +691,6 @@ blockquote { .pee-page .dropdown input { display: inline-block; } -.filter-chart-container .ui.grid { - width: 100%; - height: 100%; - margin: 0; -} -.pee-page .ui.styled.accordion { - width: 100%; - background: #eee; -} .pee-page .accordion .title { text-align: right; } diff --git a/public/css/sass/components/pages/CattoolPage.scss b/public/css/sass/components/pages/CattoolPage.scss index f9def1d3f2..f127d23d91 100644 --- a/public/css/sass/components/pages/CattoolPage.scss +++ b/public/css/sass/components/pages/CattoolPage.scss @@ -1,14 +1,12 @@ @use '../../common-main'; -@use '../../commons/icons'; -@use '../../commons/buttons'; +@use '../../commons/reset'; @use '../../commons/aria-label-tooltip'; @use "../../common"; @use '../../style'; @use '../../commons/progress-mc-bar'; -@use '../../mbc-style'; +@use '../segment/SegmentComments'; @use '../../lexiqa'; @use '../segment/SegmentFooterTabMessages'; -@use '../MarkAsCompleteButton'; @use '../header/segmentsFilter'; @use '../ReviewExtendedPanel'; //components diff --git a/public/css/sass/components/pages/ContextPreviewPage.scss b/public/css/sass/components/pages/ContextPreviewPage.scss index 96c852d8ee..386d214454 100644 --- a/public/css/sass/components/pages/ContextPreviewPage.scss +++ b/public/css/sass/components/pages/ContextPreviewPage.scss @@ -1,5 +1,4 @@ -@use '../common/SegmentedControl'; -@use '../../commons/colors'; +@use '../../tokens/colors'; .context-preview-page { width: 100%; max-width: unset; @@ -23,7 +22,7 @@ align-items: center; gap: 8px; padding: 4px; - background-color: colors.$grey5; + background-color: colors.$grey50; border: 1px solid rgba(13, 13, 28, 0.07); border-radius: 12px; @@ -69,7 +68,7 @@ line-height: 18px; height: 22px; &:hover:not(:disabled) { - background-color: colors.$grey4; + background-color: colors.$grey100; } } @@ -90,7 +89,7 @@ justify-content: space-between; gap: 8px; padding: 16px; - border-bottom: 1px solid colors.$grey4; + border-bottom: 1px solid colors.$grey100; flex-shrink: 0; position: sticky; top: 0; @@ -104,23 +103,6 @@ gap: 8px; } - .custom-segmented-control { - .segmented-control { - background-color: colors.$grey8; - } - .segmented-control__label { - line-height: 28px; - } - .segmented-control__cursor { - padding: 2px; - } - .segmented-control__cursor:before { - background-color: colors.$white; - } - .segmented-control input:checked + .segmented-control__label { - color: colors.$black; - } - } } .context-preview-hidden-warning { @@ -170,7 +152,7 @@ .context-preview-divider { width: 1px; - background-color: colors.$grey4; + background-color: colors.$grey100; flex-shrink: 0; } @@ -207,24 +189,14 @@ .context-preview-content-view, .context-preview-view-mode { height: 24px; - .segmented-control { - height: 24px; - padding: 4px; - } - .segmented-control__label { - font-size: 14px; - text-transform: none; - line-height: 20px; - color: colors.$grey7; - padding: 2px 12px; - } - .segmented-control__cursor:before { - background-color: colors.$white; - color: colors.$black; - } - .segmented-control input:checked + .segmented-control__label { - color: colors.$black; - } + --sc-height: 24px; + --sc-padding: 4px; + --sc-label-font-size: 14px; + --sc-label-line-height: 20px; + --sc-label-color: #{colors.$grey400}; + --sc-label-padding: 2px 12px; + --sc-cursor-bg: #{colors.$white}; + --sc-checked-color: #{colors.$black}; } .context-preview-loading { @@ -233,7 +205,7 @@ justify-content: center; min-height: 300px; font-size: 16px; - color: colors.$grey1; + color: colors.$grey500; } .context-preview-empty { @@ -242,7 +214,7 @@ justify-content: center; flex: 1; font-size: 14px; - color: colors.$grey1; + color: colors.$grey500; } .context-preview-error { @@ -254,13 +226,13 @@ text-align: center; h2 { - color: colors.$red800; + color: colors.$red400; margin-bottom: 12px; font-size: 20px; } p { - color: colors.$grey1; + color: colors.$grey500; font-size: 14px; } } @@ -271,7 +243,7 @@ align-items: center; gap: 8px; padding: 4px; - background-color: colors.$grey5; + background-color: colors.$grey50; border: 1px solid rgba(13, 13, 28, 0.07); border-radius: 12px; font-family: Calibri, Arial, Helvetica, sans-serif; @@ -287,7 +259,7 @@ border: none; border-radius: 8px; background-color: transparent; - color: colors.$grey6; + color: colors.$grey700; cursor: pointer; transition: background-color 0.15s ease, @@ -299,7 +271,7 @@ } &:active { - background-color: colors.$grey4; + background-color: colors.$grey100; } } @@ -337,14 +309,14 @@ img { display: block; max-width: none; - border: 1px solid colors.$grey4; + border: 1px solid colors.$grey100; box-shadow: 0 2px 8px rgba(colors.$black, 0.1); } } .context-preview-screenshot-placeholder { padding: 2rem; - color: colors.$grey1; + color: colors.$grey500; text-align: center; font-size: 14px; } diff --git a/public/css/sass/components/pages/DashboardPage.scss b/public/css/sass/components/pages/DashboardPage.scss index 77703e526f..a63b13225f 100644 --- a/public/css/sass/components/pages/DashboardPage.scss +++ b/public/css/sass/components/pages/DashboardPage.scss @@ -1,11 +1,10 @@ @use '../../common-main'; +@use '../../commons/reset'; @use '../../commons/filter-teams'; -@use '../../commons/icons'; @use '../../commons/project'; @use '../../commons/shadows'; @use '../../commons/divider'; @use '../../commons/progress-mc-bar'; -@use '../../commons/buttons'; @use '../../commons/aria-label-tooltip'; @use '../../modals/split_modal'; @@ -19,4 +18,6 @@ @use '../UserProjectDropdown'; @use '../signin/OnBoarding'; @use '../MembersFilter'; +@use '../Projects/ProjectContainer.scss'; +@use '../Projects/JobContainer.scss'; @use '../ProjectBulkActions'; diff --git a/public/css/sass/components/pages/NewProjectPage.scss b/public/css/sass/components/pages/NewProjectPage.scss index 1d25a74fc0..ba8574c730 100644 --- a/public/css/sass/components/pages/NewProjectPage.scss +++ b/public/css/sass/components/pages/NewProjectPage.scss @@ -1,8 +1,7 @@ @use '../../common-main'; -@use '../../commons/buttons'; +@use '../../commons/reset'; @use '../../commons/filter-teams'; -@use '../../commons/icons'; @use '../../commons/team-member'; @use '../../commons/aria-label-tooltip'; @use '../../commons/tooltip'; @@ -15,7 +14,8 @@ @use '../Footer'; @use '../SettingsPanel'; -@use '../../commons/colors'; +@use '../../tokens/colors'; +@use '../../commons/variables'; @use '../UploadFile'; .new_project__page { @@ -34,7 +34,8 @@ .translation-options, #additional-input-params { display: flex; - justify-content: center; + justify-content: space-between; + align-items: center; } .translation-options { @@ -45,12 +46,12 @@ opacity: 0.4; h2, label { - color: colors.$grey1; + color: colors.$grey500; } input, .select-with-icon__wrapper .select { cursor: not-allowed; - background-color: colors.$grey9; + background-color: colors.$grey75; } } } @@ -63,7 +64,7 @@ } .label-tmx-select > span:last-of-type { - color: colors.$linkBlue; + color: colors.$blue700; &[aria-label]::after { min-width: 260px; white-space: normal; @@ -87,20 +88,11 @@ } } -.wrapper-upload .upload-box-not-logged, .upload-waiting-logged { - border: 1px dashed #ccc; - margin: 18px 0; - min-height: 200px; - -moz-border-radius: 4px; - border-radius: 4px; - background: #fff; - display: flex; - flex-direction: column; - justify-content: center; align-items: stretch; - text-align: center; - gap: 12px; +} +.wrapper-upload .upload-box-not-logged, +.upload-waiting-logged { .upload-loading { background: url(/public/img/loading.gif) 47% 50% no-repeat !important; background-size: 24px !important; @@ -114,7 +106,7 @@ } } span { - color: colors.$grey6; + color: colors.$grey700; font-size: 24px; line-height: 20px; } @@ -152,11 +144,9 @@ .upload-input { padding: 3px 5px 3px 9px; font-size: 16px !important; - -moz-border-radius: 2px; - border-radius: 2px; + border-radius: variables.$border-radius-default; border: 1px solid rgba(34, 36, 38, 0.15); - height: 36px; - box-shadow: inset 0 1px 3px #ddd; + height: 40px; } } @@ -215,23 +205,10 @@ line-height: 28px !important; max-width: 85% !important; font-size: 16px !important; - i.icon-checkmark2.icon { - display: none; - } } .item { - i.icon-checkmark2.icon { - color: rgba(117, 117, 117, 0.7); - font-size: 20px; - position: absolute; - right: 7px; - display: none; - } &.active { background-color: rgba(0, 0, 0, 0.03) !important; - i.icon-checkmark2.icon { - display: block; - } } } .text .multiple-tm { @@ -244,12 +221,6 @@ margin-top: 0 !important; margin-right: 4px; } - .icon-info { - font-size: 19px; - margin-top: 1px; - margin-left: 5px; - color: rgba(117, 117, 117, 0.7); - } .tm-tooltip { text-align: left; } @@ -264,7 +235,7 @@ } } -@media only screen and (max-width: 1320px) { +@media only screen and (max-width: 1400px) { .translate-box.tmx-select, .translate-box.source, .translate-box.target, @@ -278,22 +249,12 @@ #source-lang, #target-lang { !*width: 127px ;*! - .ui.icon.search.input { - min-width: unset; - } }*/ - .ui.icon.search.input { - min-width: unset; - } - #tmx-select { &:hover { box-shadow: none !important; } - .ui.multiple.search.dropdown > .text { - width: 150px; - } } div.item { width: 100%; @@ -377,9 +338,10 @@ } } -@media only screen and (max-width: 1279px) { +@media only screen and (max-width: 1300px) { .translation-row .translation-options { flex-wrap: wrap; + justify-content: center; } .wrapper-upload { .translate-box { diff --git a/public/css/sass/components/pages/QualityReportPage.scss b/public/css/sass/components/pages/QualityReportPage.scss index 9e8d77a22c..148fb24284 100644 --- a/public/css/sass/components/pages/QualityReportPage.scss +++ b/public/css/sass/components/pages/QualityReportPage.scss @@ -1,9 +1,8 @@ @use '../../common-main'; -@use '../../commons/icons'; +@use '../../commons/reset'; @use '../../commons/shadows'; @use '../../commons/divider'; @use '../../commons/progress-mc-bar'; -@use '../../commons/buttons'; @use '../signin/OnBoarding'; @use '../../common'; @use '../segment/tagsMenu'; @@ -11,7 +10,8 @@ @use '../header/header'; @use '../header/ActionMenu'; @use '../../style'; -@use "../../commons/colors"; +@use '../../tokens/colors'; +@use '../../commons/variables'; $color-red: #fb2a0d; $color-orange: #fbaa0d; @@ -21,7 +21,7 @@ $color-yellow: #ffe600; body { font-family: Calibri, Arial, Helvetica, sans-serif; text-align: left; - background: colors.$grey5; + background: colors.$grey50; font-size: 16px; min-width: 1024px; overflow-x: auto; @@ -30,1006 +30,1166 @@ body { header { min-width: 1024px; - .nav-bar { - width: 100%; - background: #002b5c !important; - .logo { - /*left: 13px;*/ - margin: 0; - } - .header-project-container-info { - width: 75%; - /*background: #00123a;*/ - color: #fff; - margin-top: 9px; - height: 47px; - .header-project-info { - display: flex; - justify-content: space-between; - align-items: center; - height: 47px; - .header-id-project-name { - display: flex; - .header-project-id { - margin-right: 20px; - } - .header-project-name { - } - } - .header-team-assignee-icon { - display: flex; - align-items: center; - .header-team { - border: 1px solid white; - padding: 5px 15px; - border-radius: 20px; - } - .header-assignee { - margin-left: 20px; - border: 1px solid #676767; - padding: 1px 12px 1px 3px; - border-radius: 20px; - background: #676767; - display: flex; - align-items: center; - flex-wrap: nowrap; - .assignee-first-name { - margin-right: 5px; - } - .header-icon-assignee { - width: 30px; - height: 30px; - margin-right: 10px; - .header-img-assignee { - width: 30px; - height: 30px; - border-radius: 50%; - } - } - } - .header-icon-dropdown { - margin-left: 10px; - width: 34px; - height: 34px; - display: flex; - justify-content: center; - align-items: center; - background: transparent; - color: white; - &:hover { - background: #676767; - } - i { - font-size: 20px; - position: relative; - top: -2px; - } - } - .ui.top.right.pointing.dropdown > .menu { - margin: 7px -4px 0 0px !important; - } - } - } - } - } +} + +header .nav-bar { + width: 100%; + background: colors.$blue900 !important; +} + +header .nav-bar .logo { + /*left: 13px;*/ + margin: 0; +} + +header .nav-bar .header-project-container-info { + width: 75%; + /*background: #00123a;*/ + color: colors.$white; + margin-top: 9px; + height: 47px; +} + +header .nav-bar .header-project-container-info .header-project-info { + display: flex; + justify-content: space-between; + align-items: center; + height: 47px; +} + +header .nav-bar .header-project-container-info .header-project-info .header-id-project-name { + display: flex; +} + +header .nav-bar .header-project-container-info .header-project-info .header-id-project-name .header-project-id { + margin-right: 20px; +} + +header .nav-bar .header-project-container-info .header-project-info .header-team-assignee-icon { + display: flex; + align-items: center; +} + +header .nav-bar .header-project-container-info .header-project-info .header-team-assignee-icon .header-team { + border: 1px solid colors.$white; + padding: 5px 15px; + border-radius: 20px; +} + +header .nav-bar .header-project-container-info .header-project-info .header-team-assignee-icon .header-assignee { + margin-left: 20px; + border: 1px solid colors.$grey700; + padding: 1px 12px 1px 3px; + border-radius: 20px; + background: colors.$grey700; + display: flex; + align-items: center; + flex-wrap: nowrap; +} + +header .nav-bar .header-project-container-info .header-project-info .header-team-assignee-icon .header-assignee .assignee-first-name { + margin-right: 5px; +} + +header .nav-bar .header-project-container-info .header-project-info .header-team-assignee-icon .header-assignee .header-icon-assignee { + width: 30px; + height: 30px; + margin-right: 10px; +} + +header .nav-bar .header-project-container-info .header-project-info .header-team-assignee-icon .header-assignee .header-icon-assignee .header-img-assignee { + width: 30px; + height: 30px; + border-radius: 50%; +} + +header .nav-bar .header-project-container-info .header-project-info .header-team-assignee-icon .header-icon-dropdown { + margin-left: 10px; + width: 34px; + height: 34px; + display: flex; + justify-content: center; + align-items: center; + background: transparent; + color: colors.$white; +} + +header .nav-bar .header-project-container-info .header-project-info .header-team-assignee-icon .header-icon-dropdown:hover { + background: colors.$grey700; +} + +header .nav-bar .header-project-container-info .header-project-info .header-team-assignee-icon .header-icon-dropdown i { + font-size: 20px; + position: relative; + top: -2px; } .qr-wrapper { width: 100%; height: calc(100% - 60px); overflow-y: auto; - .qr-container { - display: block; - .qr-container-inside { - height: 100%; - display: flex; - .qr-job-summary-container { - width: 100%; - transition: 0.3s ease; - .qr-bg-head { - height: 258px; - background: colors.$grey5; - position: absolute; - width: 100%; - z-index: -1; - } - .ui.table thead th { - background: #fff; - border: none; - border-bottom: 1px solid #f2f4f7; - border-radius: 0; - } - .ui.celled.table tr th, - .ui.celled.table tr td { - border-left: 1px solid #f2f4f7; - border-radius: 0; - } - .qr-job-summary { - max-width: 1366px; - min-width: 1024px; - margin: 0 auto; - padding: 20px 15px 0; - h3 { - } - .qr-label { - font-weight: 100; - font-size: 14px; - line-height: 12px; - padding-right: 9px; - } - .qr-production-quality { - .qr-production { - display: flex; - background: colors.$grey3; - justify-content: space-between; - width: 100%; - padding-left: 15px; - align-items: center; - position: relative; - .job-id { - font-size: 14px; - } - .source-to-target { - display: flex; - align-items: center; - .qr-to { - display: flex; - i { - font-size: 0.8em; - color: gray; - margin: 0 3px; - } - } - } - .progress-percent { - display: flex; - align-items: center; - .progress-bar { - margin: 0; - min-width: 130px; - } - .percent { - padding-left: 5px; - } - } - .qr-effort { - padding: 15px 0; - &:last-child { - padding-right: 15px !important; - } - &.translator { - max-width: 15%; - min-width: 30px; - b { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - &.qr-score { - padding: 15px 25px; - .qr-tolerated-score, - .qr-pass-score { - font-size: 20px; - } - .qr-info { - flex-direction: column; - align-items: unset; - } - } - - &.qr-pass { - background: colors.$greenDefaultTransparent; - } - &.qr-fail { - background: colors.$redDefaultTransparent; - } - &.qr-pass, - &.qr-fail, - &.qr-norevision { - margin-right: -1px; - .qr-info { - display: flex; - flex-direction: row; - align-items: center; - .qr-tolerated-score { - font-size: 42px; - margin-right: 10px; - } - } - .qr-label { - text-decoration: underline; - cursor: pointer; - width: fit-content; - padding-right: 8px; - &:hover { - text-decoration: none; - } - &:first-child { - text-decoration: none; - } - } - } - .qr-info { - display: flex; - align-items: center; - justify-content: space-between; - } - } - } - .qr-quality { - margin-top: 20px; - margin-bottom: 20px; - border-bottom: 2px solid colors.$grey4; - position: relative; - z-index: 1; - .qr-head { - display: flex; - align-items: center; - font-weight: 700; - background: colors.$grey4; - .qr-title { - text-align: center; - text-transform: capitalize; - &:first-child { - text-align: left; - } - } - } - .qr-body-list { - display: flex; - &:not(.severity_weight-line) { - &:not(.qr-body-list-first) { - border-left: 2px solid colors.$grey4; - border-right: 2px solid colors.$grey4; - border-top: 2px solid colors.$grey4; - } - - .qr-element { - border-left: 1px solid colors.$grey4; - } - } - .qr-element { - background: white; - position: relative; - &.empty { - background: colors.$grey4; - } - &:first-child { - border: none; - display: flex; - justify-content: center; - flex-direction: column; - } - &.severity_weight { - background: colors.$grey5 !important; - } - span { - top: 50%; - position: absolute; - transform: translateY(-50%); - } - } - &.severity_weight-line { - .qr-element { - padding: 2px 15px; - font-size: 14px; - } - } - } - - .qr-title, - .qr-element { - padding: 10px 15px; - } - .qr-issue, - .qr-issue-name { - width: 56%; - font-weight: 500; - font-size: 15px; - } - .qr-severity, - .severity { - width: 21%; - text-align: center; - } - .qr-total-severity, - .total-severity { - width: 20%; - background: colors.$grey1; - } - .qr-total-severity { - padding: 20px 15px; - &.job-not-passed { - background-color: #fb590d; - } - &.job-passed { - background-color: #83fd97; - &.qr-old { - background-color: #83fd97; - display: unset; - } - } - &.qr-old { - background: inherit; - display: unset; - } - .qr-info.qr-info-total { - font-size: 20px; - } - } - .total-severity { - text-align: center; - &.job-not-passed { - background-color: rgba(255, 123, 35, 0.31); - text-align: center; - border-left: 1px solid rgba(255, 123, 35, 0.31); - } - &.job-passed { - background-color: rgba(0, 255, 0, 0.23); - text-align: center; - border-left: 1px solid rgba(0, 255, 0, 0.23); - } - &.kudos-total { - display: flex; - flex-direction: column; - background: colors.$grey3; - font-weight: 700; - text-transform: capitalize; - } - } - } - } - .qr-header { - height: 70px; - h3 { - font-size: 22px; - font-weight: bold; - } - .filter-dropdown .dropdown { - font-size: 20px !important; - max-width: 190px; - } - } - .qr-feedback-container { - min-height: 73px; - position: relative; - margin-bottom: 20px; - .qr-feedback { - .qr-head { - padding: 10px 20px; - background: colors.$grey4; - .label.revision-color { - float: left; - - margin-right: 10px; - margin-top: 5px; - &.revision-1 { - background: #2fb177; - } - &.revision-2 { - background: #9352c1; - } - } - } - p { - padding: 17px; - word-wrap: break-word; - white-space: pre-line; - } - } - } - .qr-filter-container, - .qr-header { - display: flex; - justify-content: space-between; - align-items: center; - } - .qr-segment-details-container { - background: colors.$grey4; - padding: 35px 15px 15px; - .qr-segments-summary { - h3 { - margin-bottom: 0; - } - .qr-segments { - margin-top: 50px; - &:nth-child(2) { - margin-top: 0px; - } - .qr-segments-list { - .qr-single-segment { - padding-top: 30px; - &:first-child { - padding-top: 15px; - } - .qr-segment-head { - display: flex; - position: relative; - background: #fff; - align-items: center; - .segment-id { - width: 18%; - padding: 15px 0.78571429em; - } - .segment-production-container { - width: 68%; - padding: 15px 0.78571429em; - display: flex; - justify-content: space-between; - align-items: center; - margin-left: 20px; - .segment-production { - display: flex; - .production { - padding: 0 10px; - } - } - } - } - .segment-status-container { - width: 14%; - padding: 15px 0.78571429em; - .status-new { - font-size: 20px; - color: #8b8e92; - } - .status-translated { - font-size: 20px; - color: colors.$translatedBlue; - } - .status-approved { - font-size: 20px; - color: colors.$approvedGreen; - &.approved-r2 { - color: colors.$approved2Green; - } - } - .status-approved2 { - color: colors.$approved2Green; - font-size: 20px; - } - .status-draft { - font-size: 20px; - color: colors.$grey1; - } - .status-rejected { - font-size: 20px; - color: colors.$rebuttedRed; - } - } - .qr-segment-body { - border-bottom: 1px solid colors.$grey2; - border-left: 1px solid colors.$grey2; - border-right: 1px solid colors.$grey2; - .segment-container { - display: flex; - background: colors.$grey3; - &.qr-issues { - .qr-text { - width: 80%; - } - .button.no-hover { - cursor: default !important; - } - } - .segment-content { - display: flex; - align-items: center; - padding: 10px 0.78571429em; - margin-top: 1px; - .tte { - max-width: 110px; - font-weight: bold; - } - } - - .qr-segment-title { - width: 20%; - background: colors.$grey5; - justify-content: space-between; - - button { - width: 22px; - height: 22px; - border-radius: 50%; - margin: 0; - padding: 0; - border: none; - outline: none; - background: none; - cursor: pointer; - i { - font-size: 0.9em; - color: gray; - margin: 0; - } - &:hover { - background: #e8e9ef; - i { - color: #000000; - } - } - &.active, - &:active, - &:hover { - background: #e8e9ef; - i { - color: #000000; - } - } - } - } - a.qr-segment-title { - b { - text-decoration: underline; - cursor: pointer; - &:hover { - text-decoration: none; - } - } - } - &.qr-translated { - b { - color: colors.$translatedBlue; - } - } - &.qr-revised { - b { - color: colors.$approvedGreen; - } - } - &.qr-revised-2ndpass { - b { - color: colors.$approved2Green; - } - } - &.rtl-lang { - .qr-text { - direction: rtl !important; - text-align: right !important; - } - } - .qr-text { - width: 66%; - background: colors.$white; - margin-right: 1px; - display: inline-block; - color: #5f5f5f; - .added { - background: rgba(158, 255, 0, 0.5); - } - .deleted { - background: rgba(255, 46, 0, 0.3); - text-decoration: line-through; - } - .qr-issues-list { - display: flex; - flex-wrap: wrap; - margin-top: -5px; - .qr-issue { - display: flex; - align-items: center; - width: fit-content; - padding: 3px 10px; - margin-right: 5px; - margin-top: 5px; - background: colors.$grey4; - - &.automated { - padding: 0; - padding-right: 5px; - .box-icon { - display: flex; - padding: 5px 3px 5px 5px; - background: colors.$grey5; - margin-right: 6px; - &.error { - color: colors.$red800; - } - &.warning { - color: colors.$orangeDefault; - } - } - } - .qr-error { - } - .qr-severity { - margin-left: 5px; - } - .qr-comment-list { - padding: 5px 10px; - font-size: 14px; - background: #ffffff; - color: #787878; - box-shadow: - 0 0 0 #e0e0e0, +} + +.qr-wrapper .qr-container { + display: block; +} + +.qr-wrapper .qr-container .qr-container-inside { + height: 100%; + display: flex; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container { + width: 100%; + transition: 0.3s ease; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .qr-bg-head { + height: 258px; + background: colors.$grey50; + position: absolute; + width: 100%; + z-index: -1; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container { + padding: 30px 0; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-label { + font-weight: 100; + font-size: 12px; + line-height: 12px; + padding-right: 9px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-info { + font-size: 14px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-production-container { + display: flex; + gap: 16px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-production { + display: flex; + background: colors.$grey150; + padding: 0 24px; + align-items: center; + position: relative; + height: 64px; + gap: 30px; + border-radius: variables.$border-radius-default; + flex: 1 0 0; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-production .job-id { + font-size: 16px; + min-width: 90px; + color: colors.$grey700; + line-height: 24px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-production .source-to-target { + display: flex; + align-items: center; + min-width: 100px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-production .source-to-target .qr-to { + display: flex; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-production .source-to-target .qr-to i { + font-size: 0.8em; + color: gray; + margin: 0 3px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-production .progress-percent { + display: flex; + align-items: center; + gap: 8px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-production .qr-effort-container { + display: flex; + padding-left: 16px; + justify-content: flex-end; + align-items: center; + gap: 16px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort { + padding: 15px 0; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort:last-child { + padding-right: 15px !important; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort.translator { + max-width: 95px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort.translator b { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort.qr-score { + display: flex; + width: 200px; + height: 64px; + padding: 12px; + justify-content: space-between; + gap: 8px; + flex-shrink: 0; + background: colors.$grey150; + border-radius: variables.$border-radius-default; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort.qr-score > div { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + align-self: stretch; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort.qr-score > div:last-child { + align-items: flex-end; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort.qr-score .qr-ept-info { + display: flex; + align-items: center; + gap: 4px; + font-size: 12px; + line-height: 12px; + font-weight: 700; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort.qr-score .qr-tolerated-score { + font-size: 24px; + font-weight: 700; + line-height: 14px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort.qr-score .qr-info { + flex-direction: column; + align-items: unset; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort.qr-score .qr-pass-score { + font-size: 16px; + font-weight: 700; + line-height: 16px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort.qr-score .qr-threshold { + font-size: 12px; + line-height: 12px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort.qr-score.qr-pass { + background: #{rgba(colors.$green500, 0.2)}; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort.qr-score.qr-pass .qr-pass-score { + color: colors.$green500; + font-weight: 700; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort.qr-score.qr-fail { + background: #{rgba(colors.$red500, 0.2)}; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-effort.qr-score.qr-fail .qr-pass-score { + color: colors.$red500; + font-weight: 700; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality { + margin-top: 20px; + margin-bottom: 20px; + border: 1px solid colors.$grey150; + position: relative; + z-index: 1; + border-radius: variables.$border-radius-default; + overflow: hidden; + font-size: 14px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-head { + display: flex; + align-items: center; + font-weight: 700; + background: colors.$grey150; + height: 40px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-head .qr-title { + padding-left: 24px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-body-list { + display: flex; + align-items: center; + background-color: colors.$white; + height: 40px; + border-bottom: 1px solid colors.$grey100; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-body-list:last-child { + border-bottom: none; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-body-list .qr-element { + position: relative; + padding-left: 24px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-body-list.severity_weight-line { + background-color: colors.$grey50; + height: 32px; + font-weight: 700; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-body-list.severity_weight-line span { + font-weight: 400; + color: colors.$grey700; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-body-list.severity_weight-line .qr-element { + font-size: 14px; + height: 100%; + line-height: 32px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-body-list.qr-total-line { + background-color: colors.$grey150; + height: 40px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-body-list.qr-total-line .qr-issue-name, .qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-body-list.qr-total-line .total-score { + font-weight: 700; + line-height: 40px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-body-list.qr-total-line .total-score { + background-color: colors.$grey300; + height: 100%; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-issue { + font-weight: 700; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-issue, .qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-issue-name { + width: 56%; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-severity, .qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .severity { + width: 21%; + text-align: left; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .qr-total-severity, .qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .total-severity { + width: 20%; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .total-severity.job-not-passed { + background-color: rgba(255, 123, 35, 0.31); + text-align: center; + border-left: 1px solid rgba(255, 123, 35, 0.31); +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .total-severity.job-passed { + background-color: rgba(0, 255, 0, 0.23); + text-align: center; + border-left: 1px solid rgba(0, 255, 0, 0.23); +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-production-quality .qr-quality .total-severity.kudos-total { + display: flex; + flex-direction: column; + background: colors.$grey150; + font-weight: 700; + text-transform: capitalize; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-header { + margin-bottom: 26px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-header h3 { + font-size: 24px; + font-weight: bold; + line-height: 24px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-header .filter-dropdown .dropdown { + font-size: 20px !important; + max-width: 190px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-kudos { + width: 100%; + display: flex; + justify-content: space-between; + background-color: colors.$white; + padding: 0 24px; + height: 40px; + align-items: center; + border-radius: variables.$border-radius-default; + margin-bottom: 20px; + border: 1px solid colors.$grey150; + font-size: 14px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-kudos .qr-kudos-value { + padding-right: 140px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-feedback-container { + min-height: 73px; + position: relative; + margin-bottom: 20px; + background-color: colors.$white; + border-radius: variables.$border-radius-default; + overflow: hidden; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-feedback-container .qr-feedback .qr-head { + padding: 10px 20px; + background: colors.$grey150; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-feedback-container .qr-feedback .qr-head .color-dot.revision-color { + float: left; + margin-right: 10px; + margin-top: 10px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-feedback-container .qr-feedback .qr-head .color-dot.revision-color.revision-1 { + background: colors.$green800; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-feedback-container .qr-feedback .qr-head .color-dot.revision-color.revision-2 { + background: colors.$purple500; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-feedback-container .qr-feedback p { + padding: 17px; + word-wrap: break-word; + white-space: pre-line; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-filter-container, .qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container { + background: colors.$grey100; + padding: 16px; + border-radius: variables.$border-radius-default; + border: 1px solid colors.$grey150; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .document-name { + display: flex; + align-items: center; + font-size: 14px; + margin-top: 8px; + line-height: 16px; + gap: 8px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary h3 { + margin-bottom: 0; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments { + margin-top: 50px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments:nth-child(2) { + margin-top: 0px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment { + margin-top: 30px; + border-radius: variables.$border-radius-default; + overflow: hidden; + border: 1px solid colors.$grey150; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment:first-child { + margin-top: 15px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-head { + display: flex; + position: relative; + background: colors.$grey50; + align-items: center; + height: 48px; + padding: 0 24px; + font-size: 14px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-head .segment-id { + width: 20%; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-head .segment-production-container { + width: 68%; + display: flex; + justify-content: space-between; + align-items: center; + margin-left: 20px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-head .segment-production-container .segment-production { + display: flex; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-head .segment-production-container .segment-production .production { + padding: 0 10px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .segment-status-container { + width: 18%; + display: flex; + align-items: center; + justify-content: flex-end; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .segment-status-container .qr-info { + font-size: 14px; + text-transform: capitalize; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container { + display: flex; + background: colors.$white; + border-bottom: 1px solid colors.$grey100; + min-height: 40px; + font-size: 14px; + align-items: center; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container.qr-issues { + min-height: 48px !important; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container.qr-issues .qr-text { + width: 80%; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .segment-content { + display: flex; + align-items: center; + padding: 0 24px; + align-content: center; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .segment-content .tte { + max-width: 110px; + font-weight: bold; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container.qr-issues { + background-color: colors.$grey50 !important; + border-bottom: none !important; + height: unset; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container.qr-issues .segment-content { + background-color: colors.$grey50 !important; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container.qr-issues .qr-text { + padding: 4px 0; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title { + min-width: 20%; + justify-content: space-between; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title .qa-buttons.segment-production { + margin-left: 16px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title .qa-buttons { + gap: 0; + flex-wrap: nowrap; + display: flex; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title .qa-buttons button { + border-radius: 0; + position: relative; + z-index: 1; + font-size: 12px; + padding: 4px 8px; + font-weight: normal; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title .qa-buttons button:first-child { + border-radius: 3px 0 0 3px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title .qa-buttons button:last-child { + border-radius: 0 3px 3px 0; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title .qa-buttons button:only-child { + border-radius: 3px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title .qa-buttons button:not(:first-child) { + margin-left: -1px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title .qa-buttons button:hover, +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title .qa-buttons button.active { + z-index: 2; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title button i { + font-size: 0.9em; + color: gray; + margin: 0; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title button:hover { + background: colors.$grey100; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title button:hover i { + color: colors.$black; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title button.active, .qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title button:active, .qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title button:hover { + background: colors.$grey100; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title button.active i, .qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title button:active i, .qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-segment-title button:hover i { + color: colors.$black; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container a.qr-segment-title b { + text-decoration: underline; + cursor: pointer; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container a.qr-segment-title b:hover { + text-decoration: none; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container.qr-translated b { + color: colors.$blue500; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container.qr-revised b { + color: colors.$green800; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container.qr-revised-2ndpass b { + color: colors.$purple500; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container.rtl-lang .qr-text { + direction: rtl !important; + text-align: right !important; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-text { + width: 66%; + background: colors.$white; + margin-right: 1px; + display: inline-block; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-text .qr-issues-list { + display: flex; + flex-wrap: wrap; + margin-top: -5px; + margin-left: 12px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-text .qr-issues-list .qr-issue { + display: flex; + align-items: center; + width: fit-content; + padding: 3px 10px; + margin-right: 5px; + margin-top: 5px; + background: colors.$white; + border: 1px solid colors.$grey100; + border-radius: variables.$border-radius-default; + gap: 6px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-text .qr-issues-list .qr-issue.automated .box-icon { + display: flex; + background: colors.$grey50; + margin-right: 6px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-text .qr-issues-list .qr-issue.automated .box-icon.error { + color: colors.$red400; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-text .qr-issues-list .qr-issue.automated .box-icon.warning { + color: colors.$orange200; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-text .qr-issues-list .qr-issue .qr-comment-list { + padding: 5px 10px; + font-size: 14px; + background: colors.$white; + color: colors.$grey600; + box-shadow: + 0 0 0 colors.$grey200, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24) !important; - max-height: 300px; - min-width: 200px; - overflow: auto !important; - .re-comment { - font-size: 16px; - margin-bottom: 0; - .re-revisor { - color: colors.$approvedGreen; - } - .re-revisor2 { - color: colors.$approved2Green; - } - .re-translator { - color: colors.$translatedBlue; - } - .re-comment-date { - font-size: 13px; - color: colors.$grey1; - } - } - } - } - } - } - .qr-spec { - width: 14%; - justify-content: space-between; - background: #ffffff; - .spec-words { - } - .tm-percent { - background: #0abeed; - color: #ffffff; - padding: 0 3px; - font-size: 16px; - } - .per-yellow { - padding: 0 3px; - background: #ffcc00 !important; - color: #333 !important; - } - } - } - &.qr-diff-on { - .segment-container { - box-shadow: none !important; - .segment-content { - background: colors.$grey5; - .qr-issues-list { - .qr-issue { - background: #ffffff; - } - } - &.qr-text { - border-left: 1px solid #e8e9ec; - } - } - &.shadow-1 { - position: relative; - .segment-content { - background: colors.$white; - } - .qr-segment-title { - background: colors.$grey4; - flex-shrink: 0; - } - } - } - } - } - } - } - } - .select { - display: flex; - flex-direction: row; - align-items: center; - gap: 5px; - padding: 9px 46px 9px 12px; - border-radius: 40px; - height: 38px; - } - li.dropdown__option { - padding: 8px; - } - .dropdown__option span { - display: flex; - align-items: center; - gap: 8px; - font-size: 16px; - } - .custom-dropdown.select__dropdown { - background-color: #fff; - min-width: 120px; - } - .filter-category .select__dropdown-wrapper { - width: unset; - } - } - } - } - } - } - } -} -.qr-reviewType-dropdown, .filter-reviewType { - .circular.label { - &.new-color { - box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.25) inset; - background: #ffffff; - } - - &.draft-color { - background: colors.$grey1; - } - - &.translated-color { - background: colors.$translatedBlue; - } - - &.approved-color { - background: colors.$approvedGreen; - } - - &.rejected-color { - background: colors.$rebuttedRed; - } - - &.revision-color { - background: colors.$approvedGreen; - } - - &.second-revision-color, - &.approved-2ndpass-color { - background: colors.$approved2Green; - } - } + max-height: 300px; + min-width: 200px; + overflow: auto !important; } -.qr-filter-list { +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-text .qr-issues-list .qr-issue .qr-comment-list .re-comment { + font-size: 16px; + margin-bottom: 0; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-text .qr-issues-list .qr-issue .qr-comment-list .re-comment .re-revisor { + color: colors.$green800; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-text .qr-issues-list .qr-issue .qr-comment-list .re-comment .re-revisor2 { + color: colors.$purple500; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-text .qr-issues-list .qr-issue .qr-comment-list .re-comment .re-translator { + color: colors.$blue500; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-text .qr-issues-list .qr-issue .qr-comment-list .re-comment .re-comment-date { + font-size: 13px; + color: colors.$grey500; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-spec { + width: 14%; + justify-content: space-between; + background: colors.$white; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-spec .tm-percent { + padding: 0 3px; + font-size: 16px; + width: 100%; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .segment-container .qr-spec .tm-percent span[class*="badge-container"] { + width: 100%; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body.qr-diff-on .segment-container { + box-shadow: none !important; + align-items: stretch; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body.qr-diff-on .segment-container .segment-content .qr-issues-list .qr-issue { + background: colors.$white; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body.qr-diff-on .segment-container.shadow-1 { + position: relative; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body.qr-diff-on .segment-container.shadow-1 .segment-content { + background: colors.$white; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body.qr-diff-on .segment-container.shadow-1 .qr-segment-title { + background: colors.$grey100; + flex-shrink: 0; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history { display: flex; + flex-direction: column; + border-top: 1px solid colors.$grey100; + font: variables.$font-style-small; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-item { + display: flex; + min-height: 40px; + align-items: center; + align-self: stretch; + background-color: colors.$grey50; + padding: 8px 0; + padding-right: 24px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-status { + display: flex; + width: 173px; + padding: 0 4px 0 24px; align-items: center; - box-sizing: border-box; - .filter-dropdown { - display: flex; - align-items: center; - button { - height: auto; - width: auto; - line-height: unset; - } - .dropdown { - background: colors.$white !important; - } - &:nth-child(2) { - margin-left: 15px; - } - .ui.basic.button { - font-family: 'calibri', Arial, Helvetica, sans-serif; - font-size: 16px !important; - padding: 10px 20px; - border-radius: 40px; - transition: 0.3s ease; - box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.25) inset; - max-width: 155px; - min-width: 30px; - display: flex; - .text { - transition: 0.3s ease; - align-items: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - .ui.cancel.label { - position: absolute; - padding: 4px; - background-color: #d6d6d6; - border-radius: 15px; - top: 8px; - line-height: 0px; - right: 0px; - visibility: hidden; - &:hover { - background-color: #cccccc !important; - } - } - .filter-category { - margin-left: 5px; - } - .not-filtered { - .ui.basic.button { - &:hover { - box-shadow: 0px 0px 0px 1px colors.$translatedBlue inset; - color: colors.$translatedBlue !important; - } - &.disabled { - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.25) inset !important; - pointer-events: none; - } - } - } - .filtered { - .ui.basic.button { - background-color: #ffffff !important; - box-shadow: - 0 0 0 #e0e0e0, - 0 0 2px rgba(0, 0, 0, 0.12), - 0 2px 4px rgba(0, 0, 0, 0.24) !important; - color: #000000 !important; - padding: 9px 20px 9px 15px; - &:hover { - width: fit-content; - .text { - margin-right: 15px; - } - .ui.cancel.label { - visibility: unset; - right: 5px; - } - } - } - } - .active { - .ui.basic.button { - background: transparent none !important; - box-shadow: - 0 0 0 #e0e0e0, - 0 0 2px rgba(0, 0, 0, 0.12), - 0 2px 4px rgba(0, 0, 0, 0.24) !important; - color: #000000 !important; - padding: 9px 20px 9px 15px; - &:hover { - background-color: #ffffff !important; - .ui.cancel.label { - visibility: unset; - right: 5px; - } - } - } - } - .disabled { - background: unset; - opacity: 0.5 !important; - box-shadow: unset; - border: none; - pointer-events: none; - } - - .filter-toggle { - .checkbox { - left: 5px; - top: 4px; - margin: 0 !important; - float: none; - label { - &:before { - background: #dcdfe4 !important; - } - &:after { - box-shadow: inset 0 0 0 1px rgba(34, 36, 38, 0.25); - background: #ffffff; - } - } - } - } - .filter-data-sample { - display: flex; - align-items: center; - .percent-item { - margin-left: 5px; - } - .menu { - width: 220px; - .head-dropdown { - label { - display: inline-block; - width: 60%; - position: relative; - font-size: 12px; - top: 16px; - } - input { - width: 40%; - display: inline-block; - right: 0; - padding: 5px 10px; - margin-top: 10px; - } - } - } - .item, - .text { - .type-item, - .order-item { - display: inline-block; - } - .order-item { - float: right; - } - } - .text { - .order-item { - margin-left: 2px; - } - } - } - } - .clear-filter-element { - margin-left: 13px; - border-left: 1px solid #d6d6d7; - padding-left: 13px; - color: black; - display: flex; - justify-content: space-between; - width: 135px; - .clear-filter, - .select-all-filter { - display: inline; - button { - background: none; - color: grey; - text-decoration: underline; - cursor: pointer; - border: none; - padding: 0; - outline: none; - &:hover { - text-decoration: none; - } - } - } - } + gap: 8px; + align-self: stretch; + font-weight: 700; + position: relative; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-status.qr-history-status_translated .qr-history-status_point, .qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-status.qr-history-status_translated .qr-history-status_separator { + background-color: colors.$translatedBlue; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-status.qr-history-status_translated { + color: colors.$translatedBlue; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-status.qr-history-status_approved .qr-history-status_point, .qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-status.qr-history-status_approved .qr-history-status_separator { + background-color: colors.$approvedGreen; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-status.qr-history-status_approved { + color: colors.$approvedGreen; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-status.qr-history-status_approved2 .qr-history-status_point, .qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-status.qr-history-status_approved2 .qr-history-status_separator { + background-color: colors.$approved2Green; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-status.qr-history-status_approved2 { + color: colors.$approved2Green; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-status .qr-history-status_point { + width: 8px; + height: 8px; + flex-shrink: 0; + aspect-ratio: 1/1; + border-radius: 8px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-status .qr-history-status_separator { + width: 1px; + height: 24px; + position: absolute; + border-radius: 8px; + bottom: -20px; + left: 27px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-date { + display: flex; + width: 147px; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 24px; + align-self: stretch; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-version { + display: inline-block; + padding: 0 24px; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 24px; + flex: 1 0 0; + align-self: stretch; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-issue { + font-weight: 700; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history .qr-history-issue span { + font-weight: 400; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .qr-history span[class*="badge-container"] { + cursor: pointer; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .added { + background: rgba(18, 230, 130, 0.12); + color: colors.$green1000; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .qr-segments .qr-segments-list .qr-single-segment .qr-segment-body .deleted { + background: rgba(255, 46, 0, 0.3); + color: colors.$red600; + text-decoration: line-through; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .select { + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + padding: 9px 46px 9px 12px; + border-radius: 40px; + height: 38px; + line-height: 20px; +} + +.qr-segments-summary .filter-status .select span { + display: flex; + align-content: center; + align-items: center; + gap: 4px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary li.dropdown__option { +padding: 8px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .dropdown__option span { +display: flex; +align-items: center; +gap: 8px; +font-size: 16px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .custom-dropdown.select__dropdown { +background-color: colors.$white; +min-width: 120px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .filter-category { +max-width: 200px; +} + +.qr-wrapper .qr-container .qr-container-inside .qr-job-summary-container .layout__container .qr-segment-details-container .qr-segments-summary .filter-category .select__dropdown-wrapper { +width: unset; +} + +.qr-reviewType-control { +width: 200px; +} + +.qr-reviewType-control { +--sc-bg: #{colors.$black100}; +--sc-cursor-bg: #{colors.$white}; +--sc-checked-color: #{colors.$black}; +--sc-label-line-height: 40px; +} + + +.qr-reviewType-dropdown, .filter-reviewType { +.status-dot { +&.new-color { box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.25) inset; background: colors.$white; } +&.draft-color { background: colors.$grey500; } +&.translated-color { background: colors.$blue500; } +&.approved-color { background: colors.$green800; } +&.rejected-color { background: colors.$orange600; } +&.revision-color { background: colors.$green800; } +&.second-revision-color, &.approved-2ndpass-color { background: colors.$purple500; } +} +} + +.color-dot { + display: inline-block; + width: 10px; + height: 10px; + border-radius: 50%; + vertical-align: middle; + + &.revision-color { background: colors.$green800; } + &.second-revision-color { background: colors.$purple500; } +} + +.qr-filter-list { +display: flex; +align-items: center; +box-sizing: border-box; +gap: 8px; +} + +.qr-filter-list .filter-dropdown { +display: flex; +align-items: center; +gap: 8px; +} + +.qr-filter-list .filter-dropdown button { +height: auto; +width: auto; +line-height: unset; +} + +.qr-filter-list .filter-dropdown .dropdown { +background: colors.$white !important; +} + +.qr-filter-list .filter-dropdown .cancel-label { +position: absolute; +padding: 4px; +background-color: colors.$grey200; +border-radius: 15px; +top: 8px; +line-height: 0px; +right: 0px; +visibility: hidden; +} + +.qr-filter-list .filter-dropdown .cancel-label:hover { +background-color: colors.$grey200 !important; +} + +.qr-filter-list .filter-dropdown .disabled { +background: unset; +opacity: 0.5 !important; +box-shadow: unset; +border: none; +pointer-events: none; +} + +.qr-filter-list .filter-dropdown .filter-toggle .checkbox { +left: 5px; +top: 4px; +margin: 0 !important; +float: none; +} + +.qr-filter-list .filter-dropdown .filter-toggle .checkbox label:before { +background: colors.$grey150 !important; +} + +.qr-filter-list .filter-dropdown .filter-toggle .checkbox label:after { +box-shadow: inset 0 0 0 1px rgba(34, 36, 38, 0.25); +background: colors.$white; +} + +.qr-filter-list .filter-dropdown .filter-data-sample { +display: flex; +align-items: center; +} + +.qr-filter-list .filter-dropdown .filter-data-sample .percent-item { +margin-left: 5px; +} + +.qr-filter-list .filter-dropdown .filter-data-sample .menu { +width: 220px; +} + +.qr-filter-list .filter-dropdown .filter-data-sample .menu .head-dropdown label { +display: inline-block; +width: 60%; +position: relative; +font-size: 12px; +top: 16px; +} + +.qr-filter-list .filter-dropdown .filter-data-sample .menu .head-dropdown input { +width: 40%; +display: inline-block; +right: 0; +padding: 5px 10px; +margin-top: 10px; +} + +.qr-filter-list .filter-dropdown .filter-data-sample .item .type-item, .qr-filter-list .filter-dropdown .filter-data-sample .item .order-item, .qr-filter-list .filter-dropdown .filter-data-sample .text .type-item, .qr-filter-list .filter-dropdown .filter-data-sample .text .order-item { +display: inline-block; +} + +.qr-filter-list .filter-dropdown .filter-data-sample .item .order-item, .qr-filter-list .filter-dropdown .filter-data-sample .text .order-item { +float: right; +} + +.qr-filter-list .filter-dropdown .filter-data-sample .text .order-item { +margin-left: 2px; +} + +.qr-filter-list .clear-filter-element { +margin-left: 13px; +border-left: 1px solid colors.$grey200; +padding-left: 13px; +color: colors.$black; +display: flex; +justify-content: space-between; +width: 135px; +} + +.qr-filter-list .clear-filter-element .clear-filter, .qr-filter-list .clear-filter-element .select-all-filter { +display: inline; +} + +.qr-filter-list .clear-filter-element .clear-filter button, .qr-filter-list .clear-filter-element .select-all-filter button { +background: none; +color: grey; +text-decoration: underline; +cursor: pointer; +border: none; +padding: 0; +outline: none; +} + +.qr-filter-list .clear-filter-element .clear-filter button:hover, .qr-filter-list .clear-filter-element .select-all-filter button:hover { +text-decoration: none; } .no-segments-found { - text-align: center; - margin: 15px 0; - border: 1px dashed #c3c8d0; - padding: 15px; +text-align: center; +margin: 15px 0; +border: 1px dashed colors.$grey200; +padding: 15px; } -.one.column.spinner { - margin: 30px 15px 15px; - z-index: 1; - .ui.active.inverted.dimmer { - background: colors.$grey4; - } +.spinner-row__inner { +margin: 30px 15px 15px; +z-index: 1; } .per-orange { - background: colors.$rebuttedRed !important; - color: #fff !important; +background: colors.$orange600 !important; +color: colors.$white !important; } .per-blue { - background: colors.$translatedBlue !important; - color: #fff !important; +background: colors.$blue500 !important; +color: colors.$white !important; } .per-green { - background: colors.$approvedGreen !important; - color: #fff !important; +background: colors.$green800 !important; +color: colors.$white !important; } .per-yellow { - background: #ffcc00 !important; - color: #333 !important; +background: colors.$orange200 !important; +color: colors.$grey1300 !important; } .per-red { - background: colors.$redDefault !important; - color: #fff !important; +background: colors.$red500 !important; +color: colors.$white !important; } .per-gray { - background: #aaa !important; - color: colors.$grey1 !important; +background: colors.$grey400 !important; +color: colors.$grey500 !important; } -.ui.popup.bottom.right.qr-score-popup { - max-width: 350px !important; - code { - font-size: 12px; - } +.tooltip--wide { +max-width: 360px; +width: max-content; } diff --git a/public/css/sass/components/pages/SignInPage.scss b/public/css/sass/components/pages/SignInPage.scss index c044174a13..cb43a66c35 100644 --- a/public/css/sass/components/pages/SignInPage.scss +++ b/public/css/sass/components/pages/SignInPage.scss @@ -1,4 +1,5 @@ +@use '../../commons/reset'; @use '../../common-main'; @use '../../common'; @use '../signin/OnBoarding'; diff --git a/public/css/sass/components/segment/Editor.scss b/public/css/sass/components/segment/Editor.scss index 73d8f1b6b7..bda926d413 100644 --- a/public/css/sass/components/segment/Editor.scss +++ b/public/css/sass/components/segment/Editor.scss @@ -1,3 +1,4 @@ +@use '../../tokens/colors'; /** * Draft v0.11.7 * @@ -6,4 +7,4 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -.DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:inherit;text-align:initial}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:left}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:left}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;width:100%;z-index:1}.public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:left}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin:16px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:left;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1,lower-alpha) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2,lower-roman) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4,lower-alpha) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4} \ No newline at end of file +.DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:inherit;text-align:initial}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:left}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:left}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:colors.$grey400;position:absolute;width:100%;z-index:1}.public-DraftEditorPlaceholder-hasFocus{color:colors.$grey300}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:left}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin:16px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:left;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1,lower-alpha) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2,lower-roman) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4,lower-alpha) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4} \ No newline at end of file diff --git a/public/css/sass/components/segment/Glossary.scss b/public/css/sass/components/segment/Glossary.scss index 1ffcbb2fd6..f60d9aa586 100644 --- a/public/css/sass/components/segment/Glossary.scss +++ b/public/css/sass/components/segment/Glossary.scss @@ -1,23 +1,23 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; .qaCheckGlossaryItem { display: inline-block; position: relative; background: rgba(255, 169, 2, 0.24); - border-bottom: 2px solid #ffa902; + border-bottom: 2px solid colors.$orange400; cursor: pointer; } .glossaryItem { display: inline-block; position: relative; - border-bottom: 2px solid colors.$translatedBlue; + border-bottom: 2px solid colors.$blue500; cursor: pointer; } .blacklistItem { background: rgba(255, 47, 34, 0.24); - border-bottom: 2px solid #ff2f22; + border-bottom: 2px solid colors.$red500; display: inline-block; position: relative; } diff --git a/public/css/sass/components/segment/IcuHighlight.scss b/public/css/sass/components/segment/IcuHighlight.scss index 71f1bca38d..1209bceb13 100644 --- a/public/css/sass/components/segment/IcuHighlight.scss +++ b/public/css/sass/components/segment/IcuHighlight.scss @@ -1,12 +1,12 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; .icuItem { display: inline-block; position: relative; - color: colors.$linkBlue; + color: colors.$blue700; &.icuItem-error { - color: colors.$redDefault; + color: colors.$red500; cursor: pointer; } } diff --git a/public/css/sass/mbc-style.scss b/public/css/sass/components/segment/SegmentComments.scss similarity index 51% rename from public/css/sass/mbc-style.scss rename to public/css/sass/components/segment/SegmentComments.scss index 1ff224b620..61a6b691c8 100644 --- a/public/css/sass/mbc-style.scss +++ b/public/css/sass/components/segment/SegmentComments.scss @@ -1,4 +1,5 @@ -@use 'commons/colors'; +@use '../../tokens/colors'; +@use '../../commons/variables'; /* ****** ****** @@ -7,8 +8,8 @@ ****** */ -.mbc-comment-balloon-inner { - background: #ffffff; +.comment-balloon-inner { + background: colors.$white; box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.3); } @@ -18,7 +19,7 @@ ****** */ -.mbc-comments-wrap { +.comments-wrap { min-height: 100%; max-height: 200px; overflow-y: auto; @@ -34,28 +35,9 @@ Past comment wrap common ****** */ -.mbc-thread-wrap { +.comment-thread { padding: 10px; - border-top: 1px solid #f2f4f7; -} - -/* - ****** - Past comment thread wrap status active in history balloon - ****** - */ -.mbc-history-balloon .mbc-thread-wrap-active { - border-bottom: 2px solid #dadada; -} - -/* - ****** - Past comment thread wrap status resolved - ****** - */ -.mbc-thread-wrap-resolved { - background: rgba(124, 197, 118, 0.15); - border-bottom: 2px solid rgba(124, 197, 118, 0.6); /* $approvedGreen */ + border-top: 1px solid colors.$grey50; } /* @@ -63,12 +45,12 @@ Show past comment ****** */ -.mbc-show-comment:not(:first-of-type) { +.comment-item:not(:first-of-type) { margin-top: 14px; } -.mbc-comments-wrap .mbc-show-comment:not(:last-of-type) { - background-color: colors.$grey5; +.comments-wrap .comment-item:not(:last-of-type) { + background-color: colors.$grey50; border-radius: 4px; padding: 8px; > .bc-show-comment-top { @@ -77,10 +59,8 @@ align-items: center; } } -.mbc-comments-wrap - .mbc-thread-wrap-resolved - .mbc-show-comment:not(:last-of-type) { - background-color: rgba(colors.$greenDefaultTransparent, 0.2); +.comments-wrap .comment-thread-resolved .comment-item:not(:last-of-type) { + background-color: rgba(colors.$green300, 0.2); border-radius: 4px; } @@ -89,13 +69,13 @@ Past comment details ****** */ -.mbc-comment-info-wrap { +.comment-info-wrap { clear: both; margin-top: -6px; } -.mbc-comment-info { - color: #7f7f7f; +.comment-info { + color: colors.$grey600; display: inline-block; font-size: 11px; font-weight: lighter; @@ -105,8 +85,8 @@ /* Message past comment details */ -.mbc-comment-body { - color: #323232; +.comment-body { + color: colors.$grey1300; font-size: 14px; margin: 12px 0 16px; word-wrap: break-word; @@ -120,26 +100,26 @@ ****** */ -.mbc-comment-input { +.comment-input { border-radius: 2px; outline-width: 0; width: 100%; } -.mbc-comment-textarea { +.comment-textarea { position: relative; word-break: normal; outline: none; - color: #000; - border: 1px solid #dedede; - box-shadow: inset 0 1px 2px #ccc; - -webkit-box-shadow: inset 0 1px 2px #ccc; + color: colors.$black; + border: 1px solid colors.$grey200; + box-shadow: inset 0 1px 2px colors.$grey200; + -webkit-box-shadow: inset 0 1px 2px colors.$grey200; min-height: 40px; overflow-y: auto !important; max-height: 160px; border-radius: 20px; - .mbc-comment-input__highlighter, + .comment-input__highlighter, textarea { border: unset !important; outline: unset !important; @@ -148,50 +128,50 @@ } } -.mbc-comment-textarea:hover { +.comment-textarea:hover { border-color: rgba(34, 36, 38, 0.35); box-shadow: none; } -.mbc-comment-textarea:focus { - border: 1px solid #96c8da; - box-shadow: inset 0px 0px 2px 2px #96c8da; +.comment-textarea:focus { + border: 1px solid colors.$grey300; + box-shadow: inset 0px 0px 2px 2px colors.$grey300; padding-top: 10px; padding-bottom: 10px; } -.mbc-comment-textarea:empty:not(:focus):before { +.comment-textarea:empty:not(:focus):before { content: attr(data-placeholder); - color: #999; + color: colors.$grey400; position: absolute; top: 10px; pointer-events: none; } -.mbc-comment-input__suggestions { +.comment-input__suggestions { z-index: 2 !important; } -.mbc-comment-input__suggestions__list { +.comment-input__suggestions__list { background-color: colors.$white; - border: 1px solid colors.$grey8; + border: 1px solid colors.$grey200; } -.mbc-comment-input__suggestions__item { +.comment-input__suggestions__item { padding: 5px 15px; - border-bottom: 1px solid colors.$grey9; + border-bottom: 1px solid colors.$grey75; } -.mbc-comment-input__suggestions__item--focused { - background-color: rgba(colors.$grey9, 0.6); - color: colors.$translatedBlue; +.comment-input__suggestions__item--focused { + background-color: rgba(colors.$grey75, 0.6); + color: colors.$blue500; } .tagging-item { - color: colors.$translatedBlue; + color: colors.$blue500; } .tagging-item-textarea { - background-color: rgba(colors.$translatedBlue, 0.3); + background-color: rgba(colors.$blue500, 0.3); border-radius: 10px; padding: 2px 0; } @@ -209,7 +189,7 @@ Common label ****** */ -.mbc-comment-label { +.comment-label { display: block; font-size: 14px; } @@ -217,20 +197,20 @@ /* Username label */ -.mbc-comment-username-label { - color: #323232; +.comment-username-label { + color: colors.$grey1300; font-weight: bold; margin-bottom: 4px; padding: 5px 5px 2px 0; span { - color: colors.$grey7; + color: colors.$grey400; } } /* Anonymous label Account for inline edit functionality and state */ -.mbc-comment-anonymous-label { +.comment-anonymous-label { padding: 2px 5px 2px 0; } @@ -239,24 +219,20 @@ Resolved labels ****** */ -.mbc-resolved-comment { +.comment-resolved { margin-top: 10px; } -.mbc-comment-resolvedby { +.comment-resolvedby { /*width: 110px;*/ } -.mbc-comment-resolved-label { - color: colors.$approvedGreen; /* per-green line 2350 style.css */ +.comment-resolved-label { + color: colors.$green800; /* per-green line 2350 style.css */ font-size: 12px; font-weight: bold; } -a.ui.button.mbc-comment-delete-btn { - margin-right: 8px; -} - /* ****** ****** @@ -264,16 +240,16 @@ a.ui.button.mbc-comment-delete-btn { ****** ****** */ -a.mbc-comment-link-btn, -a.mbc-comment-link-btn:visited { - color: #7f7f7f; +a.comment-link-btn, +a.comment-link-btn:visited { + color: colors.$grey600; display: inline-block; font-size: 14px; text-decoration: underline; } -a.mbc-comment-link-btn:hover, -a.mbc-comment-link-btn:active { +a.comment-link-btn:hover, +a.comment-link-btn:active { text-decoration: none; } @@ -282,9 +258,9 @@ a.mbc-comment-link-btn:active { View link in history balloon ****** */ -a.mbc-view-link:link, -a.mbc-view-link:visited { - color: #0798bc; +a.comment-view-link:link, +a.comment-view-link:visited { + color: colors.$blue600; padding: 0 4px 6px 0; } @@ -293,11 +269,11 @@ a.mbc-view-link:visited { View comment ordinal number ****** */ -.mbc-nth-comment-label { +.comment-nth-label { display: block; - border-bottom: 1px solid #cccccc; + border-bottom: 1px solid colors.$grey200; font-size: 16px; - color: #9a9a9a; + color: colors.$grey400; line-height: 1.8; margin-bottom: 6px; } @@ -328,7 +304,7 @@ a.mbc-view-link:visited { Icon in comment intent element ****** */ -.mbc-comment-icon { +.comment-icon { position: relative; background-color: colors.$black100; display: flex; @@ -338,7 +314,7 @@ a.mbc-view-link:visited { gap: 6px; align-self: stretch; cursor: pointer; - border-radius: 8px; + border-radius: variables.$border-radius-default; width: 18px; height: 18px; color: black; @@ -355,16 +331,16 @@ a.mbc-view-link:visited { /* Highlight element unique properties */ -.mbc-comment-highlight { - background: #ffe400; +.comment-highlight { + background: colors.$orange200; } /* Invitation element unique properties */ -.mbc-comment-highlight-invite { - background: colors.$darkBlue; - color: colors.$grey3; +.comment-highlight-invite { + background: colors.$blue900; + color: colors.$grey150; position: absolute; } @@ -373,7 +349,7 @@ a.mbc-view-link:visited { Commenting opened. Draw comment ballon ****** */ -article .mbc-comment-balloon-outer { +article .comment-balloon-outer { display: block; padding-right: 15px; margin-bottom: 30px; @@ -391,12 +367,12 @@ article .mbc-comment-balloon-outer { ****** */ -.mbc-ajax-message-wrap { +.comment-ajax-wrap { padding: 6px 4px; } /* Warnings style.css line 136 */ -.mbc-warnings { - color: #d65959; +.comment-warnings { + color: colors.$red400; font-size: 14px; } @@ -408,101 +384,10 @@ article .mbc-comment-balloon-outer { ****** */ -#mbc-history { - cursor: pointer; - font-size: 23px; - height: 27px; - padding-top: 12px; - position: relative; - text-align: center; - width: 45px; - &.open svg { - opacity: 1; - } - &.mbc-history-balloon-icon-has-no-comments { - opacity: 0.4; - cursor: default; - pointer-events: none; - } -} - -#mbc-history:hover { - color: #ccc; -} - -.mbc-badge-container { - position: absolute; - top: -3px; - right: -4px; - display: flex; - .mbc-badge, - .mbc-badge-resolved { - padding: 1px 6px; - background: #0bbeec; - color: #fff; - font-size: 10px; - text-align: center; - border-radius: 25px; - vertical-align: middle; - line-height: 16px; - height: 17px; - display: block; - } - .mbc-badge-resolved { - background-color: colors.$greenDefaultTransparent; - } -} - -/* - ****** - ****** - History ballon - ****** - ****** - */ - -.mbc-history-balloon-outer { - background-color: rgba(247, 247, 247, 1); /* #f7f77f */ - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); - margin-top: 20px; - padding-top: 10px; - position: absolute; - right: 10px; - width: 300px; - text-align: left; -} - -.mbc-view-comment-wrap { - margin-bottom: 10px; -} - -.mbc-history-balloon { - background-color: rgba(247, 247, 247, 1); /* #ffffff */ - padding: 0; - position: relative; -} - -.mbc-history-balloon .mbc-thread-wrap { - padding: 14px 0; -} - -.mbc-history-balloon .mbc-show-comment { - padding: 0 24px; -} - -.mbc-history-balloon .mbc-thread-wrap:not(:last-of-type) .mbc-show-comment { - /*border-bottom: 1px solid #dadada;*/ -} - -.mbc-history-balloon-has-comment { - max-height: 500px; - overflow-y: auto; -} - /* Truncate text in label */ -.mbc-truncate { +.comment-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -511,8 +396,7 @@ article .mbc-comment-balloon-outer { /* Set box model to border and account for border's width */ -.mbc-comment-balloon-outer *, -.mbc-history-balloon-outer * { +.comment-balloon-outer * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -523,7 +407,7 @@ article .mbc-comment-balloon-outer { Triangle in balloon ****** */ -.mbc-triangle { +.comment-triangle { height: 0; width: 0; } @@ -531,8 +415,8 @@ article .mbc-comment-balloon-outer { /* Triangle top top in history balloon */ -.mbc-triangle-top { - border-right: 14px solid rgba(247, 247, 247, 1); /* #f7f77f */ +.comment-triangle-top { + border-right: 14px solid colors.$grey50; /* #f7f77f */ border-top: 14px solid transparent; -webkit-filter: drop-shadow(-3px -1px 2px rgba(0, 0, 0, 0.1)); filter: drop-shadow(-3px -1px 2px rgba(0, 0, 0, 0.1)); @@ -544,8 +428,8 @@ article .mbc-comment-balloon-outer { /* Triangle top left in comment balloon */ -.mbc-triangle-topleft { - border-top: 12px solid #ffffff; +.comment-triangle-topleft { + border-top: 12px solid colors.$white; border-left: 14px solid transparent; -webkit-filter: drop-shadow(-1px 0px 0px rgba(0, 0, 0, 0.2)); filter: drop-shadow(-1px 0px 0px rgba(0, 0, 0, 0.2)); @@ -554,12 +438,12 @@ article .mbc-comment-balloon-outer { top: 15px; position: absolute; } -section.editor .mbc-triangle.mbc-triangle-topleft { +section.editor .comment-triangle.comment-triangle-topleft { top: -10px; } -.mbc-open-view { - border-top: 12px solid #ffffff; +.comment-open-view { + border-top: 12px solid colors.$white; border-left: 14px solid transparent; -webkit-filter: drop-shadow(-1px 0px 0px rgba(0, 0, 0, 0.2)); filter: drop-shadow(-2px 0px 1px rgba(0, 0, 0, 0.2)); @@ -567,11 +451,11 @@ section.editor .mbc-triangle.mbc-triangle-topleft { position: absolute; } -.mbc-open-view.mbc-re-messages { +.comment-open-view.comment-re-messages { bottom: 0px; border-top: unset; border-left: unset; - border-bottom: 12px solid #ffffff; + border-bottom: 12px solid colors.$white; border-left: 14px solid transparent; filter: drop-shadow(-1px 2px 1px rgba(0, 0, 0, 0.2)); } @@ -582,35 +466,21 @@ Close icon ballon - Right panel ********** */ -.re-close-balloon { - width: 24px; - height: 24px; - background: #fff; - position: absolute; +.comment-close-btn { + background: colors.$white !important; + position: absolute !important; z-index: 1; right: 0px; top: -14px; - border-radius: 50%; - color: #7b7b7b; - cursor: pointer; -} - -.re-close-balloon:hover { - color: #000000; + border-radius: 50% !important; + color: colors.$grey600 !important; } -.re-close-balloon i { - margin: 0; - padding: 0; - width: 0; - height: 0; - position: relative; - top: 4px; - left: 4px; - font-size: 16px; +.comment-close-btn:hover { + color: colors.$black !important; } -.re-close-balloon.re-close-err { +.comment-close-btn.comment-close-btn--error { top: -15px; right: -15px; } @@ -620,14 +490,14 @@ Close icon ballon - Right panel Clearfix helpers ****** */ -.mbc-clearfix:before, -.mbc-clearfix:after { +.comment-clearfix:before, +.comment-clearfix:after { display: table; content: ''; line-height: 0; } -.mbc-clearfix:after { +.comment-clearfix:after { clear: both; } @@ -637,32 +507,32 @@ Close icon ballon - Right panel ****** */ -.mbc-comment-icon-button { +.comment-icon-btn { visibility: hidden; display: block; } -.mbc-comment-icon-button.has-object { +.comment-icon-btn.has-object { visibility: visible; display: block; } -section:hover .mbc-comment-icon-button, -.segment-side-buttons:hover .mbc-comment-icon-button, -.mbc-comment-icon-button:hover { +section:hover .comment-icon-btn, +.segment-side-buttons:hover .comment-icon-btn, +.comment-icon-btn:hover { visibility: visible; } -.mbc-comment-bottom { +.comment-bottom { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; - .input-checkbox > span { - color: colors.$grey7; + div[class*='input-checkbox'] > span { + color: colors.$grey400; font-size: 14px; } } -.mbc-thread-wrap-bottom { +.comment-thread-footer { display: flex; justify-content: flex-end; gap: 8px; diff --git a/public/css/sass/components/segment/SegmentFooterTabMessages.scss b/public/css/sass/components/segment/SegmentFooterTabMessages.scss index 5ee92cab92..3e6845c3bf 100644 --- a/public/css/sass/components/segment/SegmentFooterTabMessages.scss +++ b/public/css/sass/components/segment/SegmentFooterTabMessages.scss @@ -1,3 +1,4 @@ +@use '../../tokens/colors'; div.segment-notes ul.graysmall li { width: 90%; } @@ -18,7 +19,7 @@ div.segment-notes ul.graysmall li span.note-label { box-sizing: border-box; position: relative; border: 5px solid white; - border-right: 1px solid #ccc; + border-right: 1px solid colors.$grey200; float: left; } @@ -41,13 +42,13 @@ div.segment-notes ul.graysmall li span.note-label { background-position: 50%; overflow-y: auto; cursor: pointer; - box-shadow: 0 0 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), + box-shadow: 0 0 0 colors.$grey200, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24); margin: 0 auto; } .segments-preview-container:hover { - box-shadow: 0 0 0 #e0e0e0, 0 0 8px rgba(0, 0, 0, 0.12), + box-shadow: 0 0 0 colors.$grey200, 0 0 8px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.24); transition: 0.2s ease; } @@ -61,7 +62,7 @@ div.segment-notes ul.graysmall li span.note-label { .segments-notes-container div.context-group { text-align: left; padding: 12px 20px; - color: #666; + color: colors.$grey700; list-style: none; font-size: 16px; word-break: break-word; @@ -108,16 +109,16 @@ div.segment-notes ul.graysmall li span.note-label { text-align: center; margin: 0 3px; border-radius: 2px; - border: 1px solid #c6c6c6; + border: 1px solid colors.$grey200; cursor: pointer; - color: #666666; + color: colors.$grey700; outline: none; position: relative; background-color: transparent; } .tab-preview-screenshot button:hover { - color: #000000; + color: colors.$black; } .tab-preview-screenshot button i { diff --git a/public/css/sass/components/segment/Tag.scss b/public/css/sass/components/segment/Tag.scss index ac594d44b1..d616fede55 100644 --- a/public/css/sass/components/segment/Tag.scss +++ b/public/css/sass/components/segment/Tag.scss @@ -1,3 +1,5 @@ +@use '../../tokens/colors'; +@use '../../commons/variables'; .DraftEditor-root { .public-DraftEditor-content > div > div { // everything @@ -9,7 +11,7 @@ content: '\21B5'; //↵ padding: 0 4px; font-size: 14px; - color: #08beec; + color: colors.$blue200; } } } @@ -52,10 +54,10 @@ display: flex; flex-direction: row; padding: 0 2px; - background: #002b5c; + background: colors.$blue900; font-size: 13px; line-height: 1.3; - color: #fff; + color: colors.$white; vertical-align: middle; word-break: break-all; //max-width: 11px; @@ -82,7 +84,7 @@ span { &::selection { - color: #fff; + color: colors.$white; background: transparent; } } @@ -96,7 +98,7 @@ bottom: 0; width: 0; height: 0; - border-left: 8px solid #002b5c; + border-left: 8px solid colors.$blue900; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } @@ -111,7 +113,7 @@ top: 0; width: 0; height: 0; - border-right: 8px solid #002b5c; + border-right: 8px solid colors.$blue900; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } @@ -126,7 +128,7 @@ top: 0; width: 0; height: 0; - border-right: 8px solid #002b5c; + border-right: 8px solid colors.$blue900; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } @@ -137,15 +139,15 @@ bottom: 0; width: 0; height: 0; - border-left: 8px solid #002b5c; + border-left: 8px solid colors.$blue900; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } } &.tag-ph { - border-radius: 8px; - background: #788190; + border-radius: variables.$border-radius-default; + background: colors.$grey500; margin: 0 1px; padding: 0 4px; max-width: unset; @@ -223,36 +225,36 @@ /* Tag states */ &.tag-inactive { - color: #788190; - background: #f5f6f7; + color: colors.$grey500; + background: colors.$grey50; &:before { - border-left-color: #f5f6f7; + border-left-color: colors.$grey50; } &:after { - border-right-color: #f5f6f7; + border-right-color: colors.$grey50; } } &.tag-clicked { - background-color: #2fb177; + background-color: colors.$green800; opacity: 1; &:before { - border-left-color: #2fb177; + border-left-color: colors.$green800; } &:after { - border-right-color: #2fb177; + border-right-color: colors.$green800; } } &.tag-focused { cursor: grab; opacity: 1; - background-color: #0099cc; + background-color: colors.$blue500; &:before { - border-left-color: #0099cc; + border-left-color: colors.$blue500; } &:after { - border-right-color: #0099cc; + border-right-color: colors.$blue500; } &:active { cursor: grabbing; @@ -262,35 +264,35 @@ &.tag-selected { cursor: grab; opacity: 1; - background-color: #0099cc; - box-shadow: 2px 0px 5px 2px #02c0ffa3; + background-color: colors.$blue500; + box-shadow: 2px 0px 5px 2px colors.$blue500; &:before { - border-left-color: #0099cc; + border-left-color: colors.$blue500; } &:after { - border-right-color: #0099cc; + border-right-color: colors.$blue500; } &:active { cursor: grabbing; } } &.tag-mismatch-error { - background-color: #e02020; + background-color: colors.$red500; &:before { - border-left-color: #e02020; + border-left-color: colors.$red500; } &:after { - border-right-color: #e02020; + border-right-color: colors.$red500; } } &.tag-mismatch-warning { - background-color: #ffcc01; + background-color: colors.$orange200; &:before { - border-left-color: #ffcc01; + border-left-color: colors.$orange200; } &:after { - border-right-color: #ffcc01; + border-right-color: colors.$orange200; } } @@ -302,7 +304,7 @@ &.tag-nbsp { font-size: 18px; margin: 0 2px; - color: #08beec; + color: colors.$blue200; background: transparent; &:before { border: none; @@ -312,7 +314,7 @@ } span { &::selection { - color: #002b5c; + color: colors.$blue900; } } } @@ -320,7 +322,7 @@ &.tag-word-joiner { font-size: 16px; margin: 0; - background: #08beec; + background: colors.$blue200; &:before { border: none; } @@ -329,7 +331,7 @@ } span { &::selection { - color: #002b5c; + color: colors.$blue900; } } } @@ -338,7 +340,7 @@ font-size: 17px; font-weight: 900; margin: 0; - color: #08beec; + color: colors.$blue200; background-color: transparent; &:before { border: none; @@ -348,7 +350,7 @@ } span { &::selection { - color: #002b5c; + color: colors.$blue900; } } } @@ -367,7 +369,7 @@ top: -7px; padding: 0 4px; font-size: 14px; - color: #08beec; + color: colors.$blue200; border: none; } } @@ -381,7 +383,7 @@ top: -7px; padding: 0 4px; font-size: 14px; - color: #08beec; + color: colors.$blue200; border: none; } } @@ -389,7 +391,7 @@ &.tag-tab { font-size: 14px; margin: 0 2px; - color: #08beec; + color: colors.$blue200; background: transparent; &:before { border: none; @@ -399,26 +401,38 @@ } span { &::selection { - color: #002b5c; + color: colors.$blue900; } } } &.tag-split { - font-size: 14px; - font-family: 'icomoon'; - margin: 0 2px; - color: #08beec; - background: transparent; + position: relative; + color: colors.$blue200; + background-color: transparent; + &:before { - border: none; + content: ''; + position: relative; + top: 4px; + display: inline-block; + width: 18px; + height: 18px; + background: currentColor; + vertical-align: middle; + + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.75 1.5h-1.5v21h1.5v-21Z'/%3E%3Cpath fill-rule='evenodd' d='M7.5 3.75H3a1.5 1.5 0 0 0-1.5 1.5v13.5a1.5 1.5 0 0 0 1.5 1.5h4.5a1.5 1.5 0 0 0 1.5-1.5V5.25a1.5 1.5 0 0 0-1.5-1.5Zm0 1.5v13.5H3V5.25h4.5ZM16.5 3.75H21a1.5 1.5 0 0 1 1.5 1.5v13.5a1.5 1.5 0 0 1-1.5 1.5h-4.5a1.5 1.5 0 0 1-1.5-1.5V5.25a1.5 1.5 0 0 1 1.5-1.5Zm4.5 15V5.25h-4.5v13.5H21Z' clip-rule='evenodd'/%3E%3C/svg%3E") + center / contain no-repeat; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.75 1.5h-1.5v21h1.5v-21Z'/%3E%3Cpath fill-rule='evenodd' d='M7.5 3.75H3a1.5 1.5 0 0 0-1.5 1.5v13.5a1.5 1.5 0 0 0 1.5 1.5h4.5a1.5 1.5 0 0 0 1.5-1.5V5.25a1.5 1.5 0 0 0-1.5-1.5Zm0 1.5v13.5H3V5.25h4.5ZM16.5 3.75H21a1.5 1.5 0 0 1 1.5 1.5v13.5a1.5 1.5 0 0 1-1.5 1.5h-4.5a1.5 1.5 0 0 1-1.5-1.5V5.25a1.5 1.5 0 0 1 1.5-1.5Zm4.5 15V5.25h-4.5v13.5H21Z' clip-rule='evenodd'/%3E%3C/svg%3E") + center / contain no-repeat; } &:after { border: none; } span { + display: none; &::selection { - color: #002b5c; + color: colors.$blue900; } } &:hover { @@ -427,19 +441,19 @@ color: red; position: absolute; font-size: 18px; - margin-left: 1px; - margin-top: -22px; + margin-left: 5px; + margin-top: -18px; } } } .index-counter { margin-left: 2px; margin-right: -3px; - background-color: #444c54; + background-color: colors.$grey700; border-radius: 10px; padding-left: 5px; padding-right: 5px; - box-shadow: inset 0px 0px 0px 1px #788190; + box-shadow: inset 0px 0px 0px 1px colors.$grey500; } } @@ -447,7 +461,7 @@ position: absolute; width: 140px; height: 32px; - background-color: #ccc; + background-color: colors.$grey200; top: -35px; border-radius: 2px; display: flex; @@ -466,7 +480,7 @@ left: 50%; transform: translateX(-50%); width: max-content; //240px; - background-color: #fff; + background-color: colors.$white; border-radius: 4px; display: -webkit-box; display: -webkit-flex; @@ -501,7 +515,7 @@ width: 14px; height: 14px; transform: rotate(45deg) translateX(-50%); - background: #ffffff; + background: colors.$white; } .tooltip-error-wrapper { @@ -552,19 +566,14 @@ } } .tooltip-error-ignore { - color: #757575; + color: colors.$grey600; text-decoration: none; cursor: pointer; border-radius: 0 4px 4px 0; padding-left: 10px; height: 40px; &:hover { - color: #525252; - } - .icon-cancel-circle:before { - line-height: 40px; - float: left; - font-size: 18px; + color: colors.$grey700; } .tooltip-error-ignore-text { margin-left: 5px; @@ -616,8 +625,8 @@ padding: 1rem 0; font-weight: 700; line-height: 17px; - border-bottom: 1px solid #e0e3e8; - background: #fff; + border-bottom: 1px solid colors.$grey150; + background: colors.$white; align-items: center; cursor: default; .tag { @@ -636,7 +645,7 @@ } .tag-menu-suggestion { - border-bottom: 1px solid #e0e3e8; + border-bottom: 1px solid colors.$grey150; padding: 4px 0; color: rgb(0, 85, 184); text-overflow: ellipsis; @@ -647,7 +656,7 @@ cursor: pointer; &:hover, &.active { - background-color: #f2f5f7; + background-color: colors.$grey50; font-weight: 700; .tag-placeholder { transition: opacity 0.25s; @@ -669,19 +678,17 @@ &.tag-open { margin: 0 12px 0 0; } - &.tag-placeholder { - span:not(.index-counter) { - display: block; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } + &.tag-placeholder span:not(.index-counter) { + display: block; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } } .place-here-tips { - border: 1px solid #08beec; - color: #08beec; + border: 1px solid colors.$blue200; + color: colors.$blue200; border-radius: 2px; padding: 1px 2px; line-height: 1.1; diff --git a/public/css/sass/components/segment/TooltipInfo.scss b/public/css/sass/components/segment/TooltipInfo.scss index dff65da8f8..005ac8bdf9 100644 --- a/public/css/sass/components/segment/TooltipInfo.scss +++ b/public/css/sass/components/segment/TooltipInfo.scss @@ -1,8 +1,9 @@ +@use '../../tokens/colors'; .tooltip { position: absolute; width: 140px; height: 32px; - background-color: #ccc !important; + background-color: colors.$grey200 !important; top: -35px; border-radius: 2px; display: flex; diff --git a/public/css/sass/components/segment/issuesContainer.scss b/public/css/sass/components/segment/issuesContainer.scss index d99e6163a3..ec51020918 100644 --- a/public/css/sass/components/segment/issuesContainer.scss +++ b/public/css/sass/components/segment/issuesContainer.scss @@ -1,252 +1,247 @@ -@use "../../commons/colors"; -section { - .issues-container { - display: none; - } +@use "../../tokens/colors"; + +section .issues-container { + display: none; } + section.readonly .issues-container { display: none; } -.editor { - &.loaded { - .issues-container { - display: inline-block !important; - width: 100%; - main-bottom: 0px; - border-bottom: 1px solid #ffffff; - position: relative; - z-index: 3; - top: 0px; - border-top: 1px solid #ccc; - background: #ffffff !important; - .border-box-issue { - width: 50%; - display: inline-block; - vertical-align: top; - .creation-issue-container { - padding: 1em; - box-sizing: border-box; - .field { - margin: 1em 0em 1em; - display: inline-block; - width: 50%; - .ui.dropdown { - border: 1px solid #888; - border-radius: 2px !important; - &:hover { - border: 1px solid #96c8da; - } - .text { - background: none; - font-weight: 700; - } - } - } - .select-category { - .category { - padding: 8px 15px 4px 17px; - .ellipsis-messages { - max-width: 95%; - min-width: 30px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - background: yellow; - &.other-class { - max-width: 100%; - } - &.example-class { - max-width: 50%; - } - } - i { - float: right; - font-size: 12px; - } - .sub-category { - width: 100%; - box-sizing: content-box; - margin-left: -1px; - margin-top: -1px; - border-top: 0 !important; - border-radius: 0 0 2px 2px; - &.visible { - border: 1px solid #96c8da; - box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); - } - .item { - padding: 15px 10px 15px 15px !important; - i { - margin-left: 2em; - } - } - } - } - } - .select-severity { - .item:first-child { - display: none; - } - } - } - .issues-list { - display: inline-block; - width: 100%; - margin-top: 15px; - margin-bottom: 0px; - text-align: left; - .issue-item { - display: inline-block; - width: 47.3%; - min-width: 250px; - margin: 0 5px 10px; - vertical-align: top; - transition: 0.3s ease; - .issue { - background: #ffffff; - padding: 5px 5px 5px 10px; - box-shadow: 0 0 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), - 0 2px 4px rgba(0, 0, 0, 0.24) !important; - .issue-head, - .issue-activity-icon { - display: inline-block; - vertical-align: top; - } - .issue-head { - width: 75%; - .type_issue_name, - .sub_type_issue_name, - .severity_issue_name { - display: inline-block; - vertical-align: top; - position: relative; - top: 3px; - font-weight: 700; - margin-right: 4px; - } - .type_issue_name { - } - .sub_type_issue_name { - max-width: 65%; - min-width: 30px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-weight: 100; - } - .severity_issue_name { - } - } - .issue-activity-icon { - width: 25%; - text-align: right; - button { - padding: 3px; - text-align: center; - margin-right: 5px; - background: transparent; - box-shadow: 0 0 0 1px #bcbcbc inset; - border: none; - outline: none; - &.re-active { - background: #e9e9e9; - i { - color: #333333; - } - } - &:hover { - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset; - i { - color: #333333; - } - } - &:active { - background: #e3e3e3; - } - &:focus { - box-shadow: 0 0 0 1px #96c8da inset; - } - &:last-child { - margin-right: 0; - } - i { - margin-right: 0; - color: grey; - position: relative; - top: 1px; - } - &.re-message { - i { - color: colors.$approvedGreen; - } - &:hover { - i { - color: #65a060; - } - } - } - } - } - } - .comments-view { - .re-add-comment, - .re-comment-list { - padding: 5px 10px; - font-size: 18px; - background: #f0f2f5; - color: #787878; - box-shadow: 0 0 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), - 0 2px 4px rgba(0, 0, 0, 0.24) !important; - } - .re-add-comment { - input { - height: 30px; - border-radius: 30px; - box-sizing: border-box; - } - } - .re-comment-list { - font-size: 14px; - background: #ffffff; - .re-comment { - margin-bottom: 0; - .re-revisor { - color: colors.$approvedGreen; - } - .re-revisor2 { - color: colors.$approved2Green; - } - .re-translator { - color: colors.$translatedBlue; - } - .re-selected-text { - color: #000; - } - .re-comment-date { - font-size: 13px; - } - } - } - } - } - @media only screen and (max-width: 1180px) { - .issue-item { - width: 95%; - .sub_type_issue_name { - max-width: 57% !important; - } - } - } - } - } - &.add-issue-segment { - .category, - .category-selected .severity { - border: 1px solid colors.$approvedGreen !important; - box-shadow: inset 0 0 3px colors.$approvedGreen; - } - } - } +.editor.loaded .issues-container { + display: inline-block !important; + width: 100%; + main-bottom: 0px; + border-bottom: 1px solid colors.$white; + position: relative; + z-index: 3; + top: 0px; + border-top: 1px solid colors.$grey200; + background: colors.$white !important; +} + +.editor.loaded .issues-container .border-box-issue { + width: 50%; + display: inline-block; + vertical-align: top; +} + +.editor.loaded .issues-container .border-box-issue .creation-issue-container { + padding: 1em; + box-sizing: border-box; +} + +.editor.loaded .issues-container .border-box-issue .creation-issue-container .field { + margin: 1em 0em 1em; + display: inline-block; + width: 50%; +} + +.editor.loaded .issues-container .border-box-issue .creation-issue-container .select-category .category { + padding: 8px 15px 4px 17px; +} + +.editor.loaded .issues-container .border-box-issue .creation-issue-container .select-category .category .ellipsis-messages { + max-width: 95%; + min-width: 30px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + background: yellow; +} + +.editor.loaded .issues-container .border-box-issue .creation-issue-container .select-category .category .ellipsis-messages.other-class { + max-width: 100%; +} + +.editor.loaded .issues-container .border-box-issue .creation-issue-container .select-category .category .ellipsis-messages.example-class { + max-width: 50%; +} + +.editor.loaded .issues-container .border-box-issue .creation-issue-container .select-category .category i { + float: right; + font-size: 12px; +} + +.editor.loaded .issues-container .border-box-issue .creation-issue-container .select-category .category .sub-category { + width: 100%; + box-sizing: content-box; + margin-left: -1px; + margin-top: -1px; + border-top: 0 !important; + border-radius: 0 0 2px 2px; +} + +.editor.loaded .issues-container .border-box-issue .creation-issue-container .select-category .category .sub-category.visible { + border: 1px solid colors.$grey300; + box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); +} + +.editor.loaded .issues-container .border-box-issue .creation-issue-container .select-category .category .sub-category .item { + padding: 15px 10px 15px 15px !important; +} + +.editor.loaded .issues-container .border-box-issue .creation-issue-container .select-category .category .sub-category .item i { + margin-left: 2em; +} + +.editor.loaded .issues-container .border-box-issue .creation-issue-container .select-severity .item:first-child { + display: none; +} + +.editor.loaded .issues-container .border-box-issue .issues-list { + display: inline-block; + width: 100%; + margin-top: 15px; + margin-bottom: 0px; + text-align: left; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item { + display: inline-block; + width: 47.3%; + min-width: 250px; + margin: 0 5px 10px; + vertical-align: top; + transition: 0.3s ease; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue { + background: colors.$white; + padding: 5px 5px 5px 10px; + box-shadow: 0 0 0 colors.$grey200, 0 0 2px rgba(0, 0, 0, 0.12), + 0 2px 4px rgba(0, 0, 0, 0.24) !important; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue .issue-head, +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue .issue-activity-icon { + display: inline-block; + vertical-align: top; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue .issue-head { + width: 75%; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue .issue-head .type_issue_name, +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue .issue-head .sub_type_issue_name, +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue .issue-head .severity_issue_name { + display: inline-block; + vertical-align: top; + position: relative; + top: 3px; + font-weight: 700; + margin-right: 4px; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue .issue-head .sub_type_issue_name { + max-width: 65%; + min-width: 30px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-weight: 100; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue .issue-activity-icon { + width: 25%; + text-align: right; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue .issue-activity-icon button { + padding: 3px; + text-align: center; + margin-right: 5px; + background: transparent; + box-shadow: 0 0 0 1px colors.$grey300 inset; + border: none; + outline: none; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue .issue-activity-icon button:hover { + box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue .issue-activity-icon button:hover i { + color: colors.$grey1300; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue .issue-activity-icon button:active { + background: colors.$grey100; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue .issue-activity-icon button:focus { + box-shadow: 0 0 0 1px colors.$grey300 inset; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue .issue-activity-icon button:last-child { + margin-right: 0; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .issue .issue-activity-icon button i { + margin-right: 0; + color: grey; + position: relative; + top: 1px; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .comments-view .re-add-comment, +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .comments-view .re-comment-list { + padding: 5px 10px; + font-size: 18px; + background: colors.$grey75; + color: colors.$grey600; + box-shadow: 0 0 0 colors.$grey200, 0 0 2px rgba(0, 0, 0, 0.12), + 0 2px 4px rgba(0, 0, 0, 0.24) !important; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .comments-view .re-add-comment input { + height: 30px; + border-radius: 30px; + box-sizing: border-box; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .comments-view .re-comment-list { + font-size: 14px; + background: colors.$white; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .comments-view .re-comment-list .re-comment { + margin-bottom: 0; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .comments-view .re-comment-list .re-comment .re-revisor { + color: colors.$green800; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .comments-view .re-comment-list .re-comment .re-revisor2 { + color: colors.$purple500; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .comments-view .re-comment-list .re-comment .re-translator { + color: colors.$blue500; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .comments-view .re-comment-list .re-comment .re-selected-text { + color: colors.$black; +} + +.editor.loaded .issues-container .border-box-issue .issues-list .issue-item .comments-view .re-comment-list .re-comment .re-comment-date { + font-size: 13px; +} + +@media only screen and (max-width: 1180px) { + .editor.loaded .issues-container .border-box-issue .issues-list .issue-item { + width: 95%; + } + + .editor.loaded .issues-container .border-box-issue .issues-list .issue-item .sub_type_issue_name { + max-width: 57% !important; } } + +.editor.loaded .issues-container.add-issue-segment .category, +.editor.loaded .issues-container.add-issue-segment .category-selected .severity { + border: 1px solid colors.$green800 !important; + box-shadow: inset 0 0 3px colors.$green800; +} diff --git a/public/css/sass/components/segment/segment.scss b/public/css/sass/components/segment/segment.scss index 23e2eeabc4..a88c912d42 100644 --- a/public/css/sass/components/segment/segment.scss +++ b/public/css/sass/components/segment/segment.scss @@ -1,14 +1,14 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; @use '../../commons/variables'; .segment-selected-inBulk:not(.opened) { .body > .text { - background-color: #edf4fd !important; + background-color: colors.$blue50 !important; } .segment-add-inBulk { display: block; } &:hover .body > .text { - background-color: #edf4fd !important; + background-color: colors.$blue50 !important; } } @@ -24,12 +24,12 @@ display: none; } &:not(.editor):not(.muted):hover { - background: colors.$grey4; - color: #000; + background: colors.$grey100; + color: colors.$black; } &.segment-selected { - background: #c8cbd5 !important; - border: 1px solid #989898; + background: colors.$grey200 !important; + border: 1px solid colors.$grey400; } } @@ -40,14 +40,14 @@ body.cattool { display: none; } &.segment-selected-inBulk :hover { - background: #edf4fd !important; + background: colors.$blue50 !important; } } .editor.segment-selected-inBulk { - background: #edf4fd; + background: colors.$blue50; &:hover { - background: #edf4fd !important; + background: colors.$blue50 !important; } } } @@ -57,15 +57,15 @@ section { .header { height: 24px; width: 100%; - color: colors.$grey1; + color: colors.$grey500; font-size: 12px; - background: colors.$grey4 !important; + background: colors.$grey100 !important; margin-bottom: 0px; .percentuage { position: relative; display: none; width: 45px; - color: #fff; + color: colors.$white; font-size: 12px; text-decoration: none; font-weight: 100; @@ -87,9 +87,9 @@ section { .repetition { margin: 0 auto; text-transform: uppercase; - color: #fff; + color: colors.$white; font-size: 12px; - background: colors.$grey2; + background: colors.$grey300; padding: 4px 8px; position: relative; z-index: 12; @@ -117,7 +117,7 @@ section { } } } - &.opened { + &.opened .target{ .buttons { display: flex; align-items: center; @@ -125,6 +125,11 @@ section { text-align: right; z-index: 0; position: relative; + gap: 16px; + justify-content: flex-end; + button { + text-transform: uppercase; + } } .segment-body-content { .warnings-block { @@ -149,73 +154,6 @@ section { margin-top: 10px; margin-left: -20px; font-size: 14px; - .alert-block { - display: inline-block; - width: 48%; - margin: 0 1%; - color: #6a6a69; - min-height: 41px; - &.error-alert { - background: #fdeae2; - .icon-column { - background-color: colors.$redDefaultTransparent; - color: colors.$redDefault; - } - } - &.warning-alert { - background: #fff4e3; - .icon-column { - background-color: colors.$orangeDefaultTransparent; - color: colors.$orangeDefault; - } - } - &.info-alert { - background: colors.$grey3; - .icon-column { - background-color: colors.$grey2; - color: colors.$grey1; - } - } - .icon { - padding: 8px 8px 10px 8px; - font-size: 18px; - margin: 0; - } - } - ul { - width: 100%; - display: table; - min-height: 41px; - li { - display: table-cell; - height: 100%; - } - .icon-column { - width: 10%; - position: relative; - vertical-align: middle; - text-align: center; - } - .content-column { - width: 90%; - position: relative; - padding: 5px 8px; - vertical-align: middle; - p:first-child { - margin-top: 0em; - margin-bottom: 0; - line-height: 13px; - } - p:last-child { - margin-bottom: 0em; - line-height: 13px; - } - .error-solution { - margin-top: 5px; - font-size: 96%; - } - } - } } } &.slide-right { @@ -233,7 +171,7 @@ section { flex-direction: column; } .collection-type-separator { - color: #777; + color: colors.$grey600; font-size: 16px; float: left; width: 100%; @@ -290,3 +228,73 @@ section { } } } + +section .segment-body-content .warnings-block { + .alert-block { + display: inline-block; + width: 48%; + margin: 0 1%; + color: colors.$grey700; + min-height: 41px; + &.error-alert { + background: colors.$grey75; + .icon-column { + background-color: colors.$red100; + color: colors.$red500; + } + } + &.warning-alert { + background: colors.$grey75; + .icon-column { + background-color: colors.$orange100; + color: colors.$orange200; + } + } + &.info-alert { + background: colors.$grey150; + .icon-column { + background-color: colors.$grey300; + color: colors.$grey500; + } + } + .icon { + padding: 8px 8px 10px 8px; + font-size: 18px; + margin: 0; + } + } + ul { + width: 100%; + display: table; + min-height: 41px; + li { + display: table-cell; + height: 100%; + } + .icon-column { + width: 10%; + position: relative; + vertical-align: middle; + text-align: center; + } + .content-column { + width: 90%; + position: relative; + padding: 5px 8px; + vertical-align: middle; + p:first-child { + margin-top: 0em; + margin-bottom: 0; + line-height: 13px; + } + p:last-child { + margin-bottom: 0em; + line-height: 13px; + } + .error-solution { + margin-top: 5px; + font-size: 96%; + } + } + } +} diff --git a/public/css/sass/components/segment/segmentFooter.scss b/public/css/sass/components/segment/segmentFooter.scss index 9833f5d67c..1d5df120cd 100644 --- a/public/css/sass/components/segment/segmentFooter.scss +++ b/public/css/sass/components/segment/segmentFooter.scss @@ -1,18 +1,10 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; +@use 'commons/variables'; .tm-match-note-tooltip-content { text-align: left; } -.submenu { - .icon-warning2 { - color: #ea862c; - position: absolute; - top: 8px; - right: 10px; - } -} - .sub-editor { &.concordances { &.extended.have-results { @@ -33,11 +25,11 @@ input { display: inline-block; width: 100%; - border: 1px solid #aaa; + border: 1px solid colors.$grey400; padding: 2px 0.4%; border-radius: 2px; - box-shadow: inset 0 1px 2px #ddd; - -webkit-box-shadow: inset 0 1px 2px #ddd; + box-shadow: inset 0 1px 2px colors.$grey200; + -webkit-box-shadow: inset 0 1px 2px colors.$grey200; text-align: left; min-height: 20px; } @@ -65,7 +57,7 @@ margin: 0; .ai-feature-grey-label { - color: colors.$grey7; + color: colors.$grey400; } } @@ -86,14 +78,13 @@ justify-content: space-between; gap: 16px; padding: 8px 12px 8px 16px; - border: 1px solid colors.$grey3; + border: 1px solid colors.$grey150; border-radius: 6px; - - > div { - display: flex; - flex-direction: column; - justify-content: space-between; - } + } + > div > div { + display: flex; + flex-direction: column; + justify-content: space-between; } } @@ -118,12 +109,12 @@ .ai-feature-option-alternative-description { font-size: 12px; - color: colors.$grey7; + color: colors.$grey400; } .ai-feature-alternatives-for { p { - color: colors.$grey6; + color: colors.$grey700; } } @@ -132,7 +123,7 @@ } .ai-feature-content-error { - color: colors.$grey6; + color: colors.$grey700; > span { font-weight: bold; @@ -147,3 +138,206 @@ } } } +/*submenu*/ +.submenu { + background: colors.$white; + text-align: left; + width: 100%; +} + +.submenu:after { + content: '.'; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +section.loaded .submenu { + display: block; + border-bottom-left-radius: variables.$border-radius-default; + border-bottom-right-radius: variables.$border-radius-default; + overflow: hidden; + + &:has(.active) { + border-bottom-left-radius: unset; + border-bottom-right-radius: unset; + } +} + +.loaded { + overflow: visible !important; +} + +.submenu li { + float: left; + position: relative; + width: auto !important; + background: colors.$grey100; + z-index: 1; + border-bottom: 1px solid colors.$grey150; + cursor: pointer; + user-select: none; + + &:last-child { + border-top-right-radius: variables.$border-radius-default; + + > a { + border-top-right-radius: variables.$border-radius-default; + } + } + .notLoading { + color: colors.$orange400; + margin-left: 12px; + } +} + +.submenu li.active { + border-bottom: 1px solid white; + background-color: colors.$white; +} + +.submenu a { + -webkit-transition: all 100ms ease-in; + -moz-transition: all 100ms ease-in; + padding: 5px 20px; + display: block; + color: colors.$grey500; + font-size: 16px; + float: left; + text-decoration: none; + border-right: 2px solid colors.$grey150; + border-top: 2px solid colors.$grey150; +} + +.submenu .notification:hover { + border: 0; +} + +.submenu a:hover { + background: colors.$grey50; + color: colors.$grey500; + -moz-box-shadow: none; + //position: relative; + -webkit-box-shadow: none; +} + +.submenu .on { + background: colors.$white; + color: colors.$black; + font-size: 14px; + text-shadow: none; +} + +.tab-switcher.loading-tab a { + color: colors.$grey400; + padding-right: 36px; +} + +.loading-tab .loader.loader_on { + left: unset; + right: 12px; + top: 6px; +} + +.submenu li a { + outline: none; + display: flex; + align-items: center; + + .number { + margin-left: 4px; + } +} + +.submenu li.active a { + //background: #fff !important; + outline: none; + color: colors.$black; +} + +.submenu li.modified a { + color: red; +} + +.sub-editor { + display: none; + float: left; + width: 100%; + background: colors.$white; +} + +.sub-editor.open { + display: block; +} + +.sub-editor.matches .overflow { + min-height: 50px; + max-height: 424px; + overflow-y: auto; +} +.sub-editor.matches .overflow span.loader { + bottom: 20px; +} + +.addtmx-tr .open-popup-addtm-tr { + height: 13px; + width: 140px; + position: absolute; + bottom: -24px; + right: 0px; + border-radius: 0 0 0 2px; + color: colors.$white; + padding: 3px 10px 7px 4px; + font-size: 12px; + background: colors.$blue500; + box-shadow: 0px 2px 4px 0px colors.$grey600; + z-index: 2; +} + +.sub-editor.concordances .results { + float: left; + width: 100%; +} + +.concordances .more { + display: inline-block; + text-decoration: none; + color: colors.$white; + padding: 0 10px; + background: colors.$grey400; + font-size: 14px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + min-width: 40px; + line-height: 20px; + position: relative; + top: 2px; + cursor: pointer; +} + +.sub-editor .cc-search { + background: none; + clear: both; +} + +.sub-editor .cc-search.loading { + background: url(/public/img/loading.gif) 50% 22px no-repeat; + float: left; + width: 100%; + background-size: 20px 20px; +} + +.sub-editor .cc-search.loading { + background-position-x: 49.8%; +} + +.footer-message { + margin-left: 20px; + background: colors.$orange200 !important; + padding: 2px 10px; +} + +.sub-editor .cc-search .search-target { + width: 44.2%; +} \ No newline at end of file diff --git a/public/css/sass/components/segment/segmentFooterTabAiAssistant.scss b/public/css/sass/components/segment/segmentFooterTabAiAssistant.scss index 485d9bade8..d92416ced9 100644 --- a/public/css/sass/components/segment/segmentFooterTabAiAssistant.scss +++ b/public/css/sass/components/segment/segmentFooterTabAiAssistant.scss @@ -1,4 +1,4 @@ -@use "../../commons/colors"; +@use "../../tokens/colors"; .ai-assistant-container { display: flex; @@ -27,7 +27,7 @@ .feedback-container { display: flex; gap: 20px; - color: colors.$grey6; + color: colors.$grey700; } .feedback-container-submited { @@ -53,35 +53,35 @@ align-content: center; justify-content: center; align-items: center; - border: solid 1px colors.$grey8; + border: solid 1px colors.$grey200; border-radius: 4px; cursor: pointer; } .like { - color: colors.$approvedGreen; + color: colors.$green800; margin-right: 8px; &:hover, &.active { - border-color: colors.$approvedGreen; - background-color: rgba(colors.$approvedGreen, 0.1); + border-color: colors.$green800; + background-color: rgba(colors.$green800, 0.1); } } .dislike { - color: colors.$redDefault; + color: colors.$red500; &:hover, &.active { - border-color: colors.$redDefault; - background-color: rgba(colors.$redDefault, 0.1); + border-color: colors.$red500; + background-color: rgba(colors.$red500, 0.1); } } .submited { border: none; - background-color: rgba(colors.$grey1, 0.1); + background-color: rgba(colors.$grey500, 0.1); cursor: unset; } @@ -106,7 +106,7 @@ display: flex; flex-direction: column; - border-top: solid 1px colors.$grey3; + border-top: solid 1px colors.$grey150; } .tm-matches-title { diff --git a/public/css/sass/components/segment/segmentFooterTabGlossary.scss b/public/css/sass/components/segment/segmentFooterTabGlossary.scss index 8ec9b8d5dc..ce4744ba04 100644 --- a/public/css/sass/components/segment/segmentFooterTabGlossary.scss +++ b/public/css/sass/components/segment/segmentFooterTabGlossary.scss @@ -1,612 +1,658 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; +@use '../../commons/variables'; + .tab.glossary { outline: none; +} - .glossary-select, - .input-with-label__wrapper { - position: relative; - display: flex; - flex-direction: column; - text-align: left; - label { - display: block; - margin-bottom: 4px; - font-size: 14px; - line-height: 16px; - color: colors.$grey6; - } - } - .glossary-select { - .select-with-icon__wrapper { - z-index: 2; - svg { - color: colors.$grey2; - } - } - .select { - border-radius: 4px; - line-height: 16px; - } - .select__dropdown-wrapper .custom-dropdown { - margin-top: 0; - - .dropdown__search-bar { - box-shadow: none; - padding: 0; - box-sizing: border-box; - - svg { - display: none; - } - input { - width: 100%; - } - } - - .dropdown__list { - .glossary-option { - display: flex; - flex-direction: row; - width: 100%; - - input[type='checkbox'] { - accent-color: colors.$translatedBlue; - } - label { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin: 0 0 0 8px; - } - } - .dropdown__option span { - width: 90%; - } - .dropdown__option--is-active-option { - background-color: unset; - color: unset; - } - .dropdown__option--is-no-results-found { - background-color: unset; - color: colors.$grey7; - } - .dropdown__option--is-highlighted-option, - .dropdown__option:hover { - background-color: colors.$grey8; - } - .button-create-glossary-key { - width: 100%; - text-align: left; - color: colors.$grey6; - font-style: italic; - font-size: 14px; - border: none; - background: none; - cursor: pointer; - padding: 0; - - &:hover { - color: colors.$grey6; - } - } - } - } - .select__dropdown-wrapper .custom-dropdown::before { - content: none; - } - } - .domain-select { - .select__dropdown-wrapper .custom-dropdown { - .dropdown__list { - .dropdown__option--is-active-option { - background-color: colors.$grey4; - color: colors.$grey6; - } - .dropdown__option--is-no-results-found { - display: none; - } - .dropdown__option--is-highlighted-option, - .dropdown__option:hover { - background-color: colors.$grey8; - } - .domain-option { - border: 1px solid colors.$grey7; - border-radius: 12px; - padding: 0 6px 0 6px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - min-width: 18px; - text-align: center; - } - .button-create-option { - color: colors.$grey7; - font-style: italic; - font-size: 12px; - border: none; - background: none; - cursor: pointer; - - &:hover { - color: colors.$grey6; - } - } - } - } - } - input:not([type='radio']), - textarea { - border: 1px solid colors.$grey2; - border-radius: 4px; - padding: 4px 8px; - outline: none; - font-size: 14px; - line-height: 16px; - &:focus, - &:focus-visible { - border-color: colors.$linkBlueTransparent; - } - &.input-large { - height: 64px; - } - } +.tab.glossary input, +.tab.glossary textarea { + border-radius: variables.$border-radius-default; +} - textarea { - resize: none; - } +.tab.glossary .glossary-select, +.tab.glossary .input-with-label__wrapper { + position: relative; + display: flex; + flex-direction: column; + text-align: left; +} - .glossary_search { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - padding: 24px 32px; - border-bottom: 1px solid colors.$grey3; - justify-content: space-between; - } +.tab.glossary .glossary-select label, +.tab.glossary .input-with-label__wrapper label { + display: block; + margin-bottom: 4px; + font-size: 14px; + line-height: 16px; + color: colors.$grey700; +} - .glossary_search-container { - display: flex; - flex-direction: row; - align-items: center; - border: 1px solid #aebdcd; - border-radius: 4px; - padding: 4px; - - svg { - color: colors.$grey2; - } - } +.tab.glossary .glossary-select .select-with-icon__wrapper { + z-index: 2; +} - .glossary__button-add-container { - display: flex; - align-items: center; - } +.tab.glossary .glossary-select .select-with-icon__wrapper svg { + color: colors.$grey300; +} - input.glossary_search-input { - width: 300px; - font-size: 16px; - border: none; - - &:disabled { - background: unset; - } - - &:-webkit-autofill, - &:-webkit-autofill:hover, - &:-webkit-autofill:focus { - background-color: transparent !important; - -webkit-box-shadow: 0 0 0 50px white inset; - } - } - .glossary__button-add { - display: flex; - flex-direction: row; - color: #fff; - font-weight: bold; - text-decoration: none; - margin-left: 4px; - padding: 6px 12px; - border-radius: 2px; - font-size: 16px; - line-height: 20px; - background: colors.$translatedBlue; - user-select: none; - border: none; - white-space: nowrap; - cursor: pointer; - &:hover { - background-color: colors.$translatedBlueHover; - } - } - .glossary__button-cancel { - color: colors.$translatedBlue; - font-weight: bold; - text-decoration: none; - padding: 6px 12px; - border-radius: 2px; - font-size: 16px; - line-height: 20px; - background: colors.$white; - user-select: none; - border: none; - white-space: nowrap; - cursor: pointer; - &:hover { - color: colors.$translatedBlueHover; - } - } - .glossary_items { - max-height: 423px; - min-height: 42px; - overflow: auto; - .glossary_item { - padding: 24px 32px; - color: colors.$grey6; - font: 14px/16px calibri, Arial, Helvetica, sans-serif; - text-align: left; - &:nth-child(even) { - background: colors.$grey5; - } - .glossary_item-header { - display: flex; - } - .glossary_badge { - display: flex; - flex-shrink: 0; - > span { - color: colors.$grey6; - font-size: 12px; - line-height: 15px; - border: 1px solid colors.$grey6; - border-radius: 12px; - padding: 0 4px; - overflow: hidden; - margin-left: 8px; - min-width: 18px; - text-align: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 140px; - } - } - - .glossary_definition-container { - display: flex; - width: 100%; - border-radius: 4px; - align-items: center; - line-height: 16px; - } - - .glossary_definition { - margin-right: auto; - font-style: italic; - align-items: center; - display: flex; - svg { - margin-right: 8px; - flex-shrink: 0; - } /* - span { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } */ - } - .glossary_definition--hidden { - visibility: hidden; - } - - .glossary_source_details { - display: flex; - flex-direction: row; - margin-left: 10px; - flex-shrink: 0; - - > span { - color: colors.$grey7; - font-size: 10px; - margin-left: 8px; - } - } - - .glossary_source_tooltip { - overflow: hidden; - } - - .glossary_source { - font-size: 12px; - max-width: 180px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - span { - color: colors.$grey7; - } - } - .glossary_item-actions { - width: 40px; - display: flex; - align-items: center; - gap: 12px; - padding-left: 16px; - color: colors.$grey7; - svg:hover { - color: colors.$grey6; - } - - > * { - cursor: pointer; - } - } - .glossary_item-actions--disabled { - gap: 0px; - - > * { - cursor: unset; - } - - > *:not(.locked-button) { - opacity: 0.4; - svg:hover { - color: unset; - } - } - } - .glossary_item-body { - display: flex; - padding: 16px 0; - } - - .glossary_item-body-no-bottom-padding { - display: flex; - padding-bottom: 0; - } - - .glossary-item_column { - width: 50%; - display: flex; - flex-direction: column; - align-items: flex-start; - row-gap: 8px; - .glossary_word { - font-weight: 700; - font-size: 16px; - line-height: 20px; - color: colors.$black; - display: flex; - align-items: center; - > div { - display: flex; - align-items: center; - svg { - cursor: pointer; - color: colors.$grey7; - } - } - - .target_label { - cursor: pointer; - } - - .info-icon { - font-weight: normal; - margin-left: 8px; - } - - .forbidden-badge { - background-color: colors.$grey4; - font-weight: normal; - font-size: 14px; - color: colors.$grey6; - border-radius: 4px; - padding: 2px 6px; - margin-left: 10px; - - > :first-child { - cursor: unset; - margin-right: 4px; - } - } - } - - .glossary-description { - &[aria-label]::after { - max-width: 400px; - white-space: normal; - } - - > p { - white-space: break-spaces; - } - > p:first-child { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - } - > p:not(:first-child) { - display: none; - } - } - } - } - - .glossary_word--highlight { - animation: pulse 4s ease-in-out; - } - - .glossary_word--highlight-check { - --highlightColor: 255, 169, 2; - } - .glossary_word--highlight-glossary { - --highlightColor: 0, 153, 204; - } - .glossary_word--highlight-blacklist { - --highlightColor: 255, 47, 34; - } - - .no-terms-result { - padding-top: 10px; - } - - @keyframes pulse { - 20% { - background-color: rgba(var(--highlightColor), 0.4); - } - 80% { - background-color: rgba(var(--highlightColor), 0.4); - } - 100% { - background-color: rgba(var(--highlightColor), 0); - } - } - } - .glossary_add-container { - padding: 24px; - .glossary-form-line { - display: flex; - justify-content: space-between; - padding-top: 8px; - &.more-line { - padding-top: 24px; - - & > * > :not(:first-child) { - margin-left: 10px; - } - } - - > div { - display: flex; - flex-shrink: 0; - width: 49%; - .input-with-label__wrapper { - width: 100%; - } - } - .glossary-tm-container > div { - width: calc(100% / 3) !important; - } - - .glossary-tm-container > :not(:first-child) { - margin-left: 10px; - } - } - .glossary_buttons-container { - padding-top: 24px; - display: flex; - gap: 0; - justify-content: space-between; - color: colors.$grey2; - > div { - width: auto; - display: flex; - flex-direction: row; - } - > div:first-child { - width: 128px; - } - .glossary-more { - display: flex; - gap: 8px; - align-items: center; - cursor: pointer; - svg { - -webkit-transition: -webkit-transform 0.2s ease-in-out; - -ms-transition: -ms-transform 0.2s ease-in-out; - transition: transform 0.2s ease-in-out; - } - &.show-more { - svg { - transform: rotate(180deg); - } - } - } - } - } +.tab.glossary .glossary-select .select { + line-height: 16px; +} - .no_keys_glossary { - padding: 40px; - display: flex; - flex-direction: column; - align-items: center; +.tab.glossary .glossary-select .select__dropdown-wrapper .custom-dropdown { + margin-top: 0; +} - > p { - font-size: 16px; - } - } +.tab.glossary .glossary-select .select__dropdown-wrapper .custom-dropdown .dropdown__search-bar { + box-shadow: none; + padding: 0; + box-sizing: border-box; +} - .select--is-disabled { - background-color: colors.$grey4; - } +.tab.glossary .glossary-select .select__dropdown-wrapper .custom-dropdown .dropdown__search-bar svg { + display: none; +} + +.tab.glossary .glossary-select .select__dropdown-wrapper .custom-dropdown .dropdown__search-bar input { + width: 100%; +} - .segmented-control { - background-color: colors.$grey3; - .segmented-control__cursor { - padding: unset; - height: 74%; - margin-top: 4px; - - &::before { - width: 88%; - margin-left: 4px; - } - } - .segmented-control__label { - line-height: 32px; - padding: 0 14px 0 14px; - } +.tab.glossary .glossary-select .select__dropdown-wrapper .custom-dropdown .dropdown__list .glossary-option { + display: flex; + flex-direction: row; + width: 100%; +} + +.tab.glossary .glossary-select .select__dropdown-wrapper .custom-dropdown .dropdown__list .glossary-option input[type='checkbox'] { + accent-color: colors.$blue500; +} + +.tab.glossary .glossary-select .select__dropdown-wrapper .custom-dropdown .dropdown__list .glossary-option label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 0 0 0 8px; +} + +.tab.glossary .glossary-select .select__dropdown-wrapper .custom-dropdown .dropdown__list .dropdown__option span { + width: 90%; +} + +.tab.glossary .glossary-select .select__dropdown-wrapper .custom-dropdown .dropdown__list .dropdown__option--is-active-option { + background-color: unset; + color: unset; +} + +.tab.glossary .glossary-select .select__dropdown-wrapper .custom-dropdown .dropdown__list .dropdown__option--is-no-results-found { + background-color: unset; + color: colors.$grey400; +} + +.tab.glossary .glossary-select .select__dropdown-wrapper .custom-dropdown .dropdown__list .dropdown__option--is-highlighted-option, +.tab.glossary .glossary-select .select__dropdown-wrapper .custom-dropdown .dropdown__list .dropdown__option:hover { + background-color: colors.$grey200; +} + +.tab.glossary .glossary-select .select__dropdown-wrapper .custom-dropdown .dropdown__list .button-create-glossary-key { + width: 100%; + text-align: left; + color: colors.$grey700; + font-style: italic; + font-size: 14px; + border: none; + background: none; + cursor: pointer; + padding: 0; + + &:hover { + color: colors.$grey700; } +} + +.tab.glossary .glossary-select .select__dropdown-wrapper .custom-dropdown::before { + content: none; +} + +.tab.glossary .domain-select .select__dropdown-wrapper .custom-dropdown .dropdown__list .dropdown__option--is-active-option { + background-color: colors.$grey100; + color: colors.$grey700; +} + +.tab.glossary .domain-select .select__dropdown-wrapper .custom-dropdown .dropdown__list .dropdown__option--is-no-results-found { + display: none; +} - .search-type { - margin-left: 14px; +.tab.glossary .domain-select .select__dropdown-wrapper .custom-dropdown .dropdown__list .dropdown__option--is-highlighted-option, +.tab.glossary .domain-select .select__dropdown-wrapper .custom-dropdown .dropdown__list .dropdown__option:hover { + background-color: colors.$grey200; +} + +.tab.glossary .domain-select .select__dropdown-wrapper .custom-dropdown .dropdown__list .domain-option { + border: 1px solid colors.$grey400; + border-radius: 12px; + padding: 0 6px 0 6px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 18px; + text-align: center; +} + +.tab.glossary .domain-select .select__dropdown-wrapper .custom-dropdown .dropdown__list .button-create-option { + color: colors.$grey400; + font-style: italic; + font-size: 12px; + border: none; + background: none; + cursor: pointer; + + &:hover { + color: colors.$grey700; } +} + +.tab.glossary input:not([type='radio']), +.tab.glossary textarea { + border: 1px solid colors.$grey300; + padding: 4px 8px; + outline: none; + font-size: 14px; + line-height: 16px; +} + +.tab.glossary input:not([type='radio']):focus, +.tab.glossary input:not([type='radio']):focus-visible, +.tab.glossary textarea:focus, +.tab.glossary textarea:focus-visible { + border-color: colors.$blue300; +} + +.tab.glossary input:not([type='radio']).input-large, +.tab.glossary textarea.input-large { + height: 64px; +} + +.tab.glossary textarea { + resize: none; +} + +.tab.glossary .glossary_search { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + padding: 24px 32px; + border-bottom: 1px solid colors.$grey150; + justify-content: space-between; +} + +.tab.glossary .glossary_search-container { + display: flex; + flex-direction: row; + align-items: center; + border: 1px solid colors.$grey300; + border-radius: variables.$border-radius-default; + padding: 4px; +} + +.tab.glossary .glossary_search-container svg { + color: colors.$grey300; +} + +.tab.glossary .glossary__button-add-container { + display: flex; + align-items: center; +} + +.tab.glossary input.glossary_search-input { + width: 300px; + font-size: 16px; + border: none; +} + +.tab.glossary input.glossary_search-input:disabled { + background: unset; +} + +.tab.glossary input.glossary_search-input:-webkit-autofill, +.tab.glossary input.glossary_search-input:-webkit-autofill:hover, +.tab.glossary input.glossary_search-input:-webkit-autofill:focus { + background-color: transparent !important; + -webkit-box-shadow: 0 0 0 50px colors.$white inset; +} + +.tab.glossary .glossary__button-add { + display: flex; + flex-direction: row; + color: colors.$white; + font-weight: bold; + text-decoration: none; + margin-left: 4px; + padding: 6px 12px; + border-radius: 2px; + font-size: 16px; + line-height: 20px; + background: colors.$blue500; + user-select: none; + border: none; + white-space: nowrap; + cursor: pointer; +} + +.tab.glossary .glossary__button-add:hover { + background-color: colors.$blue600; +} + +.tab.glossary .glossary__button-cancel { + color: colors.$blue500; + font-weight: bold; + text-decoration: none; + padding: 6px 12px; + border-radius: 2px; + font-size: 16px; + line-height: 20px; + background: colors.$white; + user-select: none; + border: none; + white-space: nowrap; + cursor: pointer; +} + +.tab.glossary .glossary__button-cancel:hover { + color: colors.$blue600; +} + +.tab.glossary .glossary_items { + max-height: 423px; + min-height: 42px; + overflow: auto; +} + +.tab.glossary .glossary_items .glossary_item { + padding: 24px 32px; + color: colors.$grey700; + font: + 14px/16px calibri, + Arial, + Helvetica, + sans-serif; + text-align: left; +} + +.tab.glossary .glossary_items .glossary_item:nth-child(even) { + background: colors.$grey50; +} + +.tab.glossary .glossary_items .glossary_item .glossary_item-header { + display: flex; +} + +.tab.glossary .glossary_items .glossary_item .glossary_badge { + display: flex; + flex-shrink: 0; +} + +.tab.glossary .glossary_items .glossary_item .glossary_badge > span { + color: colors.$grey700; + font-size: 12px; + line-height: 15px; + border: 1px solid colors.$grey700; + border-radius: 12px; + padding: 0 4px; + overflow: hidden; + margin-left: 8px; + min-width: 18px; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 140px; +} + +.tab.glossary .glossary_items .glossary_item .glossary_definition-container { + display: flex; + width: 100%; + border-radius: 4px; + align-items: center; + line-height: 16px; +} + +.tab.glossary .glossary_items .glossary_item .glossary_definition { + margin-right: auto; + font-style: italic; + align-items: center; + display: flex; +} + +.tab.glossary .glossary_items .glossary_item .glossary_definition svg { + margin-right: 8px; + flex-shrink: 0; +} /* +span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} */ + +.tab.glossary .glossary_items .glossary_item .glossary_definition--hidden { + visibility: hidden; +} + +.tab.glossary .glossary_items .glossary_item .glossary_source_details { + display: flex; + flex-direction: row; + margin-left: 10px; + flex-shrink: 0; +} + +.tab.glossary .glossary_items .glossary_item .glossary_source_details > span { + color: colors.$grey400; + font-size: 10px; + margin-left: 8px; +} + +.tab.glossary .glossary_items .glossary_item .glossary_source_tooltip { + overflow: hidden; +} - .search_term_reset_button { - display: flex; - cursor: pointer; +.tab.glossary .glossary_items .glossary_item .glossary_source { + font-size: 12px; + max-width: 180px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.tab.glossary .glossary_items .glossary_item .glossary_source span { + color: colors.$grey400; +} + +.tab.glossary .glossary_items .glossary_item .glossary_item-actions { + width: 40px; + display: flex; + align-items: center; + gap: 12px; + padding-left: 16px; + color: colors.$grey400; +} + +.tab.glossary .glossary_items .glossary_item .glossary_item-actions svg:hover { + color: colors.$grey700; +} + +.tab.glossary .glossary_items .glossary_item .glossary_item-actions > * { + cursor: pointer; +} + +.tab.glossary .glossary_items .glossary_item .glossary_item-actions--disabled { + gap: 0px; +} + +.tab.glossary .glossary_items .glossary_item .glossary_item-actions--disabled > * { + cursor: unset; +} + +.tab.glossary .glossary_items .glossary_item .glossary_item-actions--disabled > *:not(.locked-button) { + opacity: 0.4; +} + +.tab.glossary .glossary_items .glossary_item .glossary_item-actions--disabled > *:not(.locked-button) svg:hover { + color: unset; +} + +.tab.glossary .glossary_items .glossary_item .glossary_item-body { + display: flex; + padding: 16px 0; +} + +.tab.glossary .glossary_items .glossary_item .glossary_item-body-no-bottom-padding { + display: flex; + padding-bottom: 0; +} + +.tab.glossary .glossary_items .glossary_item .glossary-item_column { + width: 50%; + display: flex; + flex-direction: column; + align-items: flex-start; + row-gap: 8px; +} + +.tab.glossary .glossary_items .glossary_item .glossary-item_column .glossary_word { + font-weight: 700; + font-size: 16px; + line-height: 20px; + color: colors.$black; + display: flex; + align-items: center; +} + +.tab.glossary .glossary_items .glossary_item .glossary-item_column .glossary_word > div { + display: flex; + align-items: center; +} + +.tab.glossary .glossary_items .glossary_item .glossary-item_column .glossary_word > div svg { + cursor: pointer; + color: colors.$grey400; +} + +.tab.glossary .glossary_items .glossary_item .glossary-item_column .glossary_word .target_label { + cursor: pointer; +} + +.tab.glossary .glossary_items .glossary_item .glossary-item_column .glossary_word .info-icon { + font-weight: normal; + margin-left: 8px; +} + +.tab.glossary .glossary_items .glossary_item .glossary-item_column .glossary_word .forbidden-badge { + background-color: colors.$grey100; + font-weight: normal; + font-size: 14px; + color: colors.$grey700; + border-radius: 4px; + padding: 2px 6px; + margin-left: 10px; +} + +.tab.glossary .glossary_items .glossary_item .glossary-item_column .glossary_word .forbidden-badge > :first-child { + cursor: unset; + margin-right: 4px; +} + +.tab.glossary .glossary_items .glossary_item .glossary-item_column .glossary-description[aria-label]::after { + max-width: 400px; + white-space: normal; +} + +.tab.glossary .glossary_items .glossary_item .glossary-item_column .glossary-description > p { + white-space: break-spaces; +} + +.tab.glossary .glossary_items .glossary_item .glossary-item_column .glossary-description > p:first-child { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; +} + +.tab.glossary .glossary_items .glossary_item .glossary-item_column .glossary-description > p:not(:first-child) { + display: none; +} + +.tab.glossary .glossary_items .glossary_word--highlight { + animation: pulse 4s ease-in-out; +} + +.tab.glossary .glossary_items .glossary_word--highlight-check { + --highlightColor: 255, 169, 2; +} + +.tab.glossary .glossary_items .glossary_word--highlight-glossary { + --highlightColor: 0, 153, 204; +} + +.tab.glossary .glossary_items .glossary_word--highlight-blacklist { + --highlightColor: 255, 47, 34; +} + +.tab.glossary .glossary_items .no-terms-result { + padding-top: 10px; +} + +@keyframes pulse { + 20% { + background-color: rgba(var(--highlightColor), 0.4); } - .search_term_reset_button--hidden { - visibility: hidden; + 80% { + background-color: rgba(var(--highlightColor), 0.4); } - .search_term_reset_button--visible { - visibility: visible; + 100% { + background-color: rgba(var(--highlightColor), 0); } +} - .select_highlight_mandatory { - .select-with-icon__wrapper { - .select { - border: 1px solid red; - } - } - } +.tab.glossary .glossary_add-container { + padding: 24px; +} - .highlight_mandatory { - border: 1px solid red !important; - } +.tab.glossary .glossary_add-container .glossary-form-line { + display: flex; + justify-content: space-between; + padding-top: 8px; +} - .loader.loader_on { - position: relative; - left: 0; - bottom: 0; - margin-right: 8px; - } +.tab.glossary .glossary_add-container .glossary-form-line.more-line { + padding-top: 24px; +} - .rtl { - span, - input, - textarea, - p { - direction: rtl; - text-align: right; - } - } +.tab.glossary .glossary_add-container .glossary-form-line.more-line > * > :not(:first-child) { + margin-left: 10px; +} - .loading_label { - display: block; - margin-top: 10px; - } +.tab.glossary .glossary_add-container .glossary-form-line > div { + display: flex; + flex-shrink: 0; + width: 49%; +} + +.tab.glossary .glossary_add-container .glossary-form-line > div .input-with-label__wrapper { + width: 100%; +} + +.tab.glossary .glossary_add-container .glossary-form-line .glossary-tm-container > div { + width: calc(100% / 3) !important; +} + +.tab.glossary .glossary_add-container .glossary-form-line .glossary-tm-container > :not(:first-child) { + margin-left: 10px; +} + +.tab.glossary .glossary_add-container .glossary_buttons-container { + padding-top: 24px; + display: flex; + gap: 0; + justify-content: space-between; + color: colors.$grey300; +} + +.tab.glossary .glossary_add-container .glossary_buttons-container > div { + width: auto; + display: flex; + gap: 8px; + flex-direction: row; +} + +.tab.glossary .glossary_add-container .glossary_buttons-container > div:first-child { + width: 128px; +} + +.tab.glossary .glossary_add-container .glossary_buttons-container .glossary-more { + display: flex; + gap: 8px; + align-items: center; + cursor: pointer; +} + +.tab.glossary .glossary_add-container .glossary_buttons-container .glossary-more svg { + -webkit-transition: -webkit-transform 0.2s ease-in-out; + -ms-transition: -ms-transform 0.2s ease-in-out; + transition: transform 0.2s ease-in-out; +} + +.tab.glossary .glossary_add-container .glossary_buttons-container .glossary-more.show-more svg { + transform: rotate(180deg); +} + +.tab.glossary .no_keys_glossary { + padding: 40px; + display: flex; + flex-direction: column; + align-items: center; +} + +.tab.glossary .no_keys_glossary > p { + font-size: 16px; +} + +.tab.glossary .select--is-disabled { + background-color: colors.$grey100; +} + +.tab.glossary .search-type { + --sc-bg: #{colors.$grey150}; + --sc-cursor-padding: 0; + --sc-cursor-height: 74%; + --sc-cursor-margin-top: 4px; + --sc-cursor-before-width: 88%; + --sc-cursor-before-margin-left: 4px; + --sc-label-line-height: 32px; + --sc-label-padding: 0 14px; +} + +.tab.glossary .search-type { + margin-left: 14px; + width: 150px; +} + +.tab.glossary .search_term_reset_button { + display: flex; + cursor: pointer; +} + +.tab.glossary .search_term_reset_button--hidden { + visibility: hidden; +} + +.tab.glossary .search_term_reset_button--visible { + visibility: visible; +} + +.tab.glossary .select_highlight_mandatory .select-with-icon__wrapper .select { + border: 1px solid red; +} + +.tab.glossary .highlight_mandatory { + border: 1px solid red !important; +} + +.tab.glossary .loader.loader_on { + position: relative; + left: 0; + bottom: 0; + margin-right: 8px; +} + +.tab.glossary .rtl span, +.tab.glossary .rtl input, +.tab.glossary .rtl textarea, +.tab.glossary .rtl p { + direction: rtl; + text-align: right; +} + +.tab.glossary .loading_label { + display: block; + margin-top: 10px; } diff --git a/public/css/sass/components/segment/segmentFooterTabIcu.scss b/public/css/sass/components/segment/segmentFooterTabIcu.scss index 1d2e98b65d..04da29e783 100644 --- a/public/css/sass/components/segment/segmentFooterTabIcu.scss +++ b/public/css/sass/components/segment/segmentFooterTabIcu.scss @@ -1,4 +1,5 @@ -@use "../../commons/colors"; +@use '../../tokens/colors'; +@use '../../commons/variables'; .segment-footer-icu-container.open { h3 { margin: 0; @@ -11,7 +12,8 @@ padding: 24px; gap: 60px; } - .segment-footer-icu-plurals, .segment-footer-icu-editor { + .segment-footer-icu-plurals, + .segment-footer-icu-editor { width: 50%; } .segment-footer-icu-plurals { @@ -45,8 +47,8 @@ font-weight: 700; font-size: 14px; } - .rule { - color: colors.$grey7; + .rule { + color: colors.$grey400; font-size: 14px; width: 100%; max-width: 120px; @@ -74,8 +76,8 @@ grid-column: 1 / span 1; justify-self: stretch; border-radius: 16px; - border: 1px solid colors.$grey3; - background: colors.$grey5; + border: 1px solid colors.$grey150; + background: colors.$grey50; width: 184px; height: 50px; justify-content: space-between; @@ -93,11 +95,11 @@ gap: 4px; div { text-transform: capitalize; - span { - color: colors.$grey7; - font-weight: 400; - margin-left: 4px; - } + } + div span { + color: colors.$grey400; + font-weight: 400; + margin-left: 4px; } } .segment-footer-icu-inputs { @@ -123,8 +125,8 @@ justify-content: flex-start; gap: 8px; align-self: stretch; - border-radius: 8px; - background: colors.$grey5; + border-radius: variables.$border-radius-default; + background: colors.$grey50; align-content: flex-start; text-align: left; &.rtl { @@ -132,4 +134,4 @@ } } } -} \ No newline at end of file +} diff --git a/public/css/sass/components/segment/tagsMenu.scss b/public/css/sass/components/segment/tagsMenu.scss index f1af5b60a0..143ac399bd 100644 --- a/public/css/sass/components/segment/tagsMenu.scss +++ b/public/css/sass/components/segment/tagsMenu.scss @@ -1,86 +1,17 @@ +@use '../../tokens/colors'; .target { .tags-auto-complete-menu { - background: #fff; + background: colors.$white; box-sizing: border-box; max-width: 300px; border-radius: 2px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); - border: 1px solid #dadada; - .ui.vertical.menu { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - border: none; - width: 18rem; - .menu-container { - } - .head-tag-list { - position: -webkit-sticky; - position: sticky; - top: 0; - padding: 1rem 1.14rem; - font-weight: bold; - line-height: 17px; - border-top: 1px solid #e9e3e8; - border-bottom: 1px solid #e0e3e8; - z-index: 1; - background: #fff; - pointer-events: none; - display: flex; - align-items: center; - .style-tag { - padding: 4px 7px; - margin: 0 5px; - &.mismatch { - color: #e1565a; - } - } - } - .item { - text-overflow: ellipsis; - overflow: hidden; - padding: 0.78rem 1.14rem; - width: 100% !important; - font-size: 14px; - white-space: nowrap; - cursor: pointer; - - &:before { - background: #fff; - } - &:hover { - background: rgba(0, 0, 0, 0.05) !important; - } - &.added-tag { - color: #767676 !important; - - & a { - color: #767676 !important; - } - } - &.missing-tag { - color: #000 !important; - font-size: 16px; - & a { - color: #000 !important; - } - } - mark { - background: #ffff00; - } - &.no-results { - cursor: default; - pointer-events: none; - height: 100%; - padding: 13px !important; - } - } - } + border: 1px solid colors.$grey200; } .head-tag-list .locked.mismatch { - background-color: #fdeae2; - color: #e1595d; - box-shadow: inset 0 0px 0 2px #e1565a; + background-color: colors.$grey75; + color: colors.$red400; + box-shadow: inset 0 0px 0 2px colors.$red400; font-weight: 100; padding: 4px 6px; position: relative; @@ -90,11 +21,11 @@ .style-tag { display: inline-flex; - background: #f2f4f7; - box-shadow: inset 0 0 0 2px #e5e9f1; + background: colors.$grey50; + box-shadow: inset 0 0 0 2px colors.$grey100; border-radius: 7px; font-size: 15px; - color: #767676; + color: colors.$grey600; font-style: italic; padding: 0 6px 0 3px; vertical-align: middle; @@ -105,31 +36,31 @@ background: transparent !important; } &:hover { - background: #e5e9f1; + background: colors.$grey100; cursor: pointer; } a { - color: #3b4a5c; + color: colors.$grey1300; font-weight: 700; } &.mismatch { - background-color: #fdeae2; - box-shadow: inset 0 0 0 2px #f9dcd1; + background-color: colors.$grey75; + box-shadow: inset 0 0 0 2px colors.$red100; &:hover { - background-color: #f9dcd1; + background-color: colors.$red100; } &.selected { - box-shadow: inset 0 0 0 2px #e1565a; - background: #f9d7ca; + box-shadow: inset 0 0 0 2px colors.$red400; + background: colors.$red100; } &, a { - color: #e1565a; + color: colors.$red400; } } &.highlight { - box-shadow: inset 0 0 0 2px #3b4a5c96; - color: #424242; + box-shadow: inset 0 0 0 2px colors.$grey1300; + color: colors.$grey1300; } &.selected { cursor: grab; diff --git a/public/css/sass/components/settingsPanel/AnalysisTab.scss b/public/css/sass/components/settingsPanel/AnalysisTab.scss index 33a8710a40..d4ca9ed474 100644 --- a/public/css/sass/components/settingsPanel/AnalysisTab.scss +++ b/public/css/sass/components/settingsPanel/AnalysisTab.scss @@ -1,4 +1,5 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; +@use '../../commons/variables'; .analysis-tab { display: flex; @@ -11,7 +12,7 @@ .analysis-value-not-saved, .analysis-value-not-saved span, .analysis-value-not-saved input { - color: colors.$translatedBlue; + color: colors.$blue500; } &.settings-panel-contentwrapper-tab-background { @@ -22,7 +23,7 @@ span { display: block; text-align: left; - color: colors.$grey6; + color: colors.$grey700; } .analysis-tab-head { span { @@ -34,9 +35,9 @@ input.input-percentage { height: 40px; width: 76px; - border: 1px solid colors.$grey4; + border: 1px solid colors.$grey200; padding: 8px 12px 8px 12px; - box-shadow: 2px 2px 4px 0px #00000014 inset; + border-radius: variables.$border-radius-default; font-size: 16px; line-height: 24px; font-weight: 400; @@ -54,17 +55,17 @@ } .analysis-tab-tableContainer { table { - border: 1px solid colors.$grey3; + border: 1px solid colors.$grey150; border-spacing: 0; border-collapse: separate; - border-radius: 4px; + border-radius: variables.$border-radius-default; overflow: hidden; th:not(:last-child), td:not(:last-child) { - border-right: 1px solid colors.$grey3; + border-right: 1px solid colors.$grey150; } thead > tr > th { - border-bottom: 1px solid colors.$grey3; + border-bottom: 1px solid colors.$grey150; } th { height: 64px; @@ -86,9 +87,9 @@ } .analysis-tab-exceptionsContainer { background: colors.$white; - border: 1px solid colors.$grey3; + border: 1px solid colors.$grey150; padding: 24px; - border-radius: 4px; + border-radius: variables.$border-radius-default; display: flex; flex-direction: column; .analysis-tab-subhead .input-percentage { @@ -119,65 +120,8 @@ flex-direction: column; gap: 16px; } - .analysis-tab-exceptionsRow { - display: flex; - align-items: center; - gap: 24px; - .select-with-label__wrapper { - height: 40px; - width: 275px; - .custom-dropdown { - margin-top: 0; - padding-top: 12px; - border-radius: unset; - background-color: white; - } - .select { - font-size: 16px; - padding: 9px 46px 9px 12px; - border-radius: 2px; - border: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: inset 0 1px 3px #ddd; - } - .dropdown__search-bar { - height: 34px; - margin: 0 12px 12px; - border-radius: 4px; - border: 1px solid rgba(34, 36, 38, 0.15); - background-color: #fff; - outline: none; - .dropdown__search-bar-input { - width: 100%; - padding: 8px 8px; - background-color: unset; - outline: none; - } - } - } - #swaplang { - margin: 0 10px; - cursor: pointer; - } - > div { - display: flex; - align-items: center; - .button { - height: 32px; - width: 106px; - font-size: 16px; - padding: 0px; - &.close-button { - width: 32px; - margin-left: 8px; - } - } - } - } .analysis-tab-buttons { gap: 8px; - button { - height: 32px; - } } button.add-button { width: 148px; @@ -185,3 +129,57 @@ } } } + +.analysis-tab-exceptionsRow { + display: flex; + align-items: center; + gap: 24px; + #swaplang { + margin: 0 10px; + cursor: pointer; + } + > div { + display: flex; + align-items: center; + } + > div .button { + height: 32px; + width: 106px; + font-size: 16px; + padding: 0px; + &.close-button { + width: 32px; + margin-left: 8px; + } + } + .select-with-label__wrapper { + height: 40px; + width: 275px; + .custom-dropdown { + margin-top: 0; + padding-top: 12px; + border-radius: unset; + background-color: white; + } + .select { + font-size: 16px; + padding: 9px 46px 9px 12px; + border-radius: 2px; + border: 1px solid rgba(34, 36, 38, 0.15); + } + .dropdown__search-bar { + height: 34px; + margin: 0 12px 12px; + border-radius: 4px; + border: 1px solid rgba(34, 36, 38, 0.15); + background-color: colors.$white; + outline: none; + } + .dropdown__search-bar .dropdown__search-bar-input { + width: 100%; + padding: 8px 8px; + background-color: unset; + outline: none; + } + } +} diff --git a/public/css/sass/components/settingsPanel/EditorOtherTab.scss b/public/css/sass/components/settingsPanel/EditorOtherTab.scss index 76dbed07be..6e0cd6135a 100644 --- a/public/css/sass/components/settingsPanel/EditorOtherTab.scss +++ b/public/css/sass/components/settingsPanel/EditorOtherTab.scss @@ -1,4 +1,4 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; .options-box { display: flex; @@ -15,7 +15,7 @@ cursor: help; font-weight: bold; text-decoration: underline; - color: #000; + color: colors.$black; cursor: pointer; margin-left: 6px; } @@ -45,6 +45,6 @@ > p { font-weight: normal; - color: colors.$grey6; + color: colors.$grey700; } } diff --git a/public/css/sass/components/settingsPanel/EditorSettingsTab.scss b/public/css/sass/components/settingsPanel/EditorSettingsTab.scss index a348741d1f..4b1d156f3c 100644 --- a/public/css/sass/components/settingsPanel/EditorSettingsTab.scss +++ b/public/css/sass/components/settingsPanel/EditorSettingsTab.scss @@ -1,4 +1,5 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; +@use '../../commons/variables'; .editor-settings-options-box { float: left; width: 100%; @@ -31,7 +32,7 @@ > p { font-size: 16px; - color: colors.$grey6; + color: colors.$grey700; } } @@ -54,23 +55,21 @@ .select { font-size: 16px; padding: 9px 46px 9px 12px; - border-radius: 2px; + border-radius: variables.$border-radius-default; border: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: inset 0 1px 3px #ddd; &:hover { border-color: rgba(34, 36, 38, 0.35); - box-shadow: none; } } .select--is-focused, .select--is-focused:hover { - border: solid 1px #96c8da; + border: solid 1px colors.$grey300; } .select--is-disabled { - background-color: #f3f3f3; + background-color: colors.$grey75; } .custom-dropdown { @@ -90,17 +89,15 @@ border-radius: 4px; border: 1px solid rgba(34, 36, 38, 0.15); background-color: white; - - .dropdown__search-bar-input { - width: 100%; - padding: 8px 8px; - background-color: unset; - } - - .dropdown__search-bar-input--highlighted { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } + } + .dropdown__search-bar .dropdown__search-bar-input { + width: 100%; + padding: 8px 8px; + background-color: unset; + } + .dropdown__search-bar .dropdown__search-bar-input--highlighted { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } .dropdown__option { @@ -112,7 +109,7 @@ } .dropdown__option--is-no-results-found { - color: colors.$grey7; + color: colors.$grey400; } .dropdown__option--is-no-results-found { @@ -122,12 +119,12 @@ .dropdown__option--is-active-option { background-color: unset; font-weight: bold; - background-color: colors.$grey5; + background-color: colors.$grey50; } .dropdown__option--is-highlighted-option, .dropdown__option:hover { - background-color: colors.$grey4; + background-color: colors.$grey100; } } @@ -138,7 +135,7 @@ input:not([type='radio']), textarea { - border: 1px solid colors.$grey2; + border: 1px solid colors.$grey300; border-radius: 4px; padding: 4px 8px; outline: none; @@ -146,7 +143,7 @@ line-height: 16px; &:focus, &:focus-visible { - border-color: colors.$linkBlueTransparent; + border-color: colors.$blue300; } } .dropdown__search-bar { diff --git a/public/css/sass/components/settingsPanel/FileImportTab.scss b/public/css/sass/components/settingsPanel/FileImportTab.scss index cb6fa70529..f227b6143c 100644 --- a/public/css/sass/components/settingsPanel/FileImportTab.scss +++ b/public/css/sass/components/settingsPanel/FileImportTab.scss @@ -1,4 +1,4 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; .file-import-tab { &.settings-panel-contentwrapper-tab-background { @@ -8,7 +8,7 @@ p { display: block; text-align: left; - color: colors.$grey6; + color: colors.$grey700; font-size: 16px; line-height: 24px; } @@ -24,7 +24,7 @@ top: 0; z-index: 4; width: 100%; - background-color: colors.$grey5; + background-color: colors.$grey50; &:has(.select__dropdown-wrapper) { z-index: 5; @@ -43,10 +43,8 @@ .filters-params-accordion, .xliff-settings-container { - .accordion-component-title { - font-size: 18px !important; - font-weight: bold; - } + --accordion-title-font-size: 18px; + --accordion-title-font-weight: bold; } .filters-params-accordion-content { @@ -62,6 +60,7 @@ h3 { margin: 0; + font-size: 18px; } > :first-child { @@ -73,21 +72,11 @@ } .custom-segmented-control { - .segmented-control { - background-color: colors.$grey8; - } - .segmented-control__label { - line-height: 28px; - } - .segmented-control__cursor { - padding: 2px; - } - .segmented-control__cursor:before { - background-color: white; - } - .segmented-control input:checked + .segmented-control__label { - color: black; - } + --sc-bg: #{colors.$grey200}; + --sc-label-line-height: 28px; + --sc-cursor-padding: 2px; + --sc-cursor-bg: #{colors.$white}; + --sc-checked-color: #{colors.$black}; } .container-segmented-control { @@ -98,16 +87,10 @@ } .xliff-settings-container { - .accordion-component { - overflow: visible; - - .accordion-component-content { - overflow: visible; - } - } + --accordion-content-overflow: visible; .unsaved { - color: colors.$translatedBlue; + color: colors.$blue500; } } @@ -119,7 +102,7 @@ .select { color: colors.$black; - border-color: colors.$grey8; + border-color: colors.$grey200; } .select-with-label__wrapper .select { @@ -127,7 +110,7 @@ } .select--is-disabled { - background-color: colors.$grey9; + background-color: colors.$grey75; } } @@ -173,23 +156,16 @@ .select { font-size: 16px; padding: 9px 46px 9px 12px; - border-radius: 2px; border: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: inset 0 1px 3px #ddd; - - &:hover { - border-color: rgba(34, 36, 38, 0.35); - box-shadow: none; - } } .select--is-focused, .select--is-focused:hover { - border: solid 1px #96c8da; + border: solid 1px colors.$grey300; } .select--is-disabled { - background-color: #f3f3f3; + background-color: colors.$grey75; } .custom-dropdown { @@ -208,17 +184,15 @@ border-radius: 4px; border: 1px solid rgba(34, 36, 38, 0.15); background-color: white; - - .dropdown__search-bar-input { - width: 100%; - padding: 8px 8px; - background-color: unset; - } - - .dropdown__search-bar-input--highlighted { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } + } + .dropdown__search-bar .dropdown__search-bar-input { + width: 100%; + padding: 8px 8px; + background-color: unset; + } + .dropdown__search-bar .dropdown__search-bar-input--highlighted { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } .dropdown__option { @@ -230,7 +204,7 @@ } .dropdown__option--is-no-results-found { - color: colors.$grey7; + color: colors.$grey400; } .dropdown__option--is-no-results-found { @@ -240,12 +214,12 @@ .dropdown__option--is-active-option { background-color: unset; font-weight: bold; - background-color: colors.$grey5; + background-color: colors.$grey50; } .dropdown__option--is-highlighted-option, .dropdown__option:hover { - background-color: colors.$grey4; + background-color: colors.$grey100; } } @@ -256,7 +230,7 @@ input:not([type='radio']), textarea { - border: 1px solid colors.$grey2; + border: 1px solid colors.$grey300; border-radius: 4px; padding: 4px 8px; outline: none; @@ -264,7 +238,7 @@ line-height: 16px; &:focus, &:focus-visible { - border-color: colors.$linkBlueTransparent; + border-color: colors.$blue300; } } .dropdown__search-bar { diff --git a/public/css/sass/components/settingsPanel/MachineTranslationTab.scss b/public/css/sass/components/settingsPanel/MachineTranslationTab.scss index 73f7b966ba..f909f08ba0 100644 --- a/public/css/sass/components/settingsPanel/MachineTranslationTab.scss +++ b/public/css/sass/components/settingsPanel/MachineTranslationTab.scss @@ -1,4 +1,5 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; +@use '../../commons/variables'; .machine-translation-tab { .add-mt-button, .add-mt-container { @@ -59,79 +60,19 @@ width: 50%; text-align: left; .provider-data { - //&.provider-data-lara { - // .provider-field:last-child { - // margin-top: -12px - // } - //} display: flex; flex-direction: column; - .button { - align-self: flex-end; - margin-top: 20px; - } - } - .provider-field { - display: flex; - flex-direction: column; - gap: 4px; - min-width: 0; - width: 100%; - font-size: 16px; - &:not(:first-child) { - margin-top: 20px; - } - &.checkbox { - flex-direction: row; - margin: 6px 0; - align-items: center; - &.first { - margin-top: 20px; - } - input { - margin-right: 10px; - } - } - span { - font-size: 14px; - } - input[type='text'] { - padding: 3px 5px 3px 9px; - font-size: 16px !important; - -moz-border-radius: 2px; - border-radius: 2px; - border: 1px solid rgba(34, 36, 38, 0.15); - height: 37px; - box-shadow: inset 0 1px 3px #ddd; - &:hover { - border-color: rgba(34, 36, 38, 0.35); - box-shadow: none; - } - } - .field-error { - color: colors.$redDefault; - font-size: 12px; - } - .mt-error { - color: colors.$redDefault; - } - - &.container-actions { - flex-direction: row; - justify-content: flex-end; - gap: 8px; - } } } .add-provider-message { width: 50%; text-align: left; padding: 16px; - background: colors.$grey4; + background: colors.$grey100; display: flex; flex-direction: column; - border: 1px solid colors.$grey3; - border-radius: 8px; + border: 1px solid colors.$grey150; + border-radius: variables.$border-radius-default; .button { margin-top: 20px; @@ -155,14 +96,69 @@ } .green-button { - background-color: #33b079 !important; + background-color: colors.$green800 !important; color: white !important; &:hover { - background-color: rgba($color: #33b079, $alpha: 0.9) !important; + background-color: rgba($color: colors.$green800, $alpha: 0.9) !important; } } } + +.add-provider-fields .provider-data .button { + align-self: flex-end; + margin-top: 20px; +} + +.provider-field { + display: flex; + flex-direction: column; + gap: 4px; + min-width: 0; + width: 100%; + font-size: 16px; + &:not(:first-child) { + margin-top: 20px; + } + &.checkbox { + flex-direction: row; + margin: 6px 0; + align-items: center; + &.first { + margin-top: 20px; + } + input { + margin-right: 10px; + } + } + span { + font-size: 14px; + } + input[type='text'] { + padding: 3px 5px 3px 9px; + font-size: 16px !important; + -moz-border-radius: 2px; + border-radius: 2px; + border: 1px solid rgba(34, 36, 38, 0.15); + height: 37px; + &:hover { + border-color: rgba(34, 36, 38, 0.35); + } + } + .field-error { + color: colors.$red500; + font-size: 12px; + } + .mt-error { + color: colors.$red500; + } + &.container-actions { + flex-direction: row; + justify-content: flex-end; + gap: 8px; + } +} + .machine-translation-tab-table-title { display: flex; align-items: center; @@ -197,13 +193,10 @@ .select { font-size: 16px; padding: 9px 46px 9px 12px; - border-radius: 2px; border: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: inset 0 1px 3px #ddd; color: black; &:hover { border-color: rgba(34, 36, 38, 0.35); - box-shadow: none; } } @@ -296,7 +289,7 @@ display: flex; align-items: center; justify-content: center; - background-color: #eaebee; + background-color: colors.$grey100; > button { background: unset; @@ -331,6 +324,10 @@ .settings-panel-row-content { grid-template-columns: 8% minmax(0, 1fr) 22% 5%; background-color: unset; + + > :first-child { + margin-top: 5px; + } } .settings-panel-row-content { grid-template-columns: 8% minmax(0, 1fr) 22% 5%; @@ -345,18 +342,16 @@ } .settings-panel-row { border: none; - .row-content-create-glossary { grid-template-columns: 100%; - - > form { - padding: 0 !important; - } } .row-content-create-glossary-waiting { opacity: 0.6; } } + .settings-panel-row .row-content-create-glossary > form { + padding: 0 !important; + } .settings-panel-row-active { background-color: unset; } @@ -370,6 +365,10 @@ align-items: center; justify-content: space-between; } + + .glossary-row-name { + align-items: center; + } } .glossary-row-name { @@ -390,7 +389,7 @@ width: 100%; padding: 4px; background-color: unset; - border: 1px solid colors.$grey8; + border: 1px solid colors.$grey200; border-radius: 3px; text-overflow: ellipsis; white-space: nowrap; @@ -404,11 +403,14 @@ } &.error { - border: solid 1px colors.$redDefault; + border: solid 1px colors.$red500; } } .glossary-deepl-row-name-input { + padding: 4px 8px; + border-radius: variables.$border-radius-default; + &:hover { background-color: unset; } @@ -429,8 +431,12 @@ } .grey-button { + font-size: 14px !important; + border-radius: variables.$border-radius-default; + height: 32px; + &.error { - border: solid 1px colors.$redDefault; + border: solid 1px colors.$red500; } } @@ -468,15 +474,15 @@ gap: 8px; border-radius: 2px; font-size: 16px; - color: #000; - background: #eaebee; + color: colors.$black; + background: colors.$grey100; padding: 0 8px; text-align: center; - border: 1px solid #9e9e9e; + border: 1px solid colors.$grey400; cursor: pointer; &:hover { - background-color: colors.$grey5; + background-color: colors.$grey50; } &:disabled { @@ -509,6 +515,11 @@ .settings-panel-table-rows-container { max-height: 400px; overflow-y: auto; + border: unset; + } + + > :first-child { + margin-bottom: 10px; } } @@ -545,21 +556,21 @@ gap: 15px; align-items: center; justify-content: space-between; - background-color: colors.$grey4; + background-color: colors.$grey100; padding: 12px; - border-radius: 8px; - border: solid 1px colors.$grey3; + border-radius: variables.$border-radius-default; + border: solid 1px colors.$grey150; margin-bottom: 16px; h4 { margin: 0; } - .numeric-stepper-component { + div[class*='numeric-stepper-component'] { max-width: 72px; height: 32px; - .container-controls button { + div[class*='container-controls'] button { height: 16px !important; } } @@ -582,7 +593,7 @@ } p { - color: colors.$grey6; + color: colors.$grey700; } } @@ -598,8 +609,8 @@ display: flex; align-items: center; justify-content: center; - background-color: #eaebee; - border-radius: 8px; + background-color: colors.$grey100; + border-radius: variables.$border-radius-default; > button { background: unset; @@ -623,16 +634,18 @@ &.options-container-expanded { .expand-button { - border-radius: 8px 8px 0 0; + border-radius: variables.$border-radius-default + variables.$border-radius-default 0 0; } } .options-container-content { display: flex; flex-direction: column; - border-radius: 0 0 8px 8px; + border-radius: 0 0 variables.$border-radius-default + variables.$border-radius-default; padding: 24px; - background-color: colors.$grey5; + background-color: colors.$grey50; .mt-params-option { display: flex; @@ -643,6 +656,7 @@ h3 { margin: 0; + font-size: 18px; } p { @@ -661,7 +675,7 @@ p { display: block; text-align: left; - color: colors.$grey6; + color: colors.$grey700; font-size: 16px; line-height: 24px; } @@ -674,7 +688,7 @@ .select { color: colors.$black; - border-color: colors.$grey8; + border-color: colors.$grey200; } .select-with-label__wrapper .select { @@ -683,7 +697,13 @@ } .select--is-disabled { - background-color: colors.$grey9; + background-color: colors.$grey75; + } + + input { + height: 32px; + padding: 4px 8px; + border-radius: variables.$border-radius-default; } } @@ -695,7 +715,7 @@ position: sticky; top: -1px; - background: colors.$grey5; + background: colors.$grey50; &::after { display: block; @@ -704,9 +724,9 @@ margin-top: 5px; background: linear-gradient( 90deg, - rgba(colors.$grey8, 0.6) 0%, - rgba(colors.$grey8, 0.6) 75%, - rgba(colors.$grey8, 0) 100% + rgba(colors.$grey200, 0.6) 0%, + rgba(colors.$grey200, 0.6) 75%, + rgba(colors.$grey200, 0) 100% ); } } @@ -716,7 +736,7 @@ } .dropdown__search-bar { - border-bottom: 1px #d7d8db solid; + border-bottom: 1px colors.$grey200 solid; margin-bottom: 1px; } diff --git a/public/css/sass/components/settingsPanel/MessageNotification.scss b/public/css/sass/components/settingsPanel/MessageNotification.scss index eb5c0b1273..41ab9721aa 100644 --- a/public/css/sass/components/settingsPanel/MessageNotification.scss +++ b/public/css/sass/components/settingsPanel/MessageNotification.scss @@ -1,11 +1,11 @@ -@use "../../commons/colors"; +@use "../../tokens/colors"; .settingsPanel-notification { display: flex; align-items: center; font-size: 15px; justify-content: space-between; padding: 15px 10px; - border: 1px solid colors.$grey8; + border: 1px solid colors.$grey200; margin: 15px 0; > div { display: flex; @@ -16,16 +16,16 @@ margin: 0; } &.settingsPanel-notification_success { - border-top: 3px solid colors.$greenDefault; - background-color: colors.$greenDefaultTransparent2; + border-top: 3px solid colors.$green500; + background-color: colors.$green50; } &.settingsPanel-notification_warning { - border-top: 3px solid #ffcc01; - background-color: colors.$orangeDefaultTransparent2; + border-top: 3px solid colors.$orange200; + background-color: colors.$orange50; } &.settingsPanel-notification_error { - border-top: 3px solid colors.$redDefault; - background-color: colors.$redDefaultTransparent; + border-top: 3px solid colors.$red500; + background-color: colors.$red100; } .button-close { padding: 2px 4px; diff --git a/public/css/sass/components/settingsPanel/OtherTab.scss b/public/css/sass/components/settingsPanel/OtherTab.scss index b3c6ae0865..30e42b736c 100644 --- a/public/css/sass/components/settingsPanel/OtherTab.scss +++ b/public/css/sass/components/settingsPanel/OtherTab.scss @@ -1,4 +1,4 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; .other-options-box { float: left; width: 100%; @@ -31,7 +31,7 @@ > p { font-size: 16px; - color: colors.$grey6; + color: colors.$grey700; } } @@ -54,23 +54,20 @@ .select { font-size: 16px; padding: 9px 46px 9px 12px; - border-radius: 2px; border: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: inset 0 1px 3px #ddd; &:hover { border-color: rgba(34, 36, 38, 0.35); - box-shadow: none; } } .select--is-focused, .select--is-focused:hover { - border: solid 1px #96c8da; + border: solid 1px colors.$grey300; } .select--is-disabled { - background-color: #f3f3f3; + background-color: colors.$grey75; } .custom-dropdown { @@ -89,17 +86,15 @@ border-radius: 4px; border: 1px solid rgba(34, 36, 38, 0.15); background-color: white; - - .dropdown__search-bar-input { - width: 100%; - padding: 8px 8px; - background-color: unset; - } - - .dropdown__search-bar-input--highlighted { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } + } + .dropdown__search-bar .dropdown__search-bar-input { + width: 100%; + padding: 8px 8px; + background-color: unset; + } + .dropdown__search-bar .dropdown__search-bar-input--highlighted { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } .dropdown__option { @@ -111,7 +106,7 @@ } .dropdown__option--is-no-results-found { - color: colors.$grey7; + color: colors.$grey400; } .dropdown__option--is-no-results-found { @@ -121,12 +116,12 @@ .dropdown__option--is-active-option { background-color: unset; font-weight: bold; - background-color: colors.$grey5; + background-color: colors.$grey50; } .dropdown__option--is-highlighted-option, .dropdown__option:hover { - background-color: colors.$grey4; + background-color: colors.$grey100; } } @@ -137,7 +132,7 @@ input:not([type='radio']), textarea { - border: 1px solid colors.$grey2; + border: 1px solid colors.$grey300; border-radius: 4px; padding: 4px 8px; outline: none; @@ -145,7 +140,7 @@ line-height: 16px; &:focus, &:focus-visible { - border-color: colors.$linkBlueTransparent; + border-color: colors.$blue300; } } .dropdown__search-bar { @@ -183,7 +178,7 @@ cursor: help; font-weight: bold; text-decoration: underline; - color: #000; + color: colors.$black; cursor: pointer; margin-left: 6px; } @@ -224,6 +219,6 @@ > p { font-weight: normal; - color: colors.$grey6; + color: colors.$grey700; } } diff --git a/public/css/sass/components/settingsPanel/QualityFrameworkTab.scss b/public/css/sass/components/settingsPanel/QualityFrameworkTab.scss index 83634218d3..4e0259b779 100644 --- a/public/css/sass/components/settingsPanel/QualityFrameworkTab.scss +++ b/public/css/sass/components/settingsPanel/QualityFrameworkTab.scss @@ -1,4 +1,5 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; +@use '../../commons/variables'; .quality-framework-tab { &.settings-panel-contentwrapper-tab-background { @@ -8,7 +9,7 @@ p { display: block; text-align: left; - color: #666666; + color: colors.$grey700; font-size: 16px; line-height: 24px; } @@ -47,6 +48,8 @@ overflow-x: auto; overscroll-behavior: none; scrollbar-width: thin; + border-radius: variables.$border-radius-default; + border: 1px solid colors.$grey150; @media (max-height: 1200px) { max-height: calc(100vh - 470px); @@ -68,7 +71,7 @@ align-items: center; justify-content: center; min-height: 64px; - background-color: colors.$grey3; + background-color: colors.$grey150; font-weight: bold; z-index: 1; } @@ -77,10 +80,11 @@ display: flex; justify-content: space-between; max-width: 280px; - /* height: 64px; */ min-height: 64px; background-color: colors.$white; - border: 1px solid colors.$grey3; + border: 1px solid colors.$grey150; + border-bottom: unset; + border-left: unset; border-left-width: 2px; padding: 0 10px; @@ -89,13 +93,12 @@ flex-direction: column; justify-content: center; max-width: 230px; - - > :first-child:not(textarea) { - font-weight: bold; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } + } + .label > :first-child:not(textarea) { + font-weight: bold; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .details { @@ -124,7 +127,7 @@ .header { position: sticky; top: 0; - background-color: colors.$grey3; + background-color: colors.$grey150; z-index: 1; > :first-child { position: sticky; @@ -145,34 +148,34 @@ .column { display: grid; - grid-template-columns: 1fr 10%; + grid-template-columns: 1fr 20%; align-items: center; height: 32px; - border: 1px solid colors.$grey3; + border: 1px solid colors.$grey150; padding: 0 10px; - - .label { - display: inherit; - padding: 0 5px; - - > :first-child { - display: block; - text-align: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-weight: bold; - border: none; - padding: 0; - line-height: 1.5; - } - } + } + .column .label { + display: inherit; + padding: 0 5px; + } + .column .label > :first-child { + display: block; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-weight: bold; + border: none; + padding: 0; + line-height: 1.5; } .cell { display: flex; justify-content: center; - border: 1px solid colors.$grey3; + border: 1px solid colors.$grey150; + border-right: unset; + border-bottom: unset; padding: 10px; height: 64px; @@ -180,10 +183,8 @@ border-right-width: 2px; } } - .cell-not-saved { - input { - color: colors.$translatedBlue; - } + .cell-not-saved input { + color: colors.$blue500; } &:last-child { @@ -206,9 +207,9 @@ .quality-framework-input { height: 40px; width: 100%; - border: 1px solid colors.$grey4; + border: 1px solid colors.$grey200; padding: 8px 12px 8px 12px; - box-shadow: 2px 2px 4px 0px #00000014 inset; + border-radius: variables.$border-radius-default; font-size: 16px; line-height: 24px; font-weight: 400; @@ -216,8 +217,8 @@ } .quality-framework-input-error { - outline-color: colors.$redDefaultHover; - border-color: colors.$redDefaultHover; + outline-color: colors.$red600; + border-color: colors.$red600; border-radius: 4px; border-width: 2px; } @@ -241,11 +242,11 @@ } .quality-framework-error-message { - color: colors.$redDefaultHover; + color: colors.$red600; } .quality-framework-add-category { - .popover-component-top { + div[class*="popover-component-top"] { bottom: 0; margin-bottom: 0; } @@ -269,7 +270,7 @@ padding: 4px 5px; } .icon.active { - background-color: colors.$grey4; + background-color: colors.$grey100; border-radius: 3px; } } @@ -298,7 +299,7 @@ } .quality-framework-not-saved { - color: colors.$translatedBlue; + color: colors.$blue500; } .quality-framework-modify-category, @@ -331,9 +332,9 @@ justify-content: end; width: 100%; height: 40px; - border: 1px solid colors.$grey4; + border: 1px solid colors.$grey200; padding: 8px 4px 8px 0; - box-shadow: 2px 2px 4px 0px #00000014 inset; + border-radius: variables.$border-radius-default; input { position: absolute; @@ -350,11 +351,10 @@ button { width: 20px !important; height: 20px !important; - z-index: 2; - color: colors.$grey2 !important; + color: colors.$grey300 !important; &:hover { - color: colors.$grey1 !important; + color: colors.$grey500 !important; } } } @@ -363,11 +363,11 @@ align-items: center; button { - color: colors.$grey2 !important; + color: colors.$grey300 !important; gap: unset; &:hover { - color: colors.$grey1 !important; + color: colors.$grey500 !important; } } } diff --git a/public/css/sass/components/settingsPanel/SettingsPanel.scss b/public/css/sass/components/settingsPanel/SettingsPanel.scss index 1be2ced9f7..b14700a37b 100644 --- a/public/css/sass/components/settingsPanel/SettingsPanel.scss +++ b/public/css/sass/components/settingsPanel/SettingsPanel.scss @@ -1,4 +1,5 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; +@use '../../commons/variables'; .settings-panel { position: absolute; @@ -57,7 +58,7 @@ align-items: center; height: 55px; padding: 0 10px; - background-color: colors.$darkBlue; + background-color: colors.$blue900; color: white; > span { @@ -93,12 +94,12 @@ } .settings-panel-tab-active { - background-color: rgba(colors.$grey3, 0.24); + background-color: rgba(colors.$grey150, 0.24); opacity: 1; } .settings-panel-tab-modifyng-icon { - color: colors.$translatedBlue; + color: colors.$blue500; margin-right: 5px; } @@ -106,7 +107,7 @@ > ul { display: flex; gap: 1px; - background-color: colors.$darkBlue; + background-color: colors.$blue900; } } @@ -150,15 +151,12 @@ span { font-size: 16px; - color: colors.$grey6; + color: colors.$grey700; } } .settings-panel-button-icon { min-width: 120px; - display: flex !important; - gap: 10px !important; - margin: 0 !important; } .settings-panel-templates { @@ -166,7 +164,7 @@ align-items: end; padding: 16px 24px; - background-color: colors.$darkBlue; + background-color: colors.$blue900; .select-with-label__wrapper { width: 240px; @@ -192,13 +190,13 @@ .dropdown__option--is-active-option { color: colors.$white; - background-color: colors.$darkBlue; + background-color: colors.$blue900; } } .select { color: colors.$black; - border-color: colors.$grey8; + border-color: colors.$grey200; } } @@ -220,9 +218,10 @@ height: 38px; font-size: 16px; padding: 9px 0 9px 12px; + border-radius: variables.$border-radius-default; border: none; position: absolute; - margin-top: 37px; + margin-top: 51px; margin-left: 1px; outline: none; line-height: 4; @@ -238,11 +237,10 @@ border-radius: unset; font-weight: normal; color: black !important; - box-shadow: inset 0 0 0 1px colors.$grey8; + box-shadow: inset 0 0 0 1px colors.$grey200; } button.template-button-white { - border-radius: unset; font-weight: normal; color: white !important; box-shadow: inset 0 0 0 1px colors.$white; @@ -265,10 +263,10 @@ } .button-more-items { - border-radius: unset; + border-radius: variables.$border-radius-default; font-weight: normal; color: black; - box-shadow: inset 0 0 0 1px colors.$grey8; + box-shadow: inset 0 0 0 1px colors.$grey200; padding: 0; &:hover { @@ -284,6 +282,19 @@ width: 40px; height: 40px; } + + .menu-button-wrapper > button svg { + color: white; + } + .menu-button-wrapper { + > button { + &:hover, + &:focus { + background-color: unset; + color: unset; + } + } + } } .button-more-items-project-templates { @@ -296,18 +307,18 @@ } button.button-save-changes { - background-color: colors.$grey4; + background-color: colors.$grey100; color: black !important; &:hover { - background-color: colors.$grey4 !important; + background-color: colors.$grey100 !important; opacity: 0.8; } } } .settings-panel-contentwrapper-tab-background { - background-color: colors.$grey5; + background-color: colors.$grey50; padding: 20px; border-radius: 16px; } @@ -318,7 +329,7 @@ display: inline-block; width: 100%; content: ''; - border-top: solid 2px rgba(colors.$darkBlueTransparent, 0.5); + border-top: solid 2px rgba(colors.$blue50, 0.5); } > h2 { @@ -354,7 +365,7 @@ font-weight: bold; div { - color: colors.$linkBlue; + color: colors.$blue700; } } @@ -416,7 +427,7 @@ .settings-panel-subtemplates-select-unsaved { .select { - color: colors.$translatedBlue !important; + color: colors.$blue500 !important; } } @@ -440,7 +451,7 @@ display: flex; flex-direction: column; gap: 20px; - background-color: colors.$grey5; + background-color: colors.$grey50; border-radius: 16px; } @@ -460,7 +471,6 @@ .dropdown__search-bar { height: 34px; margin: 0 12px 12px; - border-radius: 4px; border: 1px solid rgba(34, 36, 38, 0.15); background-color: white; @@ -486,7 +496,7 @@ } .dropdown__option--is-no-results-found { - color: colors.$grey7; + color: colors.$grey400; } .dropdown__option--is-no-results-found { @@ -496,12 +506,12 @@ .dropdown__option--is-active-option { background-color: unset; font-weight: bold; - background-color: colors.$grey5; + background-color: colors.$grey50; } .dropdown__option--is-highlighted-option, .dropdown__option:hover { - background-color: colors.$grey4; + background-color: colors.$grey100; } } @@ -511,7 +521,7 @@ input:not([type='radio']), textarea { - border: 1px solid colors.$grey2; + border: 1px solid colors.$grey300; border-radius: 4px; padding: 4px 8px; outline: none; @@ -519,7 +529,7 @@ line-height: 16px; &:focus, &:focus-visible { - border-color: colors.$linkBlueTransparent; + border-color: colors.$blue300; } } .dropdown__search-bar { @@ -538,3 +548,31 @@ margin-bottom: 0; } } + +.settings-panel-grey-button { + color: #000 !important; + background: colors.$grey100 !important; + padding: 4px 8px; + text-align: center; + border: 1px solid colors.$grey300 !important; + font-size: 14px !important; + + &:hover { + background-color: colors.$grey50 !important; + } +} + +.settings-panel-dropdownMenu { + z-index: 14; +} + +.project-template-dropdown-trigger-button { + color: white !important; + + &:hover, + &:focus { + background-color: unset !important; + box-shadow: inset 0 0 0 1px rgba(white, 0.6) !important; + color: rgba(white, 0.6) !important; + } +} diff --git a/public/css/sass/components/settingsPanel/SettingsPanelTable.scss b/public/css/sass/components/settingsPanel/SettingsPanelTable.scss index 108535a693..46d943bd66 100644 --- a/public/css/sass/components/settingsPanel/SettingsPanelTable.scss +++ b/public/css/sass/components/settingsPanel/SettingsPanelTable.scss @@ -1,4 +1,5 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; +@use '../../commons/variables'; .settings-panel-table { position: relative; @@ -7,12 +8,12 @@ .settings-panel-button { cursor: pointer; color: colors.$black; - background: colors.$grey8; + background: colors.$grey200; border-radius: 2px 0 0 2px; padding: 6px 30px; - border: 1px solid colors.$grey; + border: 1px solid colors.$grey600; &:hover { - background-color: colors.$grey7; + background-color: colors.$grey400; } } .settings-panel-table-row-empty { @@ -24,11 +25,13 @@ .settings-panel-table-rowHeading { display: grid; align-items: center; - background-color: colors.$grey; + background-color: colors.$grey600; height: 30px; color: white; font-size: 15px; font-weight: bold; + border-top-left-radius: variables.$border-radius-default; + border-top-right-radius: variables.$border-radius-default; } .settings-panel-table-rowHeading-column { @@ -39,8 +42,6 @@ .settings-panel-row { display: flex; flex-direction: column; - border: 1px solid colors.$grey8; - border-bottom: unset; transition: padding 0.2s ease-out 0.15s; .settings-panel-cell-center { align-self: center; @@ -54,7 +55,7 @@ align-items: center; width: 100%; min-height: 50px; - background-color: colors.$grey9; + background-color: colors.$grey75; } .settings-panel-row-content > *:not(.settings-panel-row-drag-handle) { @@ -67,23 +68,19 @@ } .settings-panel-row-active { - background-color: colors.$transparentBlue; -} - -.settings-panel-row:last-child { - border-bottom: 1px solid colors.$grey8; + background-color: colors.$blue50; } .settings-panel-row-drag-handle { position: absolute; margin-left: 15px; - margin-top: 8px; + margin-top: 14px; cursor: move; - border: 2px dotted #ccc; + border: 2px dotted colors.$grey200; border-top: 0; border-bottom: 0; width: 2px; - height: 30px; + height: 25px; } .settings-panel-row-dragging { @@ -154,3 +151,10 @@ padding: 5px 10px !important; font-size: 14px; } + +.settings-panel-table-rows-container { + overflow: hidden; + border: 1px solid colors.$grey200; + border-bottom-left-radius: variables.$border-radius-default; + border-bottom-right-radius: variables.$border-radius-default; +} diff --git a/public/css/sass/components/settingsPanel/TranslationMemoryGlossaryTab.scss b/public/css/sass/components/settingsPanel/TranslationMemoryGlossaryTab.scss index 0860d057a9..989ba128bf 100644 --- a/public/css/sass/components/settingsPanel/TranslationMemoryGlossaryTab.scss +++ b/public/css/sass/components/settingsPanel/TranslationMemoryGlossaryTab.scss @@ -1,4 +1,5 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; +@use '../../commons/variables'; .translation-memory-glossary-tab { display: flex; @@ -32,8 +33,8 @@ display: flex; flex-direction: column; gap: 10px; - border-radius: 4px; - border: 1px dashed colors.$grey8; + border-radius: variables.$border-radius-default; + border: 1px dashed colors.$grey200; padding: 10px; margin-bottom: 20px; background: colors.$white; @@ -61,7 +62,7 @@ .translation-memory-glossary-tab-input-text { border-radius: 2px; - border: 1px solid colors.$grey8; + border: 1px solid colors.$grey200; padding: 6px; width: 350px; } @@ -101,10 +102,9 @@ > form { padding: 0 !important; background-color: unset; - - > :last-child { - grid-column: 7; - } + } + > form > :last-child { + grid-column: 7; } } } @@ -119,7 +119,7 @@ .settings-panel-row-active { padding: 10px; - background-color: colors.$transparentBlue; + background-color: colors.$blue50; } .settings-panel-table-rowHeading-column { @@ -170,10 +170,10 @@ .tm-key-row-name { width: 100%; - padding: 4px; + padding: 4px 8px; background-color: unset; - border: 1px solid colors.$grey8; - border-radius: 3px; + border: 1px solid colors.$grey200; + border-radius: variables.$border-radius-default; &:focus, &:hover { @@ -194,7 +194,7 @@ } .tm-key-row-button-item { - color: colors.$grey6; + color: colors.$grey700; > :first-child { display: flex; @@ -204,8 +204,27 @@ } .tm-key-row-menu-button { + justify-content: unset; + .menu-button-wrapper { - > :first-child { + button { + color: colors.$black !important; + background: colors.$grey100 !important; + text-align: center; + border: 1px solid colors.$grey300 !important; + height: 32px !important; + font-size: 14px !important; + + &:hover { + background-color: colors.$grey50 !important; + } + } + + > :last-child { + padding: 4px 8px; + } + + /* > :first-child { min-width: 140px; border-radius: 2px; height: 28px; @@ -214,51 +233,53 @@ > :last-child { border: none; background-color: unset; - color: colors.$grey6; - } + color: colors.$grey700; + } */ } .just-button-import-tmx { min-width: 140px; border-radius: 2px; font-size: 16px; - color: #000; - background: colors.$grey4; + color: colors.$black; + background: colors.$grey100; padding: 4px 8px; text-align: center; - border: 1px solid colors.$grey7; + border: 1px solid colors.$grey400; &:hover { - background-color: colors.$grey5; + background-color: colors.$grey50; } } } -.tm-key-row-menu-button-dropdown { - margin-left: -10px; +.tm-key-row-options-menu-container, +.translation-memory-glossary-tab-buttons-group { + display: flex; + gap: 8px; } .tm-key-row-icons { display: flex; align-items: center; justify-content: center; - color: colors.$grey; + color: colors.$grey600; } -.translation-memory-glossary-tab-buttons-group { - display: flex; - gap: 8px; - justify-content: end; +.translation-memory-glossary-tab-create-row { + button[type='submit'] { + width: 96px; + } } .tm-key-create-resource-row-input { width: 100%; padding: 4px; border-radius: 3px; - border: solid 1px colors.$grey3; + border: solid 1px colors.$grey150; &.error { - border: solid 1px colors.$redDefault; + border: solid 1px colors.$red500; } } @@ -270,13 +291,18 @@ padding: 10px; min-height: 50px; + .message-share-tmx-email { + font-weight: bold; + cursor: pointer; + } + .action-form { display: flex; justify-content: space-between; align-items: center; width: 100%; .translation-memory-glossary-tab-label { - gap: 220px !important; + gap: 200px !important; } > :first-child { display: flex; @@ -301,7 +327,7 @@ } .action-form-error { input { - color: colors.$redDefault; + color: colors.$red500; } } @@ -318,22 +344,20 @@ align-items: center; justify-content: space-between; width: 100%; - - .filename { - font-weight: bold; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 60%; - } - - .filename-error { - color: colors.$redDefault; - } + } + > li .filename { + font-weight: bold; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 60%; + } + > li .filename-error { + color: colors.$red500; } > li:nth-child(even) { - background-color: colors.$grey4; + background-color: colors.$grey100; } } @@ -341,24 +365,24 @@ width: 260px; height: 6px; border-radius: 4px; - background-color: colors.$grey8; + background-color: colors.$grey200; > :first-child { - background-color: colors.$approvedGreen; + background-color: colors.$green800; height: 100%; border-radius: 4px; } } .import-completed { - color: colors.$approvedGreenHover; + color: colors.$green600; } .message-error { display: flex; align-items: center; gap: 8px; - color: colors.$redDefault; + color: colors.$red500; > button { padding: 4px; @@ -373,7 +397,7 @@ margin-top: 6px; > :last-child { - color: colors.$approvedGreenHover; + color: colors.$green600; } } } @@ -385,8 +409,8 @@ } .translation-memory-glossary-tab-delete { - border-top: 3px solid #ffcc01; - background-color: colors.$orangeDefaultTransparent2; + border-top: 3px solid colors.$orange200; + background-color: colors.$orange50; } .translation-memory-glossary-tab-active-table { @@ -406,8 +430,8 @@ .settings-panel-row-dragover-half-bottom ) { .settings-panel-row-active { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; + border-bottom-left-radius: variables.$border-radius-default; + border-bottom-right-radius: variables.$border-radius-default; } } } @@ -418,9 +442,9 @@ justify-content: space-between; height: 56px; padding: 20px; - background-color: colors.$grey3; - border-top-left-radius: 8px; - border-top-right-radius: 8px; + background-color: colors.$grey150; + border-top-left-radius: variables.$border-radius-default; + border-top-right-radius: variables.$border-radius-default; } .tm-prioritization-text-content { @@ -434,32 +458,17 @@ } span { - color: colors.$grey6; + color: colors.$grey700; } } - .switch-container-outer { - width: 155px; + div[class*='switch-container-outer'] { + width: 150px; } } +.tm-key-row-menu-button, .tm-row-penalty { - .tm-row-penalty-button, - .penalty-numeric-stepper-close-button { - border-radius: 2px; - font-size: 16px; - color: #000 !important; - background: colors.$grey4 !important; - padding: 4px 8px; - text-align: center; - border: 1px solid colors.$grey7 !important; - font-size: 16px !important; - - &:hover { - background-color: colors.$grey5 !important; - } - } - .tm-row-penalty-numeric-stepper { display: flex; gap: 5px; @@ -468,7 +477,7 @@ .penalty-numeric-stepper-close-button { width: 28px !important; height: 28px !important; - color: colors.$grey6 !important; + color: colors.$grey700 !important; } } diff --git a/public/css/sass/components/signin/ForgotPassword.scss b/public/css/sass/components/signin/ForgotPassword.scss index 1d0bade6b3..dcab5352c3 100644 --- a/public/css/sass/components/signin/ForgotPassword.scss +++ b/public/css/sass/components/signin/ForgotPassword.scss @@ -1,4 +1,4 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; .forgotpassword-component { display: flex; @@ -19,7 +19,7 @@ } p { - color: colors.$grey7; + color: colors.$grey400; } .forgotpassword-form { diff --git a/public/css/sass/components/signin/Login.scss b/public/css/sass/components/signin/Login.scss index ff85adff47..c91f8cac53 100644 --- a/public/css/sass/components/signin/Login.scss +++ b/public/css/sass/components/signin/Login.scss @@ -1,4 +1,4 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; .login-component { display: flex; flex-direction: column; @@ -47,7 +47,7 @@ flex-direction: column; gap: 30px; font-size: 16px; - color: colors.$grey7; + color: colors.$grey400; > :first-child { display: flex; diff --git a/public/css/sass/components/signin/OnBoarding.scss b/public/css/sass/components/signin/OnBoarding.scss index d43753e348..fb668cdabb 100644 --- a/public/css/sass/components/signin/OnBoarding.scss +++ b/public/css/sass/components/signin/OnBoarding.scss @@ -1,5 +1,5 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; @use 'SigninPage'; @use 'Login'; @use 'Register'; @@ -27,7 +27,7 @@ } p { - color: colors.$grey7; + color: colors.$grey400; } @@ -54,14 +54,14 @@ height: 20px; line-height: 20px; border-radius: 50%; - background-color: colors.$grey7; + background-color: colors.$grey400; color: colors.$white; } } } .form-errorMessage { font-size: 14px; - color: colors.$redDefault; + color: colors.$red500; text-align: center; padding-left: 2px; } diff --git a/public/css/sass/components/signin/PasswordReset.scss b/public/css/sass/components/signin/PasswordReset.scss index 74a89f158c..fc31d1922c 100644 --- a/public/css/sass/components/signin/PasswordReset.scss +++ b/public/css/sass/components/signin/PasswordReset.scss @@ -1,4 +1,4 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; .passwordreset-component { display: flex; @@ -19,7 +19,7 @@ } p { - color: colors.$grey7; + color: colors.$grey400; } .passwordreset-form { diff --git a/public/css/sass/components/signin/Register.scss b/public/css/sass/components/signin/Register.scss index c1cd7c8dbe..852b192c3b 100644 --- a/public/css/sass/components/signin/Register.scss +++ b/public/css/sass/components/signin/Register.scss @@ -1,4 +1,5 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; +@use '../../commons/variables'; .register-component { display: flex; @@ -10,29 +11,29 @@ flex-direction: column; gap: 20px; max-width: 320px; - background: #f5f6f7; - border-radius: 8px; + background: colors.$grey50; + border-radius: variables.$border-radius-default; padding: 64px 40px; h2, ul { text-align: left; + } - > li { - display: flex; - gap: 10px; - font-size: 16px; - align-items: center; - padding: 5px 0; - - &:first-child { - font-weight: bold; - } - - svg { - flex-shrink: 0; - color: colors.$translatedBlue; - } + ul > li { + display: flex; + gap: 10px; + font-size: 16px; + align-items: center; + padding: 5px 0; + + &:first-child { + font-weight: bold; + } + + svg { + flex-shrink: 0; + color: colors.$blue500; } } } @@ -51,14 +52,14 @@ h4 { font-size: 16px; font-weight: bold; - color: colors.$grey7; + color: colors.$grey400; text-align: center; margin: 0; } } .register-divider { - color: colors.$grey7; + color: colors.$grey400; display: flex; align-items: center; width: 100%; @@ -66,7 +67,7 @@ div { flex-grow: 1; height: 1px; - background-color: colors.$grey8; + background-color: colors.$grey200; } span { @@ -98,18 +99,17 @@ .input-container { display: flex; gap: 10px; - - > span { - display: flex; - color: colors.$grey7; - } + } + .input-container > span { + display: flex; + color: colors.$grey400; } } .terms-and-conditions-error { font-size: 12px; text-align: left; - color: colors.$redDefault; + color: colors.$red500; } } @@ -117,7 +117,7 @@ display: flex; justify-content: center; font-size: 16px; - color: colors.$grey7; + color: colors.$grey400; } } @@ -140,7 +140,7 @@ } p { - color: colors.$grey7; + color: colors.$grey400; } .footer-buttons { @@ -153,6 +153,6 @@ .email-sent-again { text-align: center; - color: colors.$grey7; + color: colors.$grey400; } } diff --git a/public/css/sass/components/signin/SigninPage.scss b/public/css/sass/components/signin/SigninPage.scss index fb366ae2ff..fe192f96c7 100644 --- a/public/css/sass/components/signin/SigninPage.scss +++ b/public/css/sass/components/signin/SigninPage.scss @@ -1,4 +1,4 @@ -@use '../../commons/colors'; +@use '../../tokens/colors'; .signin-overlay { position: fixed; diff --git a/public/css/sass/lexiqa.scss b/public/css/sass/lexiqa.scss index 79398cb993..76a106930d 100755 --- a/public/css/sass/lexiqa.scss +++ b/public/css/sass/lexiqa.scss @@ -1,3 +1,4 @@ +@use './tokens/colors'; /* ============================== Tooltip STYLING @@ -33,14 +34,14 @@ } } .tooltip-error-ignore { - color: #757575; + color: colors.$grey600; text-decoration: none; cursor: pointer; border-radius: 0 4px 4px 0; padding-left: 10px; height: 40px; &:hover { - color: #525252; + color: colors.$grey700; } .icon-cancel-circle:before { line-height: 40px; @@ -94,27 +95,27 @@ } .n0 { - background-color: #d08053; + background-color: colors.$orange500; } .p0 { - background-color: #65c783; + background-color: colors.$green300; } .c0 { - background-color: #65c783; + background-color: colors.$green300; } .u0 { - background-color: #b8a300; + background-color: colors.$orange600; } .s0 { - background-color: #38c0c5; + background-color: colors.$blue200; } .l0 { - background-color: #b792e6; + background-color: colors.$purple200; } .b0 { @@ -130,11 +131,11 @@ } .o0 { - background-color: rgba(#209faa, 0.75); + background-color: rgba(colors.$blue200, 0.75); } .m { - background-color: #ea92b8; + background-color: colors.$red100; } .m, diff --git a/public/css/sass/modals/PreferenceModal.scss b/public/css/sass/modals/PreferenceModal.scss index a680e83d3e..adbcbbefa5 100644 --- a/public/css/sass/modals/PreferenceModal.scss +++ b/public/css/sass/modals/PreferenceModal.scss @@ -1,4 +1,4 @@ -@use "../commons/colors"; +@use "../tokens/colors"; .preferences-modal .user-info-form { font-size: 18px; @@ -22,7 +22,7 @@ > label { font-size: 15px; - color: colors.$grey1; + color: colors.$grey500; } } @@ -55,7 +55,7 @@ font-size: 15px; text-align: left; word-wrap: break-word; - color: colors.$grey1; + color: colors.$grey500; white-space: nowrap; width: 100%; border: none; @@ -83,8 +83,8 @@ flex: 1 100%; line-height: 40px; margin-top: 13px; - border: 1px solid colors.$greenDefault; - background-color: #f7fdf7; + border: 1px solid colors.$green500; + background-color: colors.$white; border-radius: 4px; display: flex; justify-content: center; @@ -92,7 +92,7 @@ padding: 10px; i { - color: colors.$greenDefault; + color: colors.$green500; margin-top: 8px; margin-left: 20px; } @@ -132,7 +132,7 @@ line-height: 25px; .user-info-icon-update { cursor: pointer; - color: colors.$grey; + color: colors.$grey600; &:hover { color: colors.$black; } @@ -177,10 +177,10 @@ line-height: 50px; text-align: center; font-size: 21px; - color: #fff; + color: colors.$white; padding: 0; - background: #b7b7b7; - border: 1px solid #ccc; + background: colors.$grey400; + border: 1px solid colors.$grey200; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; @@ -206,14 +206,14 @@ .button { font-family: Calibri, Arial, Helvetica, sans-serif; vertical-align: top; - border: 1px solid #797979; + border: 1px solid colors.$grey600; border-radius: 2px; font-size: 16px; margin-bottom: 15px; margin-left: 80%; - background-color: colors.$translatedBlue; + background-color: colors.$blue500; transition: 0.3s ease; - color: #ffffff; + color: colors.$white; text-shadow: none; background-image: none; cursor: pointer; @@ -228,9 +228,9 @@ text-decoration: none; user-select: none; &:hover { - background-color: #08b3de; + background-color: colors.$blue200; box-shadow: - 0 0 0 #e0e0e0, + 0 0 0 colors.$grey200, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24) !important; } @@ -238,6 +238,6 @@ } .user-info-form .grey-txt { - color: colors.$grey1; + color: colors.$grey500; } diff --git a/public/css/sass/modals/instructionsModal.scss b/public/css/sass/modals/instructionsModal.scss index e9ff93750d..0e1d1eb407 100644 --- a/public/css/sass/modals/instructionsModal.scss +++ b/public/css/sass/modals/instructionsModal.scss @@ -1,68 +1,17 @@ +@use '../tokens/colors'; +@use '../commons/variables'; .instructions-modal { min-height: 230px; max-width: 900px; - h2 { - padding-top: 16px; + .title { + display: flex; + gap: 8px } - - span.fileFormat { - padding: 4px 5px 4px 47px; - background-size: 25px !important; - line-height: 25px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - .ui.accordion { - max-height: 400px; - overflow: auto; - -webkit-box-shadow: unset; - box-shadow: unset; - border-radius: 0px; - margin-bottom: 20px; - ul { - list-style: disc; - padding-left: 30px; - margin-top: 10px; - margin-bottom: 10px; - li { - margin-bottom: 4px; - line-height: 24px; - } - } - .title { - display: flex; - align-items: center; - color: #666; - &:hover { - color: #000; - } - &.current { - //color: #fff; - background: #dee4ea; - &:hover { - background: #d9e0e8; - //color: #fff; - } - .current-icon { - display: block; - float: right; - margin-left: 10px; - } - } - } - .transition { - line-height: 25px; - padding: 10px 72px; - - p { - line-height: 26px; - word-break: break-word; - } - } + h4 { + margin: 20px 0; } .instructions-container { - background-color: #fff; + background-color: colors.$white; padding: 20px; margin-top: 20px; margin-bottom: 20px; @@ -73,7 +22,7 @@ word-break: break-all; } blockquote { - border-left: 5px solid #ccc; + border-left: 5px solid colors.$grey200; margin: 1.5em 10px; padding: 0.5em 10px; } @@ -85,133 +34,35 @@ } .instructions-accordion { - .accordion-component-title { - border-radius: unset !important; - } - - &:not(:first-child) { - .accordion-component-title { - border-top: solid 1px #aebdcd; - } - - &:has(.accordion-expanded) { - .accordion-component-title { - border-radius: unset !important; - } - } - } - - &:not(:last-child) { - .accordion-component-content { - border-radius: unset !important; - } - } - - &:first-child { - .accordion-component-title { - border-radius: 8px 8px 0 0 !important; - } - } - - &:last-child { - .accordion-component-title:not(.accordion-expanded) { - border-radius: 0 0 8px 8px !important; - } - } - - &:has(.accordion-expanded) { - .accordion-component-title > :first-child { - color: black; - } - } -} - -.instructions-accordion { - .accordion-component-title { - border-radius: unset !important; - } + // Default: no rounding — middle items in a stacked group are flat + --accordion-title-br: 0; + --accordion-title-expanded-br: 0; + --accordion-content-br: 0; &:not(:first-child) { - .accordion-component-title { - border-top: solid 1px #aebdcd; - } - - &:has(.accordion-expanded) { - .accordion-component-title { - border-radius: unset !important; - } - } - } - - &:not(:last-child) { - .accordion-component-content { - border-radius: unset !important; - } + --accordion-title-border-top: solid 1px #{colors.$grey300}; } &:first-child { - .accordion-component-title { - border-radius: 8px 8px 0 0 !important; - } + --accordion-title-br: #{variables.$border-radius-default} #{variables.$border-radius-default} 0 0; + --accordion-title-expanded-br: #{variables.$border-radius-default} #{variables.$border-radius-default} 0 0; } &:last-child { - .accordion-component-title { - border-radius: 0 0 8px 8px !important; - } - } + --accordion-content-br: 0 0 #{variables.$border-radius-default} #{variables.$border-radius-default}; - &:has(.accordion-expanded) { - .accordion-component-title > :first-child { - color: black; + &:not(:has([data-expanded])) { + --accordion-title-br: 0 0 #{variables.$border-radius-default} #{variables.$border-radius-default}; } } -} -.instructions-accordion { - .accordion-component-title { - border-radius: unset !important; + // Single accordion (only child): full rounding when collapsed + &:first-child:nth-last-child(1):not(:has([data-expanded])) { + --accordion-title-br: #{variables.$border-radius-default}; + --accordion-content-br: 0; } - &:not(:first-child) { - .accordion-component-title { - border-top: solid 1px #aebdcd; - } - - &:has(.accordion-expanded) { - .accordion-component-title { - border-radius: unset !important; - } - } - } - - &:not(:last-child) { - .accordion-component-content { - border-radius: unset !important; - } - } - - &:first-child { - .accordion-component-title { - border-radius: 8px 8px 0 0 !important; - } - } - - &:last-child { - .accordion-component-title:not(.accordion-expanded) { - border-radius: 0 0 8px 8px !important; - } - } - - &:has(.accordion-expanded) { - .accordion-component-title > :first-child { - color: black; - } - } - - &:first-child:nth-last-child(1) { - .accordion-component-title:not(.accordion-expanded) { - border-radius: 8px !important; - } + [data-expanded] > :first-child { + color: #{colors.$black}; } } diff --git a/public/css/sass/modals/language-selector.scss b/public/css/sass/modals/language-selector.scss index c5fcd03812..2a71db48a5 100644 --- a/public/css/sass/modals/language-selector.scss +++ b/public/css/sass/modals/language-selector.scss @@ -1,22 +1,22 @@ /* Language Selector Modal */ -@use "../commons/colors"; +@use "../tokens/colors"; #matecat-modal-languages { - $light-blue: colors.$translatedBlue; - $medium-blue: colors.$linkBlue; - $dark-blue: colors.$darkBlue; + $light-blue: colors.$blue500; + $medium-blue: colors.$blue700; + $dark-blue: colors.$blue900; $placeholder-gray: #cdd4de; - $btn-shadow-gray: colors.$grey1; - $btn-hover-blue: colors.$translatedBlueHover; + $btn-shadow-gray: colors.$grey500; + $btn-hover-blue: colors.$blue600; - $medium-gray: colors.$grey2; - $dark-gray: colors.$grey1; + $medium-gray: colors.$grey300; + $dark-gray: colors.$grey500; /* Modal */ .matecat-modal { button:focus { - border: 1px solid colors.$translatedBlue; + border: 1px solid colors.$blue500; } } @@ -34,15 +34,11 @@ display: flex; justify-content: space-between; align-items: center; - - .close-matecat-modal { - padding-bottom: 9px; - } } /* Modal Subheader */ .matecat-modal-subheader { - background: #fff; + background: colors.$white; border-bottom: 1px solid $medium-gray; /*height: $subheader-height;*/ padding: 16px 16px 16px 32px; @@ -54,43 +50,37 @@ align-items: center; margin-top: 5px; padding: 4px 55px; - .first-column { min-width: 48px; text-align: left; } - .label { - color: colors.$grey6; + color: colors.$grey700; margin: 0px 8px 0 0; } - .second-column { display: flex; align-items: center; gap: 5px; - - .list-badge { - background-color: colors.$grey1; - border-radius: 12px; - padding: 2px 10px; - cursor: pointer; - - &:hover { - background-color: colors.$darkBlueHover; - } - - .language-name { - display: block; - color: white; - font-size: 14px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: calc((90vw - 350px) / 3); - line-height: 1.5; - } - } + } + } + .recently-used .second-column .list-badge { + background-color: colors.$grey500; + border-radius: 12px; + padding: 2px 10px; + cursor: pointer; + &:hover { + background-color: colors.$blue950; + } + .language-name { + display: block; + color: white; + font-size: 14px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: calc((90vw - 350px) / 3); + line-height: 1.5; } } @@ -100,17 +90,14 @@ justify-content: flex-start; align-items: center; padding: 4px 8px; - .first-column { min-width: 48px; text-align: left; } - .label { font-weight: bold; margin: 0px 8px 0 0; } - .language-search { display: flex; align-items: center; @@ -119,62 +106,62 @@ border-radius: 2px; border: 1px solid $medium-gray; padding: 6px 16px; - &:hover { border: 1px solid $dark-gray; cursor: text; } - - input[type='text'] { - border: none; - margin: 0; - padding: 6px 8px; - &::placeholder { - color: $placeholder-gray; - opacity: 1; - } - &:focus { - outline: none; - } - } - - /* Tag chips */ - .react-tagsinput { - width: 100%; - & > span { - display: inline-block; - & > * { - margin-top: 2px; - margin-bottom: 2px; - } - } + } + } + .language-from .language-search input[type='text'], + .language-to .language-search input[type='text'] { + border: none; + margin: 0; + padding: 6px 8px; + &::placeholder { + color: $placeholder-gray; + opacity: 1; + } + &:focus { + outline: none; + } + } + /* Tag chips */ + .language-from .language-search .react-tagsinput, + .language-to .language-search .react-tagsinput { + width: 100%; + & > span { + display: inline-block; + & > * { + margin-top: 2px; + margin-bottom: 2px; } - .tag { - position: relative; - display: inline-block; - padding: 4px 8px; - text-transform: capitalize; - border-radius: 2px; - margin: 0 2px; - background: #fff; - color: #000; - border: 1px solid $medium-gray; - &:hover { - cursor: default; - } - .react-tagsinput-remove { - color: $light-blue; - text-decoration: none; - margin: 0 0 0 4px; - cursor: pointer; - } - &.highlightDelete { - background: $light-blue; - color: #ffffff; - .react-tagsinput-remove { - color: #ffffff; - } - } + } + } + .language-from .language-search .tag, + .language-to .language-search .tag { + position: relative; + display: inline-block; + padding: 4px 8px; + text-transform: capitalize; + border-radius: 2px; + margin: 0 2px; + background: colors.$white; + color: colors.$black; + border: 1px solid $medium-gray; + &:hover { + cursor: default; + } + .react-tagsinput-remove { + color: $light-blue; + text-decoration: none; + margin: 0 0 0 4px; + cursor: pointer; + } + &.highlightDelete { + background: $light-blue; + color: colors.$white; + .react-tagsinput-remove { + color: colors.$white; } } } @@ -204,7 +191,7 @@ .matecat-modal-footer { overflow: auto; height: 72px; - background: #fff; + background: colors.$white; border-top: 1px solid $medium-gray; padding: 8px 16px 8px 32px; @@ -228,10 +215,10 @@ /* Badge */ .badge { padding: 0.35rem 0.58rem; - background: colors.$translatedBlue; + background: colors.$blue500; border-radius: 25px; font-size: 0.9rem; - color: #fff; + color: colors.$white; line-height: 1; } @@ -272,7 +259,7 @@ &.selected { background: $dark-blue; - color: #fff; + color: colors.$white; } &:not(.selected) .check { display: none; @@ -296,7 +283,7 @@ &:hover:not(.selected), &.hover:not(.selected) { - background: colors.$grey3; + background: colors.$grey150; color: $medium-blue; // padding-left: 26px; @@ -305,62 +292,10 @@ } } - .language-dropdown-item-container { - .code-badge-selected { - background-color: colors.$white; - color: colors.$darkBlue; - } - } } - } - } - - /* Buttons */ - - .modal-btn { - padding: 8px 16px; - border-radius: 2px; - margin: 4px 8px; - cursor: pointer; - - &:focus { - outline: none; - } - - &.primary { - min-width: 128px; - //-webkit-box-shadow: 0 2px 8px 0 $btn-shadow-gray; - //-moz-box-shadow: 0 2px 8px 0 $btn-shadow-gray; - //box-shadow: 0 2px 8px 0 $btn-shadow-gray; - } - - &.secondary { - min-width: 100px; - } - - &.blue { - background: $light-blue; - border: 1px solid $light-blue; - color: #fff; - &:hover { - background-color: $btn-hover-blue; - //box-shadow: 0 0 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24) !important; - } - &:focus { - box-shadow: none; - border: 1px solid $dark-blue; - } - } - - &.gray { - background: #fff; - color: #000; - border: 1px solid $medium-gray; - &:focus { - border: 1px solid $light-blue; - } - &:hover { - background-color: colors.$grey3; + li.lang-item .language-dropdown-item-container .code-badge-selected { + background-color: colors.$white; + color: colors.$blue900; } } } diff --git a/public/css/sass/modals/split_modal.scss b/public/css/sass/modals/split_modal.scss index 8883be5ac5..9d6c9af453 100644 --- a/public/css/sass/modals/split_modal.scss +++ b/public/css/sass/modals/split_modal.scss @@ -1,4 +1,4 @@ -@use "../commons/colors"; +@use "../tokens/colors"; /*Split modal*/ .popup-split { @@ -11,7 +11,7 @@ top: 0; border-radius: 0 0 4px 4px; text-align: left; - border: 1px solid #666; + border: 1px solid colors.$grey700; min-width: 670px; } .splitbtn-cont { @@ -21,7 +21,7 @@ .popup-split-job-id { font-weight: 100; font-size: 16px; - color: colors.$grey1; + color: colors.$grey500; margin-right: 5px; } } @@ -32,7 +32,7 @@ margin-right: 15px !important; font-size: 18px; text-align: right; - color: #d65757 !important; + color: colors.$red400 !important; display: block; line-height: 13px !important; } @@ -45,7 +45,7 @@ .splitbtn-cont { overflow: hidden; font-size: 18px; - color: colors.$grey1; + color: colors.$grey500; font-weight: bold; display: flex; flex-direction: column; @@ -71,7 +71,7 @@ .nosplit { float: right; font-size: 20px; - color: colors.$grey1; + color: colors.$grey500; display: none; margin: 45px 140px 0 0; } @@ -83,7 +83,7 @@ } input[type='text'][disabled] { - background: #f0f0f0; + background: colors.$grey75; } h2 { @@ -97,7 +97,7 @@ h3 { font-size: 20px !important; font-weight: bold !important; - color: #333 !important; + color: colors.$grey1300 !important; display: inline-block; vertical-align: text-top; } @@ -114,9 +114,9 @@ width: auto; height: 37px; padding: 4px; - color: colors.$grey1; + color: colors.$grey500; font-size: 18px; - border: 1px solid colors.$grey1; + border: 1px solid colors.$grey500; box-sizing: border-box; display: inline-block; background: white; @@ -124,18 +124,6 @@ } } - .splitbtn:before { - content: '\f065'; - margin-right: 3px; - font-family: 'icomoon'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - } .popup-split-project-title { display: none; @@ -153,8 +141,8 @@ cursor: default; -moz-box-shadow: none; -webkit-box-shadow: none; - border: 1px solid colors.$grey1; - background: #ccc; + border: 1px solid colors.$grey500; + background: colors.$grey200; } .split-box2 { @@ -167,12 +155,12 @@ left: 50%; margin: -300px 0 0 -350px; z-index: 999999; - background: #fff; - box-shadow: 0px 0px 25px #000; + background: colors.$white; + box-shadow: 0px 0px 25px colors.$black; border-radius: 2px; text-align: left; font-size: 18px; - border: 1px solid colors.$grey1; + border: 1px solid colors.$grey500; } .split-box3 .input, .split-box2 .input { @@ -201,12 +189,12 @@ margin-right: 0px; padding: 6px 5px 5px 5px; font-size: 18px; - background: #fdfdfd; + background: colors.$white; background-size: 13px 11px; box-sizing: content-box; - border: 1px solid #ccc; + border: 1px solid colors.$grey200; border-radius: 6px; - box-shadow: inset 0 1px 3px #ddd; + box-shadow: inset 0 1px 3px colors.$grey200; } .btn-cancel { @@ -219,7 +207,7 @@ padding: 0px; width: 99%; border-radius: 0px; - background: #ffffff; + background: colors.$white; //box-shadow: 0 0 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24) !important; } @@ -231,31 +219,31 @@ width: 82%; margin: 25px 0 -20px 20px; text-align: right; - color: #ff0000; + color: colors.$red500; font-size: 12px; } .error-message { - background: #d65757; - color: #fff; + background: colors.$red400; + color: colors.$white; margin: 0 0 10px 0; float: left; font-weight: bold; width: 100%; -moz-border-radius: 2px; border-radius: 2px; - border: 1px solid #c45f5f; + border: 1px solid colors.$orange500; margin-top: 10px; } .error { margin-right: auto; - color: #ff0000;; + color: colors.$red500; } .jobcontainer { padding-bottom: 50px; - border-bottom: 1px dashed #ccc; + border-bottom: 1px dashed colors.$grey200; } div.wrapper div:last-child { @@ -267,18 +255,6 @@ line-height: 40px !important; } - .error-message p:before { - font-family: 'icomoon'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - content: '\f071'; - margin-right: 10px; - } .jobs h4 { margin: 11px 0 0 10px; @@ -289,12 +265,12 @@ float: right; } .job-perc { - color: #999; + color: colors.$grey400; margin: 0; float: left; padding: 10px; font-size: 18px; - color: #000; + color: colors.$black; text-align: right; } .job-perc p { @@ -307,7 +283,7 @@ .total .wordsum { font-size: 20px; - color: colors.$grey1; + color: colors.$grey500; text-align: right; margin-right: 15px; margin-top: 10px; @@ -326,8 +302,7 @@ cursor: default; -moz-box-shadow: none; -webkit-box-shadow: none; - border: 1px solid colors.$grey1; - background: #ccc !important; + background: colors.$grey200 !important; } .btn-cancel { @@ -346,7 +321,7 @@ .empty { border: 0 !important; - background: #f0f0f0 !important; + background: colors.$grey75 !important; width: 120px; } @@ -357,7 +332,7 @@ box-shadow: none; } &:focus { - border-color: #96c8da; + border-color: colors.$grey300; box-shadow: none; } } @@ -374,3 +349,9 @@ } } /************/ + +.split-loader { + border: 1px solid colors.$grey200; + border-radius: 8px; + background: colors.$white; +} diff --git a/public/css/sass/modals/tmShareModal.scss b/public/css/sass/modals/tmShareModal.scss index 741cd960d8..10a16e8cfe 100644 --- a/public/css/sass/modals/tmShareModal.scss +++ b/public/css/sass/modals/tmShareModal.scss @@ -1,3 +1,4 @@ +@use '../tokens/colors'; /*** Share Key Popup ***/ .share-popup-container { margin: 20px; @@ -35,7 +36,7 @@ .share-popup-container-list h3 { font-size: 18px; - background: #f4f4f4; + background: colors.$grey75; text-align: left; margin: 0 !important; margin: 0 !important; @@ -47,7 +48,7 @@ border: 0; text-align: center; width: 165px; - border-bottom: 1px dashed #ccc; + border-bottom: 1px dashed colors.$grey200; } .share-popup-input-key:focus { @@ -74,7 +75,7 @@ max-height: 300px; position: relative; float: left; - border: 1px solid #d5d5d5; + border: 1px solid colors.$grey200; border-radius: 4px; margin: 20px; } @@ -86,7 +87,7 @@ float: left; overflow-y: auto; overflow-x: hidden; - border-top: 1px solid #cacaca; + border-top: 1px solid colors.$grey200; box-shadow: inset 0 2px 2px -1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 2px 2px -1px rgba(0, 0, 0, 0.1); } @@ -115,8 +116,8 @@ input.share-popup-container-input-email { width: 344px; height: 34px; padding-left: 4px; - background-color: #fbfbfb; - border: 1px solid #ccc; + background-color: colors.$white; + border: 1px solid colors.$grey200; border-radius: 2px; } @@ -124,7 +125,7 @@ input.share-popup-container-input-email { width: 100%; height: 45px; float: left; - border-bottom: 1px solid #cacaca; + border-bottom: 1px solid colors.$grey200; } .share-popup-list-item:last-child { @@ -143,6 +144,6 @@ span.share-popup-item-name, span.share-popup-item-email { font-size: 14px; - color: #999; + color: colors.$grey400; line-height: 13px; } diff --git a/public/css/sass/popup.scss b/public/css/sass/popup.scss index 070030504b..caa2230247 100644 --- a/public/css/sass/popup.scss +++ b/public/css/sass/popup.scss @@ -1,4 +1,4 @@ -@use "commons/colors"; +@use "tokens/colors"; /*popup*/ .modal, #modal { @@ -9,13 +9,13 @@ //-webkit-box-shadow: 0 1px 20px #000; //box-shadow: 0 1px 20px #000; min-width: 600px; - background-color: colors.$grey5; + background-color: colors.$grey50; margin: -200px 0 0 -250px; padding: 0 0px 20px 0px; position: fixed; left: 46%; max-width: 400px; - z-index: 999999999; + z-index: var(--z-toast); } .popup p.text-container-top { @@ -34,8 +34,8 @@ max-height: inherit; font-size: 24px; padding: 10px 10px 7px 58px; - border-bottom: 1px solid #000; - color: #fff; + border-bottom: 1px solid colors.$black; + color: colors.$white; margin: 0 !important; text-align: left; } @@ -66,47 +66,22 @@ padding: 10px 10px 7px 64px; background-size: 40px; /* border-bottom: 1px solid #000; */ - color: #fff; + color: colors.$white; margin: 0 !important; text-align: left; font-family: 'calibri', Arial, Helvetica, sans-serif; } - .popup .x-popup { - color: #fff; - text-decoration: none; - display: block; - height: 30px; - font-size: 20px; - padding-top: 10px; - float: right; - margin: 0 10px 0 0; - background-size: 22px; - font-family: 'icomoon'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - - .x-popup:before { - content: '\f057'; - } - .inner { width: 45px; - border-right: 1px solid #003366; + border-right: 1px solid colors.$blue900; border-radius: 0 0 0 6px; } .btn-ok, .btn-cancel { - color: #fff; - background: colors.$translatedBlue; + color: colors.$white; + background: colors.$blue500; font-weight: bold; text-decoration: none; padding: 8px 10px; @@ -116,20 +91,20 @@ cursor: pointer; } .btn-ok:hover { - background-color: colors.$translatedBlueHover; + background-color: colors.$blue600; } .btn-ok:active { - background-color: colors.$translatedBlueActive; + background-color: colors.$blue600; } .btn-cancel { - color: colors.$grey1 !important; + color: colors.$grey500 !important; background: white !important; - border: 1px solid colors.$grey1 !important; + border: 1px solid colors.$grey500 !important; } .btn-cancel:hover { cursor: pointer; - background-color: colors.$grey3 !important; + background-color: colors.$grey150 !important; } } diff --git a/public/css/sass/speech2text.scss b/public/css/sass/speech2text.scss index 8111335c95..ec470a10b2 100644 --- a/public/css/sass/speech2text.scss +++ b/public/css/sass/speech2text.scss @@ -1,9 +1,10 @@ @use 'commons/mixins'; +@use './tokens/colors'; .activeSegmentButton { @include mixins.box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1)); - @include mixins.linear-gradient(#eee, top, #eee, #e0e0e0); - border-color: #ccc; + @include mixins.linear-gradient(colors.$grey75, top, colors.$grey75, colors.$grey200); + border-color: colors.$grey200; } .editarea.micActive { @@ -23,7 +24,7 @@ &:hover { svg g { - fill: #000000; + fill: colors.$black; } } @@ -37,7 +38,7 @@ /* @extend .activeSegmentButton; */ svg g { - fill: #fff; + fill: colors.$white; } } @@ -59,12 +60,12 @@ @include mixins.animation-direction(alternate); svg g { - fill: #ffffff; + fill: colors.$white; } } svg g { - fill: #737373; + fill: colors.$grey600; } } diff --git a/public/css/sass/style.scss b/public/css/sass/style.scss index 31642ae1f7..a8584894ba 100644 --- a/public/css/sass/style.scss +++ b/public/css/sass/style.scss @@ -1,4 +1,17 @@ -@use 'commons/colors'; +// ============================================================================ +// FROZEN FILE — DO NOT ADD NEW STYLES HERE +// ============================================================================ +// This file is legacy quarantine. All new styles belong in: +// - Component-level .module.scss files (co-located with the component) +// - public/css/sass/tokens/ (design tokens only) +// - public/css/sass/components/ (existing component files) +// +// Existing code will be extracted incrementally as components are touched. +// See CSS-ARCHITECTURE.md for the migration guide. +// ============================================================================ + +@use 'tokens/colors'; +@use 'commons/variables'; body { transition: padding-top 200ms ease-out; -webkit-transition: padding-top 200ms ease-out; @@ -25,11 +38,11 @@ body.incomingMsg header { header .wrapper { width: 100%; - background: #002b5c; + background: colors.$blue900; height: 60px; display: grid; grid-template-columns: 170px auto auto 64px; - padding: 0 24px; + padding: 0 40px 0 15px; align-content: center; box-sizing: border-box; top: 0; @@ -55,124 +68,7 @@ header .wrapper { } .text a { - text-color: #000; -} - -#notifbox { - opacity: 0.9; - text-align: center; - width: 45px; - color: #777; - height: 27px; - padding-top: 12px; - cursor: pointer; -} - -#notifbox.warningbox { - padding-top: 12px !important; -} - -#notifbox a { - display: block; - width: 36px; - height: 36px; - padding: 0; - margin: 0 auto; - text-decoration: none; -} - -#point2seg { - color: #fff; -} - -body.search-open header .header-menu #action-search { - /*background-image: url("../../img/icons/icon-search-active.svg");*/ - opacity: 1; - svg { - circle { - fill: #002b5c; - } - .st1 { - fill: #fff; - } - } -} - -.numbererror, -.qa-total-issues-counter, -.qa-issues-counter, -.qa-glossary-counter, -.qa-conflicts-issues-counter, -.qa-lexiqa-counter { - position: absolute; - color: #fff; - background: #e20001; - margin-left: 20px; - margin-top: -8px; - -moz-border-radius: 10px; - border-radius: 10px; - /*border: 1px solid #fff;*/ - display: block; - font-size: 11px; - padding: 0 4px; - text-align: center; - /*min-width: 8px;*/ - height: 15px; - line-height: 1.5; - box-sizing: content-box; -} - -.numbererror { - border-radius: 25px; - right: -4px; - font-size: 10px; - line-height: 16px; - top: 0; - margin: 0; - padding: 1px 6px; -} - -.numberwarning { - background: #e2be26 !important; -} -.numberinfo { - background: #0bbeec !important; -} - -.numbererror:empty { - display: none; -} - -.action-submenu.notific:before { - font-size: 18px; - color: #3aa94f; - content: ''; - display: none; /* Don't display icon if all ok */ -} - -#point2seg:after { - font-size: 18px; - content: ''; - display: none; /* Don't display icon */ -} - -.notific a { - color: #fff; - text-decoration: none; - height: 16px; - padding: 2px 4px 0 2px !important; - display: block; - margin: -2px 0px 0 2px; - font-size: 12px; - position: absolute; - border-radius: 2px; - -webkit-box-shadow: 0 1px 2px #666; - box-shadow: 0 1px 2px #666; - display: none; -} - -.notific.error { - color: #fff !important; + text-color: colors.$black; } .error a { @@ -183,26 +79,10 @@ body.search-open header .header-menu #action-search { font-size: 16px; } -.error-type a.tooltip { - left: -5px; - top: 10px; -} - -.tag-mismatch { - float: left !important; -} - -.auto-propagation-review { - cursor: pointer; - text-decoration: underline; - color: blue; - color: -webkit-link; -} - .warnings, .text .alternatives { clear: left; - color: #d65959; + color: colors.$red400; float: left; margin-left: -10px; font-size: 14px; @@ -261,19 +141,19 @@ section.opened .warnings { .cattool #quality-report[data-vote='excellent'], .cattool #quality-report[data-vote='verygood'], .cattool #quality-report[data-vote='good'] { - background-color: #3c9423 !important; + background-color: colors.$green700 !important; } .cattool #quality-report[data-vote='poor'] { - background-color: #ffa935 !important; + background-color: colors.$orange600 !important; } .cattool #quality-report[data-vote='acceptable'] { - background-color: #eaba22 !important; + background-color: colors.$orange400 !important; } .cattool #quality-report[data-vote='fail'] { - background-color: #e7504d !important; + background-color: colors.$red400 !important; } .logo { @@ -297,13 +177,13 @@ section.opened .warnings { } .projectbar { - color: #788190; + color: colors.$grey500; display: flex; justify-content: flex-start; padding: 40px 115px 10px 4.5%; align-items: center; span.fileFormat { - padding: 10px 15px 9px 47px; + padding: 10px; background-size: 25px !important; line-height: 16px; white-space: nowrap; @@ -319,19 +199,19 @@ section.opened .warnings { max-width: 80%; } .button-notes { - color: #fff !important; + color: colors.$white !important; font-weight: bold; text-decoration: none; padding: 6px 12px; border-radius: 2px; font-size: 16px; - background: colors.$translatedBlue; + background: colors.$blue500; user-select: none; cursor: pointer; min-width: 95px; margin-left: 15px; &:hover { - background-color: colors.$translatedBlueHover; + background-color: colors.$blue600; } svg { display: block; @@ -364,7 +244,7 @@ section.opened .warnings { width: 15%; float: left; margin: 0 15px 5px 0 !important; - background: #fff; + background: colors.$white; overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; @@ -372,38 +252,38 @@ section.opened .warnings { } .approved-bar { - background-color: colors.$approvedGreen; + background-color: colors.$green800; } .approved-bar-2nd-pass { - background-color: colors.$approved2Green; + background-color: colors.$purple500; } .draft-bar { - background-color: colors.$grey4; + background-color: colors.$grey100; } .rejected-bar { - background-color: #ed1c24; + background-color: colors.$red500; } .translated-bar { - background-color: colors.$translatedBlue; + background-color: colors.$blue500; } .rejected-background { - background-color: #ed1c24; + background-color: colors.$red500; } .approved-backgruond { - background-color: colors.$approvedGreen; + background-color: colors.$green800; } .rejected-foreground { - color: #ed1c24; + color: colors.$red500; } .approved-foreground { - color: colors.$approvedGreen; + color: colors.$green800; } .meter > a { @@ -482,7 +362,7 @@ section.opened .warnings { text-align: center; display: block; font-size: 11px; - color: #b6b8bb; + color: colors.$grey300; text-decoration: none; cursor: default; height: 100%; @@ -497,7 +377,7 @@ section.opened .warnings { .sid .txt { padding: 0px 3px; margin: 2px 0px 0 0px; - background: colors.$grey5; + background: colors.$grey50; display: contents; } @@ -521,10 +401,10 @@ section.editor .txt.segment-add-inBulk { } section.segment-selected-inBulk .body .text { - background: #edf4fd; + background: colors.$blue50; } section.segment-selected-inBulk .body .text:hover { - background: #edf4fd !important; + background: colors.$blue50 !important; } p.split-shortcut { @@ -562,7 +442,7 @@ p.split-shortcut { } section:hover .sid { - color: colors.$grey1; + color: colors.$grey500; } .editor .sid { @@ -616,7 +496,7 @@ section { /*-webkit-transition: all 100ms ease-in;*/ /*transition: all 100ms ease-in;*/ //box-shadow: 0 0 0 #e0e0e0, 0 0 0px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24) !important; - //border: 1px solid $grey4; + //border: 1px solid $grey100; } strong:first-child { @@ -626,119 +506,6 @@ strong:first-child { .download { position: absolute; } - -/*done & draft*/ -.translated, -.approved, -.guesstags { - color: #fff !important; - font-weight: bold; - text-decoration: none; - padding: 8px 18px; - border-radius: 2px; - font-size: 18px; - background: colors.$translatedBlue; - text-transform: uppercase; - user-select: none; -} - -.buttons .approved.disabled, -.buttons .next-unapproved.disabled, -.buttons .next-untranslated.disabled, -.buttons .translated.disabled, -.buttons .guesstags.disabled, -.buttons .disabled { - pointer-events: none; - color: #666 !important; - border-color: #666; - background: #efefef; -} - -.approved { - background: colors.$approvedGreen; -} - -article .translated, -.guesstags, -article .draft, -article .approved { - margin: 0 0px 5px 5px; -} - -.buttons { - float: right; - padding: 0; - -webkit-transition: all 100ms ease-in; - -moz-transition: all 100ms ease-in; /*margin: -15px 2% 0 0;*/ - margin: 0; - position: absolute; - right: 0; -} - -.buttons p { - font-size: 11px; - font-weight: normal; - color: #666; - display: none; - position: absolute; - top: calc(50% + 18px); - left: 50%; - transform: translateX(-50%); - width: 200px; -} - -.buttons li:hover p { - display: block; -} - -.translated { - color: #fff !important; -} - -article .translated, -article .approved, -.guesstags { - text-transform: uppercase; -} - -article .translated:hover, -article .next-untranslated:hover, -.guesstags:hover, -article .draft:hover, -article .btn:hover, -article .approved:hover, -article .next-unapproved:hover, -.search .btn:hover { - cursor: pointer; - //-webkit-box-shadow: 0 1px 2px #ccc; - //box-shadow: 0 1px 2px #ccc; - //border: 1px solid #000; -} - -article .translated:active, -.guesstags:active, -article .draft:active, -article .btn:active, -article .approved:active { - -moz-box-shadow: none; - -webkit-box-shadow: none; - box-shadow: none; -} - -.translated:hover, -.next-untranslated:hover, -.guesstags:hover { - background-color: colors.$translatedBlueHover; - //box-shadow: 0 0 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24) !important; -} - -.draft:hover { - background: #eee; -} - -.translated:active, -.draft:active, -.guesstags:active, .btn:active, .copysource:active { -moz-box-shadow: none; @@ -747,36 +514,6 @@ article .approved:active { /* border: 1px solid #000*/ } -.next-untranslated, -.next-unapproved { - width: 50px !important; - height: 27px !important; - background: colors.$translatedBlue; - font-weight: bold; - text-decoration: none; - padding: 5px 2px 3px 2px; - border-radius: 2px; - font-size: 18px; - color: #fff !important; - user-select: none; -} - -.approved, -.next-unapproved { - background: colors.$approvedGreen; - color: #fff !important; -} - -.draft { - background: -webkit-gradient( - linear, - left top, - left bottom, - from(#f5f5f5), - to(#d3d4d5) - ); -} - .btn { cursor: pointer; min-height: 26px; @@ -786,10 +523,6 @@ article .approved:active { border-radius: 2px; } -.buttons .btn { - height: 33px; -} - .outersource .copy { display: none; margin-top: 14px; @@ -819,7 +552,7 @@ article .approved:active { .outersource .copy p { visibility: hidden; font-size: 11px; - color: #666; + color: colors.$grey700; margin-top: 46px; margin-left: -4px; } @@ -831,7 +564,7 @@ article .approved:active { article { //margin: 0px auto 100px auto; -moz-border-radius: 2px; - -moz-box-shadow: 0 1px 3px #ccc; + -moz-box-shadow: 0 1px 3px colors.$grey200; position: relative; width: 100%; float: left; @@ -913,9 +646,9 @@ section .body > .text { } body #file section:not(.editor) { - background: colors.$grey3; + background: colors.$grey150; cursor: pointer; - border: 1px solid colors.$grey2; + border: 1px solid colors.$grey300; .body { height: 100%; } @@ -931,7 +664,7 @@ body #file section:not(.editor) { -webkit-box-shadow: none; box-shadow: none; padding: 5px 0 19px 0; - color: #000; + color: colors.$black; } .cl { @@ -943,10 +676,10 @@ body #file section:not(.editor) { //background: #fff; float: left; position: relative; - color: #666; + color: colors.$grey700; -webkit-transition: all 100ms ease-in; transition: all 100ms ease-in; - //border-bottom: 1px solid $grey2; + //border-bottom: 1px solid $grey300; } ul.suggestion-item.graysmall:last-child { @@ -977,15 +710,15 @@ ul.suggestion-item.graysmall:last-child { .segment-footer-tab-more-button { margin-left: auto; margin-right: auto; - background-color: colors.$grey4 !important; - color: colors.$grey6 !important; + background-color: colors.$grey100 !important; + color: colors.$grey700 !important; gap: 0; padding-right: 16px !important; border-bottom-right-radius: 0; border-bottom-left-radius: 0; &:hover { - background-color: colors.$grey9 !important; + background-color: colors.$grey75 !important; } &.segment-footer-tab-more-button-extended-mode { @@ -1000,204 +733,6 @@ ul.suggestion-item.graysmall:last-child { } } -/*submenu*/ -.submenu { - background: #fff; - text-align: left; - width: 100%; -} - -.submenu:after { - content: '.'; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -section.loaded .submenu { - display: block; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - overflow: hidden; - - &:has(.active) { - border-bottom-left-radius: unset; - border-bottom-right-radius: unset; - } -} - -.loaded { - overflow: visible !important; -} - -.submenu li { - float: left; - position: relative; - width: auto !important; - background: colors.$grey4; - z-index: 1; - border-bottom: 1px solid colors.$grey3; - cursor: pointer; - user-select: none; -} - -.submenu li.active { - border-bottom: 1px solid white; - background-color: colors.$white; -} - -.submenu a { - -webkit-transition: all 100ms ease-in; - -moz-transition: all 100ms ease-in; - padding: 5px 20px; - display: block; - color: colors.$grey1; - font-size: 16px; - float: left; - text-decoration: none; - border-right: 2px solid colors.$grey3; - border-top: 2px solid colors.$grey3; -} - -.submenu .notification:hover { - border: 0; -} - -.submenu a:hover { - background: #f5f5f5; - color: colors.$grey1; - -moz-box-shadow: none; - //position: relative; - -webkit-box-shadow: none; -} - -.submenu .on { - background: #fff; - color: #000; - font-size: 14px; - text-shadow: none; -} - -.tab-switcher.loading-tab a { - color: #929292; - padding-right: 36px; -} - -.loading-tab .loader.loader_on { - left: unset; - right: 12px; - top: 6px; -} - -.submenu li a { - outline: none; - display: flex; - align-items: center; - - .number { - margin-left: 4px; - } - - .icon-close { - display: block; - height: 15px; - color: colors.$grey1; - } -} - -.submenu li.active a { - //background: #fff !important; - outline: none; - color: #000; -} - -.submenu li.modified a { - color: red; -} - -.sub-editor { - display: none; - float: left; - width: 100%; - background: #ffffff; -} - -.sub-editor.open { - display: block; -} - -.sub-editor.matches .overflow { - min-height: 50px; - max-height: 424px; - overflow-y: auto; -} -.sub-editor.matches .overflow span.loader { - bottom: 20px; -} - -.addtmx-tr .open-popup-addtm-tr { - height: 13px; - width: 140px; - position: absolute; - bottom: -24px; - right: 0px; - border-radius: 0 0 0 2px; - color: #fff; - padding: 3px 10px 7px 4px; - font-size: 12px; - background: colors.$translatedBlue; - box-shadow: 0px 2px 4px 0px #868686; - z-index: 2; -} - -.sub-editor.concordances .results { - float: left; - width: 100%; -} - -.concordances .more { - display: inline-block; - text-decoration: none; - color: #fff; - padding: 0 10px; - background: #999; - font-size: 14px; - border-top-left-radius: 6px; - border-top-right-radius: 6px; - min-width: 40px; - line-height: 20px; - position: relative; - top: 2px; - cursor: pointer; -} - -.sub-editor .cc-search { - background: none; - clear: both; -} - -.sub-editor .cc-search.loading { - background: url(/public/img/loading.gif) 50% 22px no-repeat; - float: left; - width: 100%; - background-size: 20px 20px; -} - -.sub-editor .cc-search.loading { - background-position-x: 49.8%; -} - -.footer-message { - margin-left: 20px; - background: #ffde33 !important; - padding: 2px 10px; -} - -.sub-editor .cc-search .search-target { - width: 44.2%; -} - .preview { font-family: Cambria, Arial, Helvetica, sans-serif !important; height: 300px; @@ -1206,12 +741,12 @@ section.loaded .submenu { .filter { width: 24px; height: 24px; - box-shadow: 0px 0px 1px #aeaeae; + box-shadow: 0px 0px 1px colors.$grey400; display: block; float: right; margin: -5px 10px -2px 0; - border-left: 1px solid #333; - border-right: 1px solid #333; + border-left: 1px solid colors.$grey1300; + border-right: 1px solid colors.$grey1300; -webkit-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; position: relative; @@ -1219,7 +754,7 @@ section.loaded .submenu { } .search-display .found .warning { - color: #e60000; + color: colors.$red500; } .search .loader { @@ -1233,11 +768,11 @@ section.loaded .submenu { .filtering .filter, .filtering .filter:hover { - background-color: #434345; + background-color: colors.$grey1300; } .filter:hover { - background-color: #636567; + background-color: colors.$grey700; } .checkbox { @@ -1251,7 +786,7 @@ section.loaded .submenu { margin: 4px 10px 3px 0; padding: 2px 20px; height: 28px; - background: #dcdedf; + background: colors.$grey200; cursor: pointer; font-size: 14px; width: 120px; @@ -1267,10 +802,10 @@ section.loaded .submenu { .editor, .editor .text { - background: #fff; + background: colors.$white; } -.loader:not(.ui) { +.loader { width: 20px; height: 20px; background: url(/public/img/loading.gif) 0 0 no-repeat !important; @@ -1318,26 +853,26 @@ section.editor .loader_on { font-size: 15px; margin-top: 3px; border-radius: 20px; - background: #fff; - color: #aeaeae; + background: colors.$white; + color: colors.$grey400; } .close:hover { background: red; - color: #fff; + color: colors.$white; text-align: center; } section .header .context { display: none; float: left; - color: colors.$grey1; + color: colors.$grey500; text-decoration: none; margin: 3px 0 0 10px; } section .header .context:hover { - color: #000; + color: colors.$black; } .percentuage.visible { @@ -1345,21 +880,21 @@ section .header .context:hover { } .qa { - background: #ffcc00; - -moz-box-shadow: 0 1px 3px colors.$grey2; - -webkit-box-shadow: 0 1px 3px colors.$grey2; + background: colors.$orange200; + -moz-box-shadow: 0 1px 3px colors.$grey300; + -webkit-box-shadow: 0 1px 3px colors.$grey300; padding: 0 2px; } section .text .warning { - background: #ffcc00; + background: colors.$orange200; padding: 2px 7px; text-align: center; - border: 1px solid #333; + border: 1px solid colors.$grey1300; -moz-border-radius: 2px; border-radius: 2px; - -moz-box-shadow: 0 1px 3px colors.$grey2; - -webkit-box-shadow: 0 1px 3px colors.$grey2; + -moz-box-shadow: 0 1px 3px colors.$grey300; + -webkit-box-shadow: 0 1px 3px colors.$grey300; display: block; position: absolute; bottom: -30px; @@ -1416,7 +951,7 @@ section.opened { padding: 0; } .revise-lock-editArea-active { - background-color: colors.$grey4; + background-color: colors.$grey100; } } } @@ -1428,7 +963,7 @@ section.opened { resize: none; margin: 2px 0 0px -11px; padding: 5px; - color: #4d4d4f; + color: colors.$grey700; border: 1px solid transparent; -moz-border-radius: 2px; border-radius: 2px; @@ -1442,44 +977,11 @@ section.readonly { section.ice-locked:not(.segment-selected) .text { cursor: no-drop !important; - background-color: #f2f4f7 !important; + background-color: colors.$grey50 !important; } body section:not(.editor).ice-locked { - background: #dde0e4 !important; -} - -.ice-locked-icon > button { - padding: 4px; - font-size: 15px; - background-color: transparent; - border: 1px solid transparent; - border-radius: 2px; - cursor: pointer; - color: #aaa; - position: relative; - margin-bottom: 5px; - top: 2px; - outline: none; -} -button.icon-lock.unlock-button.locked:before { - position: relative; - left: 3px; -} - -button.unlock-button.unlocked.icon-unlocked3:before { - left: 2px; - position: relative; -} - -section:hover .ice-locked-icon > button { - color: #6d6e71; -} - -.ice-locked-icon > button:hover { - background-color: #9e9e9e; - border: 1px solid #5f5f5f; - color: white !important; + background: colors.$grey150 !important; } body.archived section { @@ -1489,8 +991,8 @@ body.archived section { section.readonly, body.archived section { - background: #f2f4f7; - color: #a4a6a9; + background: colors.$grey50; + color: colors.$grey400; cursor: not-allowed !important; } section.readonly .status-container a.status:hover, @@ -1505,18 +1007,18 @@ body.archived section .status-container a.status:hover { word-break: normal; line-height: 25px; outline: none; - color: #000; - border: 1px solid #dedede; - box-shadow: inset 0 1px 2px colors.$grey2; - -webkit-box-shadow: inset 0 1px 2px colors.$grey2; + color: colors.$black; + border: 1px solid colors.$grey200; + box-shadow: inset 0 1px 2px colors.$grey300; + -webkit-box-shadow: inset 0 1px 2px colors.$grey300; /*font-variant-ligatures: none;*/ cursor: text; } .editarea:focus { - border: 1px solid #96c8da; - box-shadow: inset 0px 0px 2px 2px #96c8da; - outline-color: #96c8da; + border: 1px solid colors.$grey300; + box-shadow: inset 0px 0px 2px 2px colors.$grey300; + outline-color: colors.$grey300; } .source { @@ -1573,11 +1075,6 @@ body.archived section .status-container a.status:hover { padding-left: 26px !important; } -.buttons { - position: relative; - top: 0px; -} - /*tab rows */ .graysmall li { width: 48%; @@ -1585,7 +1082,7 @@ body.archived section .status-container a.status:hover { margin: 2px 1px 0px 0; padding: 12px 20px 12px 34px; text-align: left; - color: #666; + color: colors.$grey700; list-style: none; font-size: 14px; line-height: 16px; @@ -1646,7 +1143,7 @@ body.archived section .status-container a.status:hover { margin-left: 30px; width: 60%; padding: 3px 0; - border-top: 1px dotted colors.$grey2; + border-top: 1px dotted colors.$grey300; font-style: italic; overflow: hidden; } @@ -1663,7 +1160,6 @@ body.archived section .status-container a.status:hover { } .message li { - background: url(/public/img/bad.png) 22px center no-repeat; padding-left: 40px !important; background-size: 12px 12px; } @@ -1674,12 +1170,12 @@ body.archived section .status-container a.status:hover { .trash:hover { margin-top: -2px; - color: #000; + color: colors.$black; } .trash { transition: all 0.1s linear; - color: colors.$grey1; + color: colors.$grey500; text-decoration: none; -o-transition: all 0.1s linear; -webkit-transition: all 0.1s linear; @@ -1698,7 +1194,7 @@ body.archived section .status-container a.status:hover { position: absolute; font-size: 10px; display: none; - color: #999999; + color: colors.$grey400; } .graysmall:hover .graysmall-message { @@ -1709,7 +1205,7 @@ body.archived section .status-container a.status:hover { display: none; position: absolute; bottom: 0px; - color: colors.$grey1; + color: colors.$grey500; width: 100%; float: left; margin: 0; @@ -1750,7 +1246,7 @@ body.archived section .status-container a.status:hover { } .graysmall:hover { - background: colors.$grey5; + background: colors.$grey50; cursor: default; .tag { opacity: 1; @@ -1758,7 +1254,7 @@ body.archived section .status-container a.status:hover { } .message:hover { - background: #fbfbfb !important; + background: colors.$white !important; cursor: auto; } @@ -1767,7 +1263,7 @@ body.archived section .status-container a.status:hover { } .error-img { - background: #c5351c url(/public/img/warning.png) no-repeat center; + background: colors.$red600 url(/public/img/warning.png) no-repeat center; background-size: 17px; width: 22px; height: 22px; @@ -1780,7 +1276,7 @@ body.archived section .status-container a.status:hover { } .warning-img { - background: #ff9900 url(/public/img/warning.png) no-repeat center; + background: colors.$orange600 url(/public/img/warning.png) no-repeat center; background-size: 17px; width: 22px; height: 22px; @@ -1803,7 +1299,7 @@ body.archived section .status-container a.status:hover { } .engine-error-item.graysmall:hover { - background-color: #fff; + background-color: colors.$white; border-top: unset; } @@ -1823,7 +1319,7 @@ body.archived section .status-container a.status:hover { position: absolute; right: 0; height: 100%; - background: colors.$grey2; + background: colors.$grey300; top: 0; border-bottom: 0; z-index: 0; @@ -1850,20 +1346,20 @@ body.archived section .status-container a.status:hover { } section.status-translated .status { - background-color: colors.$translatedBlue !important; + background-color: colors.$blue500 !important; } section.status-approved .status { - background-color: colors.$approvedGreen !important; + background-color: colors.$green800 !important; } section.status-approved2 .status { - background-color: colors.$approved2Green !important; + background-color: colors.$purple500 !important; } /* section.status-draft .status{background-color:#dddedf !important;} */ section.status-rejected .status { - background-color: colors.$rebuttedRed !important; + background-color: colors.$orange600 !important; } .message-offline-icons { @@ -1873,7 +1369,7 @@ section.status-rejected .status { } section.editor.status-rejected .status { - background-color: colors.$rebuttedRed !important; + background-color: colors.$orange600 !important; } section.modified .status { @@ -1907,42 +1403,42 @@ section.opened.editor .status { } .per-orange { - background: colors.$rebuttedRed !important; - color: #fff !important; + background: colors.$orange600 !important; + color: colors.$white !important; } .per-blue { - background: colors.$translatedBlue !important; - color: #fff !important; + background: colors.$blue500 !important; + color: colors.$white !important; } .per-green { - background: colors.$approvedGreen !important; - color: #fff !important; + background: colors.$green800 !important; + color: colors.$white !important; } .per-yellow { - background: colors.$orangeDefault !important; - color: #333 !important; + background: colors.$orange200 !important; + color: colors.$grey1300 !important; } .per-red { - background: colors.$redDefault !important; - color: #fff !important; + background: colors.$red500 !important; + color: colors.$white !important; } .per-gray { - background: colors.$grey3 !important; - color: #333 !important; + background: colors.$grey150 !important; + color: colors.$grey1300 !important; } .per-red-outline { margin-left: 5px !important; background-color: transparent !important; - color: colors.$redDefault !important; - box-shadow: inset 0px 0px 0px 1px colors.$redDefault; - -moz-box-shadow: inset 0px 0px 0px 1px colors.$redDefault; - -webkit-box-shadow: inset 0px 0px 0px 1px colors.$redDefault; + color: colors.$red500 !important; + box-shadow: inset 0px 0px 0px 1px colors.$red500; + -moz-box-shadow: inset 0px 0px 0px 1px colors.$red500; + -webkit-box-shadow: inset 0px 0px 0px 1px colors.$red500; } .graysmall-details .per-yellow, @@ -1987,7 +1483,6 @@ section.opened.editor .status { } @media screen and (max-width: 1380px) { - /*.buttons{margin:-15px 43px 0 0 !important;}*/ .graysmall li { width: 45.5%; } @@ -2073,13 +1568,6 @@ section.opened.editor .status { /* word-break: break-all */ } - .translated, - .draft, - .approved, - .guesstags { - padding: 8px 6px; - } - .meter { width: 10%; } @@ -2096,10 +1584,6 @@ section.opened.editor .status { width: 43%; } - #notifbox { - width: 45px; - } - .text .source.item, .text .target.item, .white li, @@ -2139,16 +1623,6 @@ section.opened.editor .status { } } -@media screen and (max-width: 1100px) { - #notifbox { - width: 45px; - } - - .cattool #quality-report { - padding: 0 !important; - } -} - /*RTL language*/ .editarea.rtl, .source.rtl, @@ -2170,7 +1644,7 @@ section.ice-locked.rtl-target .target { text-align: right; } -body.archived ul.buttons, +body.archived .buttons, body.archived .footer { display: none !important; } @@ -2181,11 +1655,11 @@ p.percent { } ins.diff { - background: #c3ffc3; + background: colors.$green200; } del.diff { - background: #ffcfcf; + background: colors.$red100; } .editToolbar { @@ -2199,42 +1673,6 @@ del.diff { visibility: visible; } -.split { - border: 1px solid #5f5f5f; - cursor: pointer !important; - font-size: 17px; - background-color: #9e9e9e; - border-radius: 2px; - color: #ffffff; - margin-bottom: 0px; - top: 2px; - padding: 0; - width: 25px; - height: 25px; - outline: none; - margin-top: 10px; -} - -.split i { - padding: 0; - margin: 0; - width: 25px; - height: 25px; -} - -.split .icon-split:before { - position: relative; - top: 3px; -} - -.sid .actions.disabled .split { - cursor: no-drop !important; -} - -.editor.split-action .actions .split { - background: colors.$translatedBlue; -} - section .toolbar { display: none; margin-left: -10px; @@ -2306,7 +1744,7 @@ section.editor .toolbar { left: 0; width: 100%; height: 100%; - z-index: 99999999999999; + z-index: var(--z-overlay); } .reConnection { @@ -2321,7 +1759,7 @@ section.editor .toolbar { left: 0; width: 100%; height: 100%; - z-index: 99999999999999; + z-index: var(--z-overlay); } @keyframes fadeout { @@ -2394,12 +1832,12 @@ section.editor .toolbar { .addtmx-tr.white-tx .open-popup-addtm-tr { width: 130px; - color: #333; - background: #fff; + color: colors.$grey1300; + background: colors.$white; } .addtmx-tr.white-tx .open-popup-addtm-tr:hover { - background: #ededed; + background: colors.$grey100; } .open-popup-addtm-tr { @@ -2413,22 +1851,22 @@ section.editor .toolbar { } .addtmx-tr:active { - -moz-box-shadow: inset 0 0 1px 1px #888; - -webkit-box-shadow: inset 0 0 1px 1px #888; - box-shadow: inset 0 0 1px 1px #888; + -moz-box-shadow: inset 0 0 1px 1px colors.$grey400; + -webkit-box-shadow: inset 0 0 1px 1px colors.$grey400; + box-shadow: inset 0 0 1px 1px colors.$grey400; } .alternatives .deleted, .suggestion_source .deleted, .suggestion_source del { - background: #ffc7ca; + background: colors.$red100; text-decoration: line-through; } .alternatives .added, .suggestion_source .added, .suggestion_source ins { - background: #b0ffb3; + background: colors.$green300; text-decoration: none; } @@ -2443,15 +1881,15 @@ section.editor .toolbar { width: 100%; padding: 3px 0px 5px 3px; margin: 7px 1.7%; - background: #efefef; + background: colors.$grey75; font-size: 18px; min-height: 70px; outline: 0; text-align: left; border-radius: 2px; line-height: 27px; - color: #000; - border: 1px solid #727272; + color: colors.$black; + border: 1px solid colors.$grey600; word-break: normal !important; cursor: col-resize; float: left; @@ -2460,7 +1898,7 @@ section.editor .toolbar { margin-right: 4px; width: 108px; float: left; - color: #333; + color: colors.$grey1300; } } @@ -2468,6 +1906,13 @@ section.editor .toolbar { width: 100% !important; } +.splitBar { + display: flex; + justify-content: end; + gap: 15px; + align-items: center; +} + .splitBar p, .splitBar .splitNum { float: left; @@ -2480,8 +1925,8 @@ section.editor .toolbar { } .splitBar .buttons { - gap: 16px; - margin-left: 16px; + display: flex; + gap: 10px; } .splitBar .buttons a { @@ -2490,14 +1935,14 @@ section.editor .toolbar { } .splitBar .btn-ok:hover { - background: #12b4df; + background: colors.$blue200; } .splitpoint { display: inline-block; width: 8px; height: 26px; - color: #767676; + color: colors.$grey600; cursor: pointer; width: 19px; margin: 0px 5px; @@ -2521,25 +1966,25 @@ section .footer .tab.open { display: block; z-index: 0; position: relative; - border-top: 1px solid colors.$grey3; + border-top: 1px solid colors.$grey150; top: -1px; min-height: 40px; background-color: colors.$white; } section .segment-side-buttons { - color: colors.$grey1; + color: colors.$grey500; } .grey-button { - color: #333; - background: #f6f6f6; + color: colors.$grey1300; + background: colors.$grey50; background: -webkit-gradient( linear, left top, left bottom, - from(#f6f6f6), - to(#e2e3e5) + from(colors.$grey50), + to(colors.$grey100) ); } @@ -2549,12 +1994,7 @@ section .segment-side-buttons { top: 4px; right: 6px; font-size: 0.8rem; - color: #999; -} - -.ui.user.label { - margin-right: 13px; - /*top: 5px;*/ + color: colors.$grey400; } /*Editor Toggle*/ @@ -2565,364 +2005,6 @@ section .segment-side-buttons { position: relative; } -.buttons li { - text-align: center; - vertical-align: -webkit-baseline-middle; - display: inline-block; - position: relative; - margin-left: 16px; -} - -/* Header/Footer Restyling */ - -$icon-scale: 30px; - -/* Default */ - -header { - .wrapper { - grid-template-columns: - 208px minmax(0, 48px) minmax(200px, max-content) - auto max-content; /*208px minmax(0,48px) minmax(200px, max-content) auto 120px;*/ - align-items: center; - - .popover-component-container { - margin-left: 15px; - } - } - - .logo-menu { - display: grid; - align-items: center; - - .logo { - margin: 0; - background: url(/public/img/logo_matecat_big_white.svg) 0 0 no-repeat; - width: 190px; - height: 40px; - top: 1px; - left: 6px; - } - } - - .header-menu { - display: grid; - /*grid-template-columns: repeat(9, auto);*/ - grid-auto-flow: column; - grid-template-rows: $icon-scale; - align-items: center; - justify-content: right; - column-gap: 15px; - z-index: 4; - - #previewDropdown[data-download='false'] li.downloadTranslation, - #previewDropdown[data-download='true'] li.previewLink { - display: none; - } - - .draft:hover { - background: transparent; - } - - .action-submenu, - #quality-report { - position: relative; - display: grid; - align-items: center; - grid-template-columns: $icon-scale; - grid-template-rows: $icon-scale; - opacity: 0.8; - - background-repeat: no-repeat; - background-position: center; - margin: 0; - border-radius: 2px; - cursor: pointer; - &.disabled { - opacity: 0.4 !important; - cursor: default !important; - &:hover { - opacity: 0.4 !important; - } - a { - display: none !important; - } - } - &:hover, - &.active { - opacity: 1; - .menu { - visibility: visible; - } - } - - /* Bug fix for Semantic UI Dropdown hover */ - &:hover .dropdown-menu-overlay { - width: 30px; - height: 80px; - } - - .feedback-alert { - position: absolute; - margin: 0; - top: -8px; - padding: 0px 8px; - right: -12px; - background: colors.$orangeDefault; - color: #fff; - font-size: 10px; - text-align: center; - border-radius: 25px; - vertical-align: middle; - line-height: 16px; - height: 17px; - } - - .menu { - position: absolute; - z-index: 1; - width: 200px !important; - left: -85px !important; - margin: 0 0 0 -1px; - background: white; - padding: 12px 8px; - top: 50px !important; - font-size: 16px; - border-radius: 2px; - border: solid 1px #cdd4de; - visibility: hidden; - .item { - padding: 0 !important; - border-radius: 3px; - a, - > span { - display: block; - border-radius: 2px; - padding: 8px !important; - font-size: 16px; - color: #000000; - text-decoration: none; - &:not(.disabled):hover { - background-color: colors.$grey3; - color: colors.$translatedBlue; - } - &.selected { - background-color: transparent !important; - font-weight: normal !important; - } - } - - > span { - display: block; - width: 100%; - } - .disabled { - > span { - color: lightgray; - } - } - } - - .active.item { - background-color: transparent !important; - font-weight: normal !important; - } - } - - .badge { - position: absolute; - margin: 0; - top: 0; - padding: 1px 6px; - right: -4px; - /*background: #e02020;*/ - background: #0bbeec; - color: #fff; - font-size: 10px; - text-align: center; - border-radius: 25px; - vertical-align: middle; - line-height: 16px; - height: 17px; - } - } - #action-download { - background-image: url('/public/img/icons/icon-download.svg'); - background-size: 30px; - &.job-completed { - background-image: url('/public/img/icons/icon-download-complete.svg'); - } - } - #action-QR, - #quality-report-button { - /*background-image: url("../../img/icons/icon-QR-line.svg");*/ - #quality-report { - display: grid; - background: transparent; - border: none !important; - opacity: unset; - } - #quality-report svg { - position: absolute; - } - } - - #quality-report-button { - #quality-report { - svg { - .st0 { - fill: none; - stroke: #fafafa; - } - - .st2 { - fill: #ffffff; - } - } - } - - &[data-revised='true'] { - #quality-report { - &[data-vote='excellent'], - &[data-vote='good'], - &[data-vote='verygood'] { - svg { - .st0 { - fill: #5eb304; - stroke: #5eb304; - } - } - } - &[data-vote='poor'] { - svg { - .st0 { - fill: #ffa935; - stroke: #ffa935; - } - } - } - &[data-vote='acceptable'] { - svg { - .st0 { - fill: #eaba22; - stroke: #eaba22; - } - } - } - - &[data-vote='fail'] { - svg { - .st0 { - fill: #e02020; - stroke: #e02020; - } - } - } - } - } - } - - #notifbox { - width: $icon-scale; - height: $icon-scale; - padding: 0 !important; - text-align: right; - opacity: 0.8; - &:hover { - opacity: 1; - } - a { - position: absolute; - } - } - - #action-comments, - #mbc-history { - width: $icon-scale !important; - height: $icon-scale; - padding: 0 !important; - background-position: center; - - svg { - opacity: 0.8; - &:hover { - opacity: 1; - } - } - &.open svg { - opacity: 1; - } - - .badge { - position: absolute; - margin: 0; - top: 0; - padding: 1px 6px; - right: -4px; - /*background: #e02020;*/ - background: #0bbeec; - color: #fff; - font-size: 10px; - text-align: center; - border-radius: 25px; - vertical-align: middle; - line-height: 16px; - height: 17px; - } - - .mbc-history-balloon-outer { - background: #fff; - margin-top: 5px; - border-radius: 3px; - right: -136px; - z-index: 2; - .mbc-triangle-top { - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid #ffffff; - bottom: 100%; - left: 50%; - right: auto; - transform: translate(-90%, 0) !important; - position: absolute; - pointer-events: none; - } - - .mbc-thread-wrap-active { - border: none; - } - } - .mbc-history-balloon { - background: #fff; - border-radius: 3px; - } - .mbc-thread-wrap { - border-top: none; - } - } - #action-search { - svg { - circle { - fill: #fff; - } - - .st1 { - fill: #002b5c; - } - } - } - #action-filter { - &.active, - &.open { - opacity: 1; - #filter { - fill: #fff; - } - } - } - } -} - .optionsToolbar { margin-top: 16px; display: flex; diff --git a/public/css/sass/tokens/_colors.scss b/public/css/sass/tokens/_colors.scss new file mode 100644 index 0000000000..674dece371 --- /dev/null +++ b/public/css/sass/tokens/_colors.scss @@ -0,0 +1,225 @@ +// ============================================================================ +// Design Tokens — Colors +// ============================================================================ +// Canonical color token layer using CSS Custom Properties. +// SCSS variable aliases are provided below for backward compatibility. +// +// Three-layer model: +// 1. Primitive palette (raw values, no semantic meaning) +// 2. Semantic aliases (meaning over value) +// 3. Component-level tokens (defined in component files, not here) +// +// Usage in new code: color: var(--color-approved); +// Usage in legacy: color: colors.$approvedGreen; (still works unchanged) +// ============================================================================ + +// --- 1. Primitive Palette --------------------------------------------------- + +:root { + // White / Black + --color-white: #fff; + --color-black: #000; + --color-black-100: rgba(26, 26, 41, 0.07); + + // Grey scale (lightest → darkest) + --color-grey-50: #f5f6f7; + --color-grey-75: #f3f3f3; + --color-grey-100: #eaebee; + --color-grey-150: #d9e0e8; + --color-grey-200: #d7d8db; + --color-grey-300: #aebdcd; + --color-grey-400: #9e9e9e; + --color-grey-500: #788190; + --color-grey-600: #6f6f6f; + --color-grey-700: #666666; + --color-grey-800: #84848c; + --color-grey-1300: #29292d; + + // Orange scale (lightest → darkest) + --color-orange-50: #fffed8; + --color-orange-100: #fee47a; + --color-orange-200: #ffcc01; + --color-orange-300: #ebbf47; + --color-orange-400: #efbf00; + --color-orange-500: #ffaa8e; + --color-orange-600: #ff8734; + --color-orange-700: #f2711c; + --color-orange-800: #df681a; + --color-orange-900: #e9511f; + + // Red scale (lightest → darkest) + --color-red-100: #ffc8ca; + --color-red-400: #ef4740; + --color-red-500: #e02020; + --color-red-600: #d31d1d; + + // Blue scale (lightest → darkest) + --color-blue-50: #e4f2fb; + --color-blue-200: #63c3e3; + --color-blue-300: #86aacd; + --color-blue-400: #2a8cfc; + --color-blue-500: #0099cc; + --color-blue-600: #0889b3; + --color-blue-700: #4184c4; + --color-blue-800: #3174b4; + --color-blue-900: #002b5a; + --color-blue-950: #00254f; + + // Purple scale (lightest → darkest) + --color-purple-200: #b58dd2; + --color-purple-500: #9352c1; + --color-purple-1000: #7e22ce; + + // Green scale (lightest → darkest) + --color-green-50: #d1e0d1; + --color-green-200: #80d5af; + --color-green-300: #7cc576; + --color-green-400: #4ade80; + --color-green-500: #1fbd1f; + --color-green-600: #1c9f64; + --color-green-700: #1ba61b; + --color-green-800: #22c55e; + --color-green-1000: #15803d; + + // --- 2. Semantic Aliases -------------------------------------------------- + + // Translation status + --color-translated: var(--color-blue-500); + --color-translated-hover: var(--color-blue-600); + --color-translated-transparent: var(--color-blue-200); + --color-translated-bg: var(--color-blue-50); + + --color-approved: var(--color-green-800); + --color-approved-hover: var(--color-green-600); + --color-approved-transparent: var(--color-green-200); + --color-approved-bg: var(--color-green-50); + + --color-approved2: var(--color-purple-500); + --color-approved2-hover: var(--color-purple-1000); + --color-approved2-transparent: var(--color-purple-200); + + --color-rejected: var(--color-red-500); + --color-rejected-hover: var(--color-red-600); + --color-rejected-transparent: var(--color-red-100); + + --color-rebutted: var(--color-orange-600); + --color-rebutted-transparent: var(--color-orange-500); + + --color-warning: var(--color-orange-700); + --color-warning-hover: var(--color-orange-800); + + // Links + --color-link: var(--color-blue-700); + --color-link-hover: var(--color-blue-800); + --color-link-transparent: var(--color-blue-300); + + // Dark / brand + --color-dark: var(--color-blue-900); + --color-dark-hover: var(--color-blue-950); + + // Neutral defaults + --color-green-default: var(--color-green-500); + --color-green-default-hover: var(--color-green-700); + --color-green-default-transparent: var(--color-green-300); +} + +// --- SCSS Variable Aliases (backward compatibility) ------------------------- +// Existing code using `colors.$approvedGreen` continues to compile unchanged. +// These map 1:1 to the legacy _colors.scss variables. + +$white: white; + +$black: #000; +$black100: rgba(#1a1a29, 0.07); + +// Grey scale +$grey50: #f5f6f7; +$grey75: #f3f3f3; +$grey100: #eaebee; +$grey150: #d9e0e8; +$grey200: #d7d8db; +$grey300: #aebdcd; +$grey400: #9e9e9e; +$grey500: #788190; +$grey600: #6f6f6f; +$grey700: #666666; +$grey800: #84848c; +$grey1300: #29292d; + +// Orange scale +$orange50: #fffed8; +$orange100: #fee47a; +$orange200: #ffcc01; +$orange300: #ebbf47; +$orange400: #efbf00; +$orange500: #ffaa8e; +$orange600: #ff8734; +$orange700: #f2711c; +$orange800: #df681a; +$orange900: #e9511f; + +// Red scale +$red100: #ffc8ca; +$red400: #ef4740; +$red500: #e02020; +$red600: #d31d1d; + +// Blue scale +$blue50: #e4f2fb; +$blue200: #63c3e3; +$blue300: #86aacd; +$blue400: #2a8cfc; +$blue500: #0099cc; +$blue600: #0889b3; +$blue700: #4184c4; +$blue800: #3174b4; +$blue900: #002b5a; +$blue950: #00254f; + +// Purple scale +$purple200: #b58dd2; +$purple500: #9352c1; +$purple1000: #7e22ce; + +// Green scale +$green50: #d1e0d1; +$green200: #80d5af; +$green300: #7cc576; +$green400: #4ade80; +$green500: #1fbd1f; +$green600: #1c9f64; +$green700: #1ba61b; +$green800: #22c55e; +$green1000: #15803d; + +// Semantic aliases (legacy variable names) +$transparentBlue: $blue50; +$translatedBlueTransparent: $blue200; +$linkBlueTransparent: $blue300; +$translatedBlue: $blue500; +$translatedBlueHover: $blue600; +$linkBlue: $blue700; +$linkBlueHover: $blue800; +$darkBlue: $blue900; +$darkBlueHover: $blue950; + +$greenDefaultTransparent2: $green50; +$approvedGreenTransparent: $green200; +$greenDefaultTransparent: $green300; +$approvedGreen: $green800; +$greenDefault: $green500; +$approvedGreenHover: $green600; +$greenDefaultHover: $green700; + +$approved2GreenTransparent: $purple200; +$approved2Green: $purple500; +$approved2GreenHover: $purple1000; + +$warning: $orange700; +$warningHover: $orange800; +$rebuttedRedTransparent: $orange500; +$rebuttedRed: $orange600; + +$redDefaultTransparent: $red100; +$redDefault: $red500; +$redDefaultHover: $red600; diff --git a/public/css/sass/tokens/_spacing.scss b/public/css/sass/tokens/_spacing.scss new file mode 100644 index 0000000000..85db4591d7 --- /dev/null +++ b/public/css/sass/tokens/_spacing.scss @@ -0,0 +1,34 @@ +// ============================================================================ +// Design Tokens — Spacing +// ============================================================================ +// Consistent spacing scale using CSS Custom Properties. +// Based on a 4px base unit. +// +// Usage in new code: padding: var(--space-4); +// Usage in legacy: padding: $space-4; +// ============================================================================ + +:root { + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-10: 40px; + --space-12: 48px; + --space-16: 64px; +} + +// SCSS aliases +$space-1: 4px; +$space-2: 8px; +$space-3: 12px; +$space-4: 16px; +$space-5: 20px; +$space-6: 24px; +$space-8: 32px; +$space-10: 40px; +$space-12: 48px; +$space-16: 64px; diff --git a/public/css/sass/tokens/_z-index.scss b/public/css/sass/tokens/_z-index.scss new file mode 100644 index 0000000000..cccb195c72 --- /dev/null +++ b/public/css/sass/tokens/_z-index.scss @@ -0,0 +1,30 @@ +// ============================================================================ +// Design Tokens — Z-Index +// ============================================================================ +// Named stacking context scale. Use ONLY these values in new code. +// Raw z-index numbers are banned — use var(--z-*) or the SCSS $z-* aliases. +// +// Scale rationale: +// - 7 tiers cover all UI needs without collisions +// - Gaps between tiers allow inserting sub-layers if needed +// - Maximum value is 60 — browsers handle this fine, no need for millions +// ============================================================================ + +:root { + --z-content: 1; + --z-dropdown: 10; + --z-sticky: 20; + --z-overlay: 30; + --z-modal: 40; + --z-toast: 50; + --z-tooltip: 60; +} + +// SCSS aliases for use in legacy code +$z-content: 1; +$z-dropdown: 10; +$z-sticky: 20; +$z-overlay: 30; +$z-modal: 40; +$z-toast: 50; +$z-tooltip: 60; diff --git a/public/css/sass/upload-page.scss b/public/css/sass/upload-page.scss index 62cfcd94c3..f59876485c 100644 --- a/public/css/sass/upload-page.scss +++ b/public/css/sass/upload-page.scss @@ -1,4 +1,5 @@ -@use "commons/colors"; +@use 'tokens/colors'; +@use 'commons/variables'; body { margin: 0; @@ -8,7 +9,6 @@ body { min-height: 100%; } - .translate-box a.tooltip { text-align: center; text-decoration: none !important; @@ -20,11 +20,11 @@ body { .translate-box a.tooltip.gray span, .translate-box a.tooltip.gray { - background: #eee; + background: colors.$grey75; } .translate-box a.tooltip.gray span:after { - border-top: 10px solid #eee; + border-top: 10px solid colors.$grey75; } .translate-box a.tooltip:hover span { @@ -114,10 +114,11 @@ body { } } .translate-box { - float: left; margin: 20px 0 0 0; position: relative; - display: block; + display: flex; + flex-direction: column; + gap: 8px; } .translate-box { @@ -128,18 +129,16 @@ body { .translate-box { h2, .select-with-label__wrapper label { - color: colors.$grey1; - font-size: 18px; + color: colors.$grey1300; + font-size: 16px; font-weight: normal; } .select-with-label__wrapper { + gap: 8px; .select { - font-size: 16px; padding: 9px 46px 9px 12px; - border-radius: 2px; border: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: inset 0 1px 3px #ddd; &:hover { border-color: rgba(34, 36, 38, 0.35); @@ -149,82 +148,83 @@ body { .select--is-focused, .select--is-focused:hover { - border: solid 1px #96c8da; + border: solid 1px colors.$grey300; border-bottom: unset; } .select--is-disabled { - background-color: #f3f3f3; + background-color: colors.$grey75; } .custom-dropdown { margin-top: 0; padding-top: 12px; border-radius: unset; - background-color: white; + background-color: colors.$white; &::before { display: none; } + } - .dropdown__search-bar { - height: 34px; - margin: 0 12px 12px; - border-radius: 4px; - border: 1px solid rgba(34, 36, 38, 0.15); - background-color: white; + .custom-dropdown .dropdown__search-bar { + height: 34px; + margin: 0 12px 12px; + border: 1px solid rgba(34, 36, 38, 0.15); + background-color: colors.$white; + } - .dropdown__search-bar-input { - width: 100%; - padding: 8px 8px; - background-color: unset; - } + .custom-dropdown .dropdown__search-bar .dropdown__search-bar-input { + width: 100%; + padding: 8px 8px; + background-color: unset; + } - .dropdown__search-bar-input--highlighted { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } + .custom-dropdown + .dropdown__search-bar + .dropdown__search-bar-input--highlighted { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } - .dropdown__option { - padding: 8px; - } + .custom-dropdown .dropdown__option { + padding: 8px; + } - .dropdown__option > span { - color: black; - } + .custom-dropdown .dropdown__option > span { + color: colors.$black; + } - .dropdown__option--is-no-results-found { - color: colors.$grey7; - } + .custom-dropdown .dropdown__option--is-no-results-found { + color: colors.$grey400; + } - .dropdown__option--is-no-results-found { - background-color: unset; - } + .custom-dropdown .dropdown__option--is-no-results-found { + background-color: unset; + } - .dropdown__option--is-active-option { - background-color: unset; - color: colors.$black; - font-weight: bold; - background-color: colors.$grey5; - } + .custom-dropdown .dropdown__option--is-active-option { + background-color: unset; + color: colors.$black; + font-weight: bold; + background-color: colors.$grey50; + } - .dropdown__option--is-highlighted-option, - .dropdown__option:hover { - background-color: colors.$grey4; - } + .custom-dropdown .dropdown__option--is-highlighted-option, + .custom-dropdown .dropdown__option:hover { + background-color: colors.$grey100; } .select__dropdown-wrapper { min-width: 350px; - border: solid 1px #96c8da; + border: solid 1px colors.$grey300; border-top: unset; z-index: 3; margin-top: 1px; input:not([type='radio']), textarea { - border: 1px solid colors.$grey2; + border: 1px solid colors.$grey300; border-radius: 4px; padding: 4px 8px; outline: none; @@ -232,7 +232,7 @@ body { line-height: 16px; &:focus, &:focus-visible { - border-color: colors.$linkBlueTransparent; + border-color: colors.$blue300; } } .dropdown__search-bar { @@ -248,8 +248,8 @@ body { width: 100%; cursor: pointer; border: none; - background-color: white; - color: #39699a; + background-color: colors.$white; + color: colors.$blue400; font-size: 14px; font-weight: bold; margin: 0; @@ -257,21 +257,21 @@ body { border-top: 1px solid rgba(34, 36, 38, 0.1); border-bottom: 1px solid rgba(34, 36, 38, 0.1); - span { - font-size: 22px; - } - &:hover { - background-color: colors.$grey4; + background-color: colors.$grey100; } } + + .button-top-of-list span { + font-size: 22px; + } } .select-with-icon__wrapper { z-index: 2; - height: 36px; + height: 40px; .select { - color: black; + color: colors.$black; } } } @@ -291,12 +291,9 @@ body { .translate-box.settings { display: flex; align-items: center; - margin: 44px 0 0 0; + margin: 51px 0 0 0; cursor: pointer; } -.translate-box.settings-disabled { - opacity: 0.5; -} .translate-box.qa-box { margin: 32px 0 0 !important; @@ -329,10 +326,9 @@ body { min-width: 992px; max-width: 1600px; position: relative; - padding: 24px; - background: colors.$grey5; - padding-top: 0px; - border-radius: 4px; + padding: 0 24px 24px; + background: colors.$grey50; + border-radius: 16px; } .wrapper-upload h1 { @@ -356,7 +352,7 @@ body { display: grid; align-items: center; justify-content: center; - color: colors.$darkBlue; + color: colors.$blue900; min-width: 992px; /*margin: -3px 0 10px 0;*/ height: 175px; @@ -378,20 +374,15 @@ body { margin: 0px; font-family: Calibri, Arial, Helvetica, sans-serif; .highlight { - color: colors.$translatedBlue; + color: colors.$blue500; } } .wrapper-bottom { - margin: 0 auto; - width: 94%; - min-width: 992px; position: relative; - padding: 12px 0; + padding: 12px 0 0; display: flex; justify-content: space-between; - max-width: 1600px; - align-items: center; } h2 { @@ -409,7 +400,7 @@ h2 { min-width: 200px; font-size: 26px !important; &.disabled { - background: colors.$grey2 !important; + background: colors.$grey300 !important; } .uploadloader { background: url(/public/img/loader.gif) center center no-repeat; @@ -433,7 +424,7 @@ h2 { margin: -2px 0 0 5px; font-size: 13px; font-weight: normal; - color: #999; + color: colors.$grey400; display: none; text-align: center; } @@ -455,10 +446,6 @@ a:hover { font-size: 16px; } -.translate-box label { - margin-left: 5px; -} - body { font-family: Calibri, Arial, Helvetica, sans-serif; } @@ -468,16 +455,16 @@ body { height: 37px; padding: 5px; font-size: 16px; - border: 1px solid #ccc; + border: 1px solid colors.$grey200; margin: 0 0 5px 0; font-family: Calibri, Arial, Helvetica, sans-serif; border-radius: 2px; } a { - color: colors.$linkBlue; + color: colors.$blue700; &:hover { - color: colors.$linkBlueHover; + color: colors.$blue400; } } @@ -485,7 +472,7 @@ a { float: left; font-weight: bold; font-size: 16px; - color: colors.$grey1; + color: colors.$grey500; margin: 0px; .supported-file-formats { cursor: pointer; @@ -495,7 +482,7 @@ a { .btn { height: 44px; display: block; - border: 1px solid #848689; + border: 1px solid colors.$grey500; text-decoration: none; -moz-border-radius: 2px; border-radius: 2px; @@ -508,7 +495,7 @@ a { -moz-box-shadow: none; -webkit-box-shadow: none; border: none; - background: colors.$grey2; + background: colors.$grey300; box-shadow: none !important; } @@ -537,7 +524,7 @@ a { .popup h3 { font-size: 16px; margin: 10px 0 5px 0; - color: #333; + color: colors.$grey1300; } .popup .header { @@ -545,12 +532,12 @@ a { height: 20px; float: left; text-align: left; - background: #efefef; - border-bottom: 1px solid #ccc; + background: colors.$grey75; + border-bottom: 1px solid colors.$grey200; margin-bottom: 5px; - -webkit-box-shadow: inset 0 1px 1px 1px #f4f7f9; - box-shadow: inset 0 1px 1px 1px #f4f7f9; - color: #333; + -webkit-box-shadow: inset 0 1px 1px 1px colors.$grey50; + box-shadow: inset 0 1px 1px 1px colors.$grey50; + color: colors.$grey1300; font-size: 22px; font-weight: bold; padding: 5px 2.5% 10px 1.3%; @@ -570,7 +557,6 @@ a { } .close { - background: url(/public/img/x.png) center 1px no-repeat; width: 22px; height: 20px; display: block; @@ -579,21 +565,16 @@ a { top: 0; } -.close:hover, -.close:focus { - background: url(/public/img/x.png) center -30px no-repeat; -} - .popup .header input { float: right; margin: 1px 0px 0px 15px !important; - background: colors.$translatedBlue; + background: colors.$blue500; font-weight: bold; float: right; font-size: 14px; cursor: pointer; - color: #333; - border: 1px solid #ccc !important; + color: colors.$grey1300; + border: 1px solid colors.$grey200 !important; border-radius: 2px; border-radius: 2px; padding: 3px 12px !important; @@ -613,47 +594,41 @@ a { .supported-formats { height: 100%; - .fileformat { - display: flex; - flex-direction: row; - height: calc(100% - 50px); - padding: 12px; - gap: 8px; - justify-content: space-between; - overflow: auto; - h3 { - padding: 0 30px; - background-color: #efefef; - text-align: center; - } +} - span { - padding: 10px 0px 10px 40px; - margin: 5px 0 0 0; - width: 100%; - height: 35px; - float: left; - background-size: 25px !important; - } - .format-box { - float: none; - flex: 1 1 auto; - max-width: 300px; - .file-list { - float: left; - margin: 0 auto; - float: none; - overflow: hidden; - > div { - width: 135px; - margin: 0; - padding: 0 5px; - float: left; - text-align: left; - } - } - } - } +.supported-formats .fileformat { + display: flex; + flex-direction: row; + height: calc(100% - 50px); + padding: 24px; + gap: 8px; + justify-content: space-between; + overflow: auto; +} + +.supported-formats .fileformat h4 { + padding: 0 24px; + background-color: colors.$grey75; +} + +.supported-formats .fileformat .format-box { + float: none; + flex: 1 1 auto; + max-width: 300px; +} + +.supported-formats .fileformat .format-box .file-list { + display: grid; + align-items: center; + grid-template-columns: 1fr 1fr; + gap: 8px; + padding: 16px; +} + +.supported-formats .fileformat .format-box .file-list > div { + display: flex; + gap: 8px; + padding: 5px; } #delete-failed-conversions { @@ -677,7 +652,8 @@ ul.test li { height: 18px; margin: 52px 14px 0 5px; font-size: 20px; - color: #ccc; + color: colors.$grey200; + cursor: pointer; } #swaplang span { @@ -685,7 +661,7 @@ ul.test li { } #swaplang:hover { - color: #ddd; + color: colors.$grey200; } .name { @@ -711,39 +687,28 @@ ul.test li { left: 0; width: 100%; height: 100%; - z-index: 9999999999999; - background: rgba(255, 255, 255, 0.5); + z-index: var(--z-overlay); + background: rgba(colors.$white, 0.5); } header .nav-bar .dropdown.select-org span.text { line-height: 32px; } -.ui.user.label { - top: 0px !important; -} - .translate-box input:focus { - border-color: #85b7d9; - background: #ffffff; + border-color: colors.$blue300; + background: colors.$white; color: rgba(0, 0, 0, 0.8); outline: none; } select:focus { - border-color: #85b7d9; - background: #ffffff; + border-color: colors.$blue300; + background: colors.$white; color: rgba(0, 0, 0, 0.8); outline: none; } -.ui.selection.dropdown { - box-shadow: inset 0 1px 3px #ddd; -} - -.ui.input input { - box-shadow: inset 0 1px 3px #ddd; -} /* Header restyling */ .action-submenu { @@ -758,7 +723,7 @@ select:focus { align-items: center; justify-content: center; padding: 80px 20px; - color: #002b5a; + color: colors.$blue900; div.buttons { padding-top: 20px; } @@ -793,19 +758,15 @@ select:focus { } } -.translate-box { - .project-template-select { - .dropdown__option--is-active-option { - .select-item-default { - color: colors.$black; - } - } +.translate-box .project-template-select .dropdown__option--is-active-option { + .select-item-default { + color: colors.$black; } } .project-template-select-unsaved { .select { - color: colors.$translatedBlue !important; + color: colors.$blue500 !important; } } @@ -815,7 +776,7 @@ select:focus { width: 100%; height: 36px; top: 24px; - background-color: rgba(255, 255, 255, 0.9); + background-color: rgba(colors.$white, 0.9); .project-template-select-loading-icon { background: url(/public/img/loading.gif) 47% 6px no-repeat !important; @@ -853,19 +814,15 @@ select:focus { } } -.translate-box { - .project-template-select { - .dropdown__option--is-active-option { - .select-item-default { - color: colors.$black; - } - } +.translate-box .project-template-select .dropdown__option--is-active-option { + .select-item-default { + color: colors.$black; } } .project-template-select-unsaved { .select { - color: colors.$translatedBlue !important; + color: colors.$blue500 !important; } } @@ -873,9 +830,10 @@ select:focus { position: absolute; z-index: 2; width: 100%; - height: 36px; - top: 24px; - background-color: rgba(255, 255, 255, 0.9); + height: 40px; + border-radius: variables.$border-radius-default; + top: 32px; + background-color: rgba(colors.$white, 0.9); .project-template-select-loading-icon { background: url(/public/img/loading.gif) 47% 6px no-repeat !important; @@ -901,20 +859,19 @@ select:focus { position: absolute; bottom: 0; } - } .error-message, .warning-message { - background: #d65757; - color: #fff; + background: colors.$red400; + color: colors.$white; padding: 10px 0 10px 16px; margin: 10px 0; font-weight: bold; width: 100%; -moz-border-radius: 2px; border-radius: 2px; - border: 1px solid #c45f5f; + border: 1px solid colors.$orange500; display: flex; .icon { float: left; @@ -929,12 +886,12 @@ select:focus { } .error-message { a { - color: #fff; + color: colors.$white; } } .warning-message { background: rgba(255, 250, 139, 0.38) !important; - border-color: #6d6e71; - color: #000; -} \ No newline at end of file + border-color: colors.$grey600; + color: colors.$black; +} diff --git a/public/css/sass/vendor_mc/semantic/_semantic_overrides.scss b/public/css/sass/vendor_mc/semantic/_semantic_overrides.scss deleted file mode 100644 index 537030c2f9..0000000000 --- a/public/css/sass/vendor_mc/semantic/_semantic_overrides.scss +++ /dev/null @@ -1,420 +0,0 @@ -@use "../../commons/colors"; -@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin'); - -/******** Overwrite Semantic CSS *********/ - -.ui.basic.buttons .active.button, -.ui.basic.active.button { - box-shadow: rgba(34, 36, 38, 0.35); -} -.ui.basic.buttons .active.button { - box-shadow: rgba(34, 36, 38, 0.35) inset; -} - -/*--- Blue ---*/ - -.ui.blue.buttons .button, -.ui.blue.button { - background-color: colors.$translatedBlue; -} -.ui.blue.buttons .button:hover, -.ui.blue.button:hover { - background-color: colors.$translatedBlueHover; -} -/* Basic */ - -.ui.basic.blue.buttons .button, -.ui.basic.blue.button { - box-shadow: 0px 0px 0px 1px colors.$translatedBlue inset !important; - color: colors.$translatedBlue !important; -} - -.ui.basic.blue.buttons .button:hover, -.ui.basic.blue.button:hover { - color: colors.$translatedBlueHover !important; -} - -.ui.basic.blue.buttons .button:focus, -.ui.basic.blue.button:focus { - color: colors.$translatedBlueHover !important; -} - -/*--- Green ---*/ - -.ui.green.buttons .button, -.ui.green.button { - background-color: colors.$greenDefault; - transition: 0.3s ease; -} - -.ui.green.buttons .button:hover, -.ui.green.button:hover { - background-color: colors.$greenDefaultHover; - //box-shadow: 0 0 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24) !important; -} - -.ui.green.buttons .button:focus, -.ui.green.button:focus { - background-color: colors.$greenDefaultHover; - box-shadow: none !important; -} - -.ui.green.buttons .button:active, -.ui.green.button:active { - background-color: colors.$greenDefaultHover; - box-shadow: none !important; - transition: none !important; -} - -.ui.green.buttons .active.button, -.ui.green.buttons .active.button:active, -.ui.green.active.button, -.ui.green.button .active.button:active { - box-shadow: none !important; - transition: none !important; -} -/*--- Red ---*/ - -.ui.red.buttons .button, -.ui.red.button { - background-color: colors.$redDefault; -} - -.ui.red.buttons .button:hover, -.ui.red.button:hover { - background-color: colors.$redDefaultHover; - //box-shadow: 0 0 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24) !important; -} - -.ui.red.buttons .button:focus, -.ui.red.button:focus { - background-color: colors.$redDefaultHover; - box-shadow: none !important; -} - -.ui.red.buttons .button:active, -.ui.red.button:active { - background-color: colors.$redDefaultHover; - box-shadow: none !important; -} - -.ui.red.buttons .active.button, -.ui.red.buttons .active.button:active, -.ui.red.active.button, -.ui.red.button .active.button:active { - background-color: colors.$redDefaultHover; - box-shadow: none !important; -} - -/*------------------- - Primary ---------------------*/ - -/*--- Standard ---*/ - -.ui.buttons .button, -.ui.button { - font-family: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif; - align-items: center; -} -.ui.primary.buttons .button, -.ui.primary.button { - background-color: colors.$translatedBlue; - transition: 0.3s ease; - align-items: center; -} - -.ui.primary.buttons .button:hover, -.ui.primary.button:hover { - background-color: colors.$translatedBlueHover; - //box-shadow: 0 0 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24) !important; -} - -.ui.primary.buttons .button:focus, -.ui.primary.button:focus { - background-color: colors.$translatedBlueActive; - box-shadow: none !important; -} - -.ui.primary.buttons .button:active, -.ui.primary.button:active { - background-color: colors.$translatedBlueActive; - box-shadow: none !important; - transition: none; -} - -.ui.primary.buttons .active.button, -.ui.primary.buttons .active.button:active, -.ui.primary.active.button, -.ui.primary.button .active.button:active { - transition: none; -} - -/* Basic */ - -.ui.basic.primary.buttons .button, -.ui.basic.primary.button { - box-shadow: 0px 0px 0px 1px colors.$translatedBlue inset !important; - color: colors.$translatedBlue !important; -} - -.ui.basic.primary.buttons .button:hover, -.ui.basic.primary.button:hover { - color: colors.$translatedBlueHover !important; -} - -.ui.basic.primary.buttons .button:focus, -.ui.basic.primary.button:focus { - color: colors.$translatedBlueActive !important; -} - -/*--------------- - Positive -----------------*/ - -/* Standard */ - -.ui.positive.buttons .button:hover, -.ui.positive.button:hover { - background-color: #85b742; -} - -/*--------------- - Negative -----------------*/ - -/* Standard */ - -.ui.negative.buttons .button, -.ui.negative.button { - background-color: #f26522; -} - -.ui.negative.buttons .button:hover, -.ui.negative.button:hover { - background-color: #d1581c; -} -/**********/ -i.flag.mm:before, -i.flag.myanmar:before, -i.flag.burma:before { - background-position: -36px -1717px; -} - -/* Blue */ - -i.blue.icon { - color: colors.$translatedBlue !important; -} - -i.inverted.blue.icon { - color: #54c8ff !important; -} - -i.inverted.bordered.blue.icon, -i.inverted.circular.blue.icon { - background-color: colors.$translatedBlue !important; - color: #ffffff !important; -} - -/*--- Blue ---*/ - -.ui.blue.labels .label, -.ui.blue.label { - background-color: colors.$translatedBlue !important; - border-color: colors.$translatedBlue !important; -} - -/* Link */ - -.ui.blue.labels .label:hover, -a.ui.blue.label:hover { - background-color: colors.$translatedBlueHover !important; - border-color: colors.$translatedBlueHover !important; -} - -/* Ribbon */ - -/* Basic */ - -.ui.basic.blue.label { - color: colors.$translatedBlue !important; - border-color: colors.$translatedBlue !important; -} - -.ui.basic.blue.labels a.label:hover, -a.ui.basic.blue.label:hover { - color: colors.$translatedBlueHover !important; - border-color: colors.$translatedBlueHover !important; -} - -/* Colors */ - -/* Blue */ - -.ui.blue.segment:not(.inverted) { - border-top: 2px solid colors.$translatedBlue; -} - -.ui.inverted.blue.segment { - background-color: colors.$translatedBlue !important; -} - -/*---------------------- - Colored ------------------------*/ -/* Blue */ -.ui.grid > .blue.row, -.ui.grid > .blue.column, -.ui.grid > .row > .blue.column { - background-color: colors.$translatedBlue !important; -} - -/*-------------- - Colors ----------------*/ - -/*--- Standard Colors ---*/ -.ui.menu .blue.active.item, -.ui.blue.menu .active.item { - border-color: colors.$translatedBlue !important; - color: colors.$translatedBlue !important; -} -/*-------------- - Inverted ----------------*/ - -/* Red */ - -.ui.inverted.menu .red.active.item, -.ui.inverted.red.menu { - background-color: #f26522; -} -/* Blue */ - -.ui.inverted.menu .blue.active.item, -.ui.inverted.blue.menu { - background-color: colors.$translatedBlue; -} - -/* Colors Message */ - -.ui.blue.message { - color: colors.$translatedBlue; - box-shadow: 0px 0px 0px 1px colors.$translatedBlue inset, - 0px 0px 0px 0px rgba(0, 0, 0, 0); -} - -/*-------------- - Single Line ----------------*/ -/*------------------- - Colors ---------------------*/ -/* Blue */ - -.ui.blue.table { - border-top: 0.2em solid colors.$translatedBlue; -} - -.ui.inverted.blue.table { - background-color: colors.$translatedBlue !important; -} - -/* Blue */ - -.ui.blue.cards > .card, -.ui.cards > .blue.card, -.ui.blue.card { - box-shadow: 0px 0px 0px 1px #d4d4d5, 0px 2px 0px 0px colors.$translatedBlue, - 0px 1px 3px 0px #d4d4d5; -} - -.ui.blue.statistics .statistic > .value, -.ui.statistics .blue.statistic > .value, -.ui.blue.statistic > .value { - color: colors.$translatedBlue; -} - -.ui.toggle.checkbox input:checked ~ .box:before, -.ui.toggle.checkbox input:checked ~ label:before { - background-color: colors.$translatedBlue !important; -} - -.ui.scrolling.dropdown .menu .item.item.item, -.ui.dropdown .scrolling.menu > .item.item.item { - padding-right: calc(1.14285714rem + 17px) !important; -} - -/*-------------- - Colors ----------------*/ - -/* Red */ - -.ui.red.progress .bar { - background-color: #f26522; -} -/* Blue */ - -.ui.blue.progress .bar { - background-color: colors.$translatedBlue; -} - -/********************************************/ - -.ui.popup { - overflow: initial !important; - z-index: 20000000000000; -} - -.ui.grid.border-box * { - box-sizing: border-box; -} - - -/* ICONS */ -//Manage -.project { - .ui.icon.buttons .button, .ui.icon.button:not(.animated):not(.compact):not(.labeled) { - padding: 0; - } -} -i.icon { - font-family: "Dropdown"; -} - -/* Dropdown */ -.ui.dropdown { - font-size: unset; -} - -.ui.dropdown .menu { - font-family: "Calibri", "Helvetica Neue", Arial, Helvetica, sans-serif; - & > .item { - font-size: 14px; - color: colors.$black !important; - min-height: unset; - } -} -.ui.dropdown .menu > .item a { - color: colors.$black !important; -} - -.ui.header { - font-family: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif; -} -.ui.attached.button { - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) !important; -} -.ui.tiny.buttons .button, .ui.tiny.button { - font-size: 12px !important; -} - -//Old semantic style -button, input, optgroup, select, textarea { - font-family: inherit; - font-size: 100%; - line-height: 1.15; - margin: 0; -} diff --git a/public/css/sass/vendor_mc/semantic/matecat_semantic.scss b/public/css/sass/vendor_mc/semantic/matecat_semantic.scss deleted file mode 100644 index b607bca33d..0000000000 --- a/public/css/sass/vendor_mc/semantic/matecat_semantic.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use 'semantic'; -@use '../../commons/colors'; -@use 'semantic_overrides'; - -@font-face { - font-family: 'Icons'; - src: url('/public/css/fonts/icomoon.eot'); - src: url('/public/css/fonts/icomoon.eot') format('embedded-opentype'), - url('/public/css/fonts/icomoon.ttf') format('truetype'), - url('/public/css/fonts/icomoon.woff') format('woff'), - url('/public/css/fonts/icomoon.svg') format('svg'); - font-style: normal; - font-weight: normal; - font-variant: normal; - text-decoration: inherit; - text-transform: none; -} - -a { - color: colors.$linkBlue; - &:hover { - color: colors.$linkBlueHover; - } - &:active { - color: colors.$linkBlueActive; - } -} diff --git a/public/css/sass/vendor_mc/semantic/semantic.css b/public/css/sass/vendor_mc/semantic/semantic.css deleted file mode 100644 index c611659bad..0000000000 --- a/public/css/sass/vendor_mc/semantic/semantic.css +++ /dev/null @@ -1,40861 +0,0 @@ -/* - * # Fomantic UI - 2.9.3 - * https://github.com/fomantic/Fomantic-UI - * https://fomantic-ui.com/ - * - * Copyright 2024 Contributors - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ -/*! - * # Fomantic-UI 2.9.3 - Reset - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Reset -*******************************/ - -/* Border-Box */ - -*, -*::before, -*::after { - box-sizing: inherit; -} - -html { - box-sizing: border-box; -} - -/* iPad Input Shadows */ - -input[type="text"], -input[type="email"], -input[type="search"], -input[type="password"] { - -webkit-appearance: none; - -moz-appearance: none; - /* mobile firefox too! */ -} - -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; - /* 1 */ - text-decoration: underline; - /* 2 */ - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - line-height: 1.15; - /* 1 */ - margin: 0; - /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { - overflow: visible; - /* 1 */ -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { - text-transform: none; - /* 1 */ -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; - /* 1 */ - color: inherit; - /* 2 */ - display: table; - /* 1 */ - max-width: 100%; - /* 1 */ - padding: 0; - /* 3 */ - white-space: normal; - /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Button - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Button -*******************************/ - -.ui.button { - cursor: pointer; - display: inline-block; - min-height: 1em; - outline: none; - border: none; - vertical-align: baseline; - background: #e0e1e2 none; - color: rgba(0, 0, 0, 0.6); - font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - margin: 0 0.25em 0 0; - padding: 0.78571429em 1.5em 0.78571429em; - text-transform: none; - text-shadow: none; - font-weight: bold; - line-height: 1em; - font-style: normal; - text-align: center; - text-decoration: none; - border-radius: 0.28571429rem; - box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; - will-change: auto; - -webkit-tap-highlight-color: transparent; -} - -/******************************* - States -*******************************/ - -/* -------------- - Hover ---------------- */ - -.ui.button:hover { - background-color: #cacbcd; - background-image: none; - box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; - color: rgba(0, 0, 0, 0.8); -} - -.ui.button:hover .icon { - opacity: 0.85; -} - -/* -------------- - Focus ---------------- */ - -.ui.button:focus { - background-color: #cacbcd; - color: rgba(0, 0, 0, 0.8); - background-image: none; - box-shadow: ""; -} - -.ui.button:focus .icon { - opacity: 0.85; -} - -/* -------------- - Down ---------------- */ - -.ui.button:active, -.ui.active.button:active { - background-color: #babbbc; - background-image: ""; - color: rgba(0, 0, 0, 0.9); - box-shadow: none; -} - -/* -------------- - Active ---------------- */ - -.ui.active.button { - background-color: #c0c1c2; - background-image: none; - box-shadow: 0 0 0 1px transparent inset; - color: rgba(0, 0, 0, 0.95); -} - -.ui.active.button:hover { - background-color: #c0c1c2; - background-image: none; - color: rgba(0, 0, 0, 0.95); -} - -.ui.active.button:active { - background-color: #c0c1c2; - background-image: none; -} - -/* -------------- - Loading - --------------- */ - -/* Specificity hack */ - -.ui.ui.ui.ui.ui.ui.loading.button { - position: relative; - cursor: default; - text-shadow: none !important; - color: transparent; - opacity: 1; - pointer-events: auto; - transition: all 0s linear, opacity 0.1s ease; -} - -.ui.loading.button::before { - position: absolute; - content: ""; - top: 50%; - left: 50%; - margin: -0.64285714em 0 0 -0.64285714em; - width: 1.28571429em; - height: 1.28571429em; - border-radius: 500rem; - border: 0.2em solid rgba(0, 0, 0, 0.15); -} - -.ui.loading.button::after { - position: absolute; - content: ""; - top: 50%; - left: 50%; - margin: -0.64285714em 0 0 -0.64285714em; - width: 1.28571429em; - height: 1.28571429em; - border-radius: 500rem; - animation: loader 0.6s infinite linear; - border: 0.2em solid currentColor; - color: #fff; - box-shadow: 0 0 0 1px transparent; -} - -.ui.ui.ui.loading.button .label { - background-color: transparent; - border-color: transparent; - color: transparent; -} - -.ui.labeled.icon.loading.button .icon { - background-color: transparent; - box-shadow: none; -} - -.ui.basic.loading.button:not(.inverted)::before { - border-color: rgba(0, 0, 0, 0.1); -} - -.ui.basic.loading.button:not(.inverted)::after { - border-color: #767676; -} - -/* ------------------- - Disabled - -------------------- */ - -.ui.buttons .disabled.button:not(.basic), -.ui.disabled.button, -.ui.button:disabled, -.ui.disabled.button:hover, -.ui.disabled.active.button { - cursor: default; - opacity: 0.45 !important; - background-image: none; - box-shadow: none; - pointer-events: none !important; -} - -/* Basic Group With Disabled */ - -.ui.basic.buttons .ui.disabled.button { - border-color: rgba(34, 36, 38, 0.5); -} - -/******************************* - Types -*******************************/ - -/* ------------------- - Animated - -------------------- */ - -.ui.animated.button { - position: relative; - overflow: hidden; - padding-right: 0 !important; - vertical-align: middle; - z-index: 1; -} - -.ui.animated.button .content { - will-change: transform, opacity; -} - -.ui.animated.button .visible.content { - position: relative; - margin-right: 1.5em; -} - -.ui.animated.button .hidden.content { - position: absolute; - width: 100%; -} - -/* Horizontal */ - -.ui.animated.button .visible.content, -.ui.animated.button .hidden.content { - 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.5em; -} - -.ui.animated.button:focus .visible.content, -.ui.animated.button:hover .visible.content { - left: auto; - right: 200%; -} - -.ui.animated.button:focus .hidden.content, -.ui.animated.button:hover .hidden.content { - left: auto; - right: 0; -} - -/* Vertical */ - -.ui.vertical.animated.button .visible.content, -.ui.vertical.animated.button .hidden.content { - transition: top 0.3s ease, transform 0.3s ease; -} - -.ui.vertical.animated.button .visible.content { - transform: translateY(0); - right: auto; -} - -.ui.vertical.animated.button .hidden.content { - top: -50%; - left: 0; - right: auto; -} - -.ui.vertical.animated.button:focus .visible.content, -.ui.vertical.animated.button:hover .visible.content { - transform: translateY(200%); - right: auto; -} - -.ui.vertical.animated.button:focus .hidden.content, -.ui.vertical.animated.button:hover .hidden.content { - top: 50%; - right: auto; -} - -/* Fade */ - -.ui.fade.animated.button .visible.content, -.ui.fade.animated.button .hidden.content { - transition: opacity 0.3s ease, transform 0.3s ease; -} - -.ui.fade.animated.button .visible.content { - left: auto; - right: auto; - opacity: 1; - transform: scale(1); -} - -.ui.fade.animated.button .hidden.content { - opacity: 0; - left: 0; - right: auto; - transform: scale(1.5); -} - -.ui.fade.animated.button:focus .visible.content, -.ui.fade.animated.button:hover .visible.content { - left: auto; - right: auto; - opacity: 0; - transform: scale(0.75); -} - -.ui.fade.animated.button:focus .hidden.content, -.ui.fade.animated.button:hover .hidden.content { - left: 0; - right: auto; - opacity: 1; - transform: scale(1); -} - -/* ------------------- - Inverted - -------------------- */ - -.ui.inverted.button { - box-shadow: 0 0 0 2px #fff inset; - background: transparent none; - color: #fff; - text-shadow: none !important; -} - -/* Group */ - -.ui.inverted.buttons .button { - margin: 0 0 0 -2px; -} - -.ui.inverted.buttons .button:first-child { - margin-left: 0; -} - -.ui.inverted.vertical.buttons .button { - margin: 0 0 -2px 0; -} - -.ui.inverted.vertical.buttons .button:first-child { - margin-top: 0; -} - -/* States */ - -/* Hover */ - -.ui.inverted.button:hover { - background: #fff; - box-shadow: 0 0 0 2px #fff inset; - color: rgba(0, 0, 0, 0.8); -} - -/* Active / Focus */ - -.ui.inverted.button:focus, -.ui.inverted.button.active { - background: #fff; - box-shadow: 0 0 0 2px #fff inset; - color: rgba(0, 0, 0, 0.8); -} - -/* Active Focus */ - -.ui.inverted.button.active:focus { - background: #dcddde; - box-shadow: 0 0 0 2px #dcddde inset; - color: rgba(0, 0, 0, 0.8); -} - -/* ------------------- - Labeled Button - -------------------- */ - -.ui.labeled.button:not(.icon) { - display: inline-flex; - flex-direction: row; - background: none; - padding: 0 !important; - border: none; - box-shadow: none; -} - -.ui.labeled.button > .button { - margin: 0; -} - -.ui.labeled.button > .label { - display: flex; - align-items: center; - margin: 0 0 0 -1px !important; - font-size: 1em; - padding: ""; - border-color: rgba(34, 36, 38, 0.15); -} - -/* Tag */ - -.ui.labeled.button > .tag.label::before { - width: 1.85em; - height: 1.85em; -} - -/* Right */ - -.ui.labeled.button:not([class*="left labeled"]) > .button { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.ui.labeled.button:not([class*="left labeled"]) > .label { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -/* Left Side */ - -.ui[class*="left labeled"].button > .button { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.ui[class*="left labeled"].button > .label { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -/* ------------------- - Social - -------------------- */ - -/* Facebook */ - -.ui.facebook.button { - background-color: #3b5998; - color: #fff; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.facebook.button:hover { - background-color: #304d8a; - color: #fff; - text-shadow: none; -} - -.ui.facebook.button:active { - background-color: #2d4373; - color: #fff; - text-shadow: none; -} - -/* Twitter */ - -.ui.twitter.button { - background-color: #1da1f2; - color: #fff; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.twitter.button:hover { - background-color: #0298f3; - color: #fff; - text-shadow: none; -} - -.ui.twitter.button:active { - background-color: #0c85d0; - color: #fff; - text-shadow: none; -} - -/* Google Plus */ - -.ui.google.plus.button { - background-color: #dd4b39; - color: #fff; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.google.plus.button:hover { - background-color: #e0321c; - color: #fff; - text-shadow: none; -} - -.ui.google.plus.button:active { - background-color: #c23321; - color: #fff; - text-shadow: none; -} - -/* Linked In */ - -.ui.linkedin.button { - background-color: #0077b5; - color: #fff; - text-shadow: none; -} - -.ui.linkedin.button:hover { - background-color: #00669c; - color: #fff; - text-shadow: none; -} - -.ui.linkedin.button:active { - background-color: #005582; - color: #fff; - text-shadow: none; -} - -/* YouTube */ - -.ui.youtube.button { - background-color: #f00; - color: #fff; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.youtube.button:hover { - background-color: #e60000; - color: #fff; - text-shadow: none; -} - -.ui.youtube.button:active { - background-color: #cc0000; - color: #fff; - text-shadow: none; -} - -/* Instagram */ - -.ui.instagram.button { - background-color: #49769c; - color: #fff; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.instagram.button:hover { - background-color: #3d698e; - color: #fff; - text-shadow: none; -} - -.ui.instagram.button:active { - background-color: #395c79; - color: #fff; - text-shadow: none; -} - -/* Pinterest */ - -.ui.pinterest.button { - background-color: #bd081c; - color: #fff; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.pinterest.button:hover { - background-color: #ac0013; - color: #fff; - text-shadow: none; -} - -.ui.pinterest.button:active { - background-color: #8c0615; - color: #fff; - text-shadow: none; -} - -/* VK */ - -.ui.vk.button { - background-color: #45668e; - color: #fff; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.vk.button:hover { - background-color: #395980; - color: #fff; -} - -.ui.vk.button:active { - background-color: #344d6c; - color: #fff; -} - -/* WhatsApp */ - -.ui.whatsapp.button { - background-color: #25d366; - color: #fff; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.whatsapp.button:hover { - background-color: #19c55a; - color: #fff; -} - -.ui.whatsapp.button:active { - background-color: #1da851; - color: #fff; -} - -/* Telegram */ - -.ui.telegram.button { - background-color: #08c; - color: #fff; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.telegram.button:hover { - background-color: #0077b3; - color: #fff; -} - -.ui.telegram.button:active { - background-color: #006699; - color: #fff; -} - -/* -------------- - Icon ---------------- */ - -.ui.button > .icon:not(.button) { - height: auto; - opacity: 0.8; - transition: opacity 0.1s ease; - color: ""; -} - -.ui.button:not(.icon) > .icon:not(.button):not(.dropdown), -.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) { - margin: 0 0.42857143em 0 -0.21428571em; - vertical-align: baseline; -} - -.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon { - vertical-align: baseline; -} - -.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) { - margin: 0 -0.21428571em 0 0.42857143em; -} - -/******************************* - Variations -*******************************/ - -/* -------------- - Stackable - --------------- */ - -/* Tablet Or Below */ - -@media only screen and (max-width: 767.98px) { - .ui.stackable.buttons { - flex-direction: column; - width: 100%; - } - - .ui.stackable.buttons .button:first-child { - border-bottom-left-radius: 0; - border-top-right-radius: 0.28571429rem; - } - - .ui.stackable.buttons .button:last-child { - border-bottom-left-radius: 0.28571429rem; - border-top-right-radius: 0; - } - - .ui.stackable.buttons .button:only-child { - border-radius: 0.28571429rem; - } -} - -/* ------------------- - Floated - -------------------- */ - -.ui[class*="left floated"].buttons, -.ui[class*="left floated"].button { - float: left; - margin-left: 0; - margin-right: 0.25em; -} - -.ui[class*="right floated"].buttons, -.ui[class*="right floated"].button { - float: right; - margin-right: 0; - margin-left: 0.25em; -} - -/* ------------------- - Compact - -------------------- */ - -.ui.compact.buttons .button, -.ui.compact.button { - padding: 0.58928571em 1.125em 0.58928571em; -} - -.ui.compact.icon.buttons .button, -.ui.compact.icon.button { - padding: 0.58928571em 0.58928571em 0.58928571em; -} - -.ui.compact.labeled.icon.buttons .button, -.ui.compact.labeled.icon.button { - padding: 0.58928571em 3.69642857em 0.58928571em; -} - -.ui.compact.labeled.icon.buttons .button > .icon, -.ui.compact.labeled.icon.button > .icon { - padding: 0.58928571em 0; -} - -/* ------------------- - Sizes --------------------- */ - -.ui.buttons .button, -.ui.buttons .or, -.ui.button { - font-size: 1rem; -} - -.ui.mini.buttons .dropdown, -.ui.mini.buttons .dropdown .menu > .item, -.ui.mini.buttons .button, -.ui.mini.buttons .or, -.ui.ui.ui.ui.mini.button { - font-size: 0.78571429rem; -} - -.ui.tiny.buttons .dropdown, -.ui.tiny.buttons .dropdown .menu > .item, -.ui.tiny.buttons .button, -.ui.tiny.buttons .or, -.ui.ui.ui.ui.tiny.button { - font-size: 0.85714286rem; -} - -.ui.small.buttons .dropdown, -.ui.small.buttons .dropdown .menu > .item, -.ui.small.buttons .button, -.ui.small.buttons .or, -.ui.ui.ui.ui.small.button { - font-size: 0.92857143rem; -} - -.ui.large.buttons .dropdown, -.ui.large.buttons .dropdown .menu > .item, -.ui.large.buttons .button, -.ui.large.buttons .or, -.ui.ui.ui.ui.large.button { - font-size: 1.14285714rem; -} - -.ui.big.buttons .dropdown, -.ui.big.buttons .dropdown .menu > .item, -.ui.big.buttons .button, -.ui.big.buttons .or, -.ui.ui.ui.ui.big.button { - font-size: 1.28571429rem; -} - -.ui.huge.buttons .dropdown, -.ui.huge.buttons .dropdown .menu > .item, -.ui.huge.buttons .button, -.ui.huge.buttons .or, -.ui.ui.ui.ui.huge.button { - font-size: 1.42857143rem; -} - -.ui.massive.buttons .dropdown, -.ui.massive.buttons .dropdown .menu > .item, -.ui.massive.buttons .button, -.ui.massive.buttons .or, -.ui.ui.ui.ui.massive.button { - font-size: 1.71428571rem; -} - -/* -------------- - Icon Only - --------------- */ - -.ui.icon.buttons .button, -.ui.icon.button:not(.animated):not(.compact):not(.labeled) { - padding: 0.78571429em 0.78571429em 0.78571429em; -} - -.ui.animated.icon.button > .content > .icon, -.ui.icon.buttons .button > .icon, -.ui.icon.button > .icon { - opacity: 0.9; - margin: 0 !important; - vertical-align: top; -} - -.ui.animated.button > .content > .icon { - vertical-align: top; -} - -/* ------------------- - Basic - -------------------- */ - -.ui.basic.buttons .button, -.ui.basic.button { - background: transparent none; - color: rgba(0, 0, 0, 0.6); - font-weight: normal; - border-radius: 0.28571429rem; - text-transform: none; - text-shadow: none !important; - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset; -} - -.ui.basic.buttons { - box-shadow: none; - border: 1px solid rgba(34, 36, 38, 0.15); - border-radius: 0.28571429rem; - border-right: none; -} - -.ui.basic.buttons .button { - border-radius: 0; -} - -.ui.basic.buttons .button:hover, -.ui.basic.button:hover { - background: #fff; - color: rgba(0, 0, 0, 0.8); - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.basic.buttons .button:focus, -.ui.basic.button:focus { - background: #fff; - color: rgba(0, 0, 0, 0.8); - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.basic.buttons .button:active, -.ui.basic.button:active { - background: #f8f8f8; - color: rgba(0, 0, 0, 0.9); - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.basic.buttons .active.button, -.ui.basic.active.button { - background: rgba(0, 0, 0, 0.05); - box-shadow: ""; - color: rgba(0, 0, 0, 0.95); -} - -.ui.basic.buttons .active.button:hover, -.ui.basic.active.button:hover { - background-color: rgba(0, 0, 0, 0.05); -} - -.ui.basic.buttons .button:hover { - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.basic.buttons .button:active { - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.basic.buttons .active.button { - box-shadow: ""; -} - -/* Standard Basic Inverted */ - -.ui.basic.inverted.buttons .button, -.ui.basic.inverted.button { - background-color: transparent; - color: #f9fafb; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; -} - -.ui.basic.inverted.buttons .button:hover, -.ui.basic.inverted.button:hover { - color: #fff; - box-shadow: 0 0 0 2px #ffffff inset; -} - -.ui.basic.inverted.buttons .button:focus, -.ui.basic.inverted.button:focus { - color: #fff; - box-shadow: 0 0 0 2px #ffffff inset; -} - -.ui.basic.inverted.buttons .button:active, -.ui.basic.inverted.button:active { - background-color: rgba(255, 255, 255, 0.08); - color: #fff; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) inset; -} - -.ui.basic.inverted.buttons .active.button, -.ui.basic.inverted.active.button { - background-color: rgba(255, 255, 255, 0.08); - color: #fff; - text-shadow: none; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7) inset; -} - -.ui.basic.inverted.buttons .active.button:hover, -.ui.basic.inverted.active.button:hover { - background-color: rgba(255, 255, 255, 0.15); - box-shadow: 0 0 0 2px #ffffff inset; -} - -/* Basic Group */ - -.ui.basic.buttons:not(.inverted) .button:not(.basic) { - border-right: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: none; -} - -.ui.basic.vertical.buttons .button { - border-left: none; - border-left-width: 0; - border-top: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.basic.vertical.buttons:not(.spaced) .button:first-child { - border-top: none; -} - -/* ------------------- - Tertiary - -------------------- */ - -/* Overline Mixin */ - -.ui.tertiary.button { - transition: color 0.1s ease !important; - border-radius: 0; - margin: 0.28571429em 0.25em 0.28571429em 0 !important; - padding: 0.5em 0.5em !important; - box-shadow: none; - color: rgba(0, 0, 0, 0.6); - background: none; -} - -.ui.tertiary.button:hover { - box-shadow: inset 0 -0.2em 0 #666666; - color: #333333; - background: none; -} - -.ui.tertiary.button:focus { - box-shadow: inset 0 -0.2em 0 #666666; - color: #333333; - background: none; -} - -.ui.tertiary.button:active { - box-shadow: inset 0 -0.2em 0 #999999; - border-radius: 0.28571429rem 0.28571429rem 0 0; - color: #666666; - background: none; -} - -/* -------------- - Labeled Icon - --------------- */ - -.ui.labeled.icon.buttons .button, -.ui.labeled.icon.button { - position: relative; - padding-left: 4.07142857em !important; - padding-right: 1.5em !important; -} - -/* Left Labeled */ - -.ui.labeled.icon.buttons > .button > .icon, -.ui.labeled.icon.button > .icon { - position: absolute; - top: 0; - left: 0; - height: 100%; - line-height: 1; - border-radius: 0; - border-top-left-radius: inherit; - border-bottom-left-radius: inherit; - text-align: center; - animation: none; - padding: 0.78571429em 0; - margin: 0; - width: 2.57142857em; - background-color: rgba(0, 0, 0, 0.05); - color: ""; - box-shadow: -1px 0 0 0 transparent inset; -} - -/* Right Labeled */ - -.ui[class*="right labeled"].icon.button { - padding-right: 4.07142857em !important; - padding-left: 1.5em !important; -} - -.ui[class*="right labeled"].icon.button > .icon { - left: auto; - right: 0; - border-radius: 0; - border-top-right-radius: inherit; - border-bottom-right-radius: inherit; - box-shadow: 1px 0 0 0 transparent inset; -} - -.ui.labeled.icon.buttons > .button > .icon::before, -.ui.labeled.icon.button > .icon::before, -.ui.labeled.icon.buttons > .button > .icon::after, -.ui.labeled.icon.button > .icon::after { - display: block; - position: relative; - width: 100%; - top: 0; - text-align: center; -} - -.ui.labeled.icon.buttons .button > .icon { - border-radius: 0; -} - -.ui.labeled.icon.buttons .button:first-child > .icon { - border-top-left-radius: 0.28571429rem; - border-bottom-left-radius: 0.28571429rem; -} - -.ui.labeled.icon.buttons .button:last-child > .icon { - border-top-right-radius: 0.28571429rem; - border-bottom-right-radius: 0.28571429rem; -} - -.ui.vertical.labeled.icon.buttons .button:first-child > .icon { - border-radius: 0; - border-top-left-radius: 0.28571429rem; -} - -.ui.vertical.labeled.icon.buttons .button:last-child > .icon { - border-radius: 0; - border-bottom-left-radius: 0.28571429rem; -} - -/* Loading Icon in Labeled Button */ - -.ui.labeled.icon.button > .loading.icon::before { - animation: loader 2s linear infinite; -} - -/* -------------- - Toggle - --------------- */ - -/* Toggle (Modifies active state to give affordances) */ - -.ui.toggle.buttons .active.button, -.ui.buttons .button.toggle.active, -.ui.button.toggle.active { - background-color: #21ba45; - box-shadow: none; - text-shadow: none; - color: #fff; -} - -.ui.button.toggle.active:hover { - background-color: #16ab39; - text-shadow: none; - color: #fff; -} - -/* -------------- - Circular - --------------- */ - -.ui.circular.button { - border-radius: 10em; -} - -.ui.circular.button > .icon { - width: 1em; - vertical-align: baseline; -} - -/* ------------------- - Or Buttons - -------------------- */ - -.ui.buttons .or { - position: relative; - width: 0.3em; - height: 2.57142857em; - z-index: 3; -} - -.ui.buttons .or::before { - position: absolute; - text-align: center; - border-radius: 500rem; - content: "or"; - top: 50%; - left: 50%; - background-color: #fff; - text-shadow: none; - margin-top: -0.89285714em; - margin-left: -0.89285714em; - width: 1.78571429em; - height: 1.78571429em; - line-height: 1.78571429em; - color: rgba(0, 0, 0, 0.4); - font-style: normal; - font-weight: bold; - box-shadow: 0 0 0 1px transparent inset; -} - -.ui.buttons .or[data-text]::before { - content: attr(data-text); -} - -/* Fluid Or */ - -.ui.fluid.buttons .or { - width: 0 !important; -} - -.ui.fluid.buttons .or::after { - display: none; -} - -/* ------------------- - Attached - -------------------- */ - -/* Singular */ - -.ui.attached.button { - position: relative; - display: block; - margin: 0; - border-radius: 0; - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15); -} - -/* Top / Bottom */ - -.ui.attached.top.button { - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui.attached.bottom.button { - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -/* Left / Right */ - -.ui.left.attached.button { - display: inline-block; - border-left: none; - text-align: right; - padding-right: 0.75em; - border-radius: 0.28571429rem 0 0 0.28571429rem; -} - -.ui.right.attached.button { - display: inline-block; - text-align: left; - padding-left: 0.75em; - border-radius: 0 0.28571429rem 0.28571429rem 0; -} - -/* Plural */ - -.ui.attached.buttons { - position: relative; - display: flex; - border-radius: 0; - width: auto !important; - z-index: auto; - margin-left: -1px; - margin-right: -1px; -} - -.ui.attached.buttons .button { - margin: 0; -} - -.ui.attached.buttons .button:first-child { - border-radius: 0; -} - -.ui.attached.buttons .button:last-child { - border-radius: 0; -} - -/* Top / Bottom */ - -.ui[class*="top attached"].buttons { - margin-bottom: 0; - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui[class*="top attached"].buttons .button:first-child { - border-radius: 0.28571429rem 0 0 0; -} - -.ui[class*="top attached"].buttons .button:last-child { - border-radius: 0 0.28571429rem 0 0; -} - -.ui[class*="bottom attached"].buttons { - margin-top: -1px; - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -.ui[class*="bottom attached"].buttons .button:first-child { - border-radius: 0 0 0 0.28571429rem; -} - -.ui[class*="bottom attached"].buttons .button:last-child { - border-radius: 0 0 0.28571429rem 0; -} - -/* Left / Right */ - -.ui[class*="left attached"].buttons { - display: inline-flex; - margin-right: 0; - margin-left: -1px; - border-radius: 0 0.28571429rem 0.28571429rem 0; -} - -.ui[class*="left attached"].buttons .button:first-child { - margin-left: -1px; - border-radius: 0 0.28571429rem 0 0; -} - -.ui[class*="left attached"].buttons .button:last-child { - margin-left: -1px; - border-radius: 0 0 0.28571429rem 0; -} - -.ui[class*="right attached"].buttons { - display: inline-flex; - margin-left: 0; - margin-right: -1px; - border-radius: 0.28571429rem 0 0 0.28571429rem; -} - -.ui[class*="right attached"].buttons .button:first-child { - margin-left: -1px; - border-radius: 0.28571429rem 0 0 0; -} - -.ui[class*="right attached"].buttons .button:last-child { - margin-left: -1px; - border-radius: 0 0 0 0.28571429rem; -} - -/* ------------------- - Fluid - -------------------- */ - -.ui.fluid.buttons, -.ui.fluid.button { - width: 100%; -} - -.ui.fluid.button { - display: block; -} - -.ui.two.buttons { - width: 100%; -} - -.ui.two.buttons > .button { - width: 50%; -} - -.ui.three.buttons { - width: 100%; -} - -.ui.three.buttons > .button { - width: 33.333%; -} - -.ui.four.buttons { - width: 100%; -} - -.ui.four.buttons > .button { - width: 25%; -} - -.ui.five.buttons { - width: 100%; -} - -.ui.five.buttons > .button { - width: 20%; -} - -.ui.six.buttons { - width: 100%; -} - -.ui.six.buttons > .button { - width: 16.666%; -} - -.ui.seven.buttons { - width: 100%; -} - -.ui.seven.buttons > .button { - width: 14.285%; -} - -.ui.eight.buttons { - width: 100%; -} - -.ui.eight.buttons > .button { - width: 12.5%; -} - -.ui.nine.buttons { - width: 100%; -} - -.ui.nine.buttons > .button { - width: 11.11%; -} - -.ui.ten.buttons { - width: 100%; -} - -.ui.ten.buttons > .button { - width: 10%; -} - -.ui.eleven.buttons { - width: 100%; -} - -.ui.eleven.buttons > .button { - width: 9.09%; -} - -.ui.twelve.buttons { - width: 100%; -} - -.ui.twelve.buttons > .button { - width: 8.3333%; -} - -/* Fluid Vertical Buttons */ - -.ui.fluid.vertical.buttons, -.ui.fluid.vertical.buttons > .button { - display: flex; - width: auto; - justify-content: center; -} - -.ui.two.vertical.buttons > .button { - height: 50%; -} - -.ui.three.vertical.buttons > .button { - height: 33.333%; -} - -.ui.four.vertical.buttons > .button { - height: 25%; -} - -.ui.five.vertical.buttons > .button { - height: 20%; -} - -.ui.six.vertical.buttons > .button { - height: 16.666%; -} - -.ui.seven.vertical.buttons > .button { - height: 14.285%; -} - -.ui.eight.vertical.buttons > .button { - height: 12.5%; -} - -.ui.nine.vertical.buttons > .button { - height: 11.11%; -} - -.ui.ten.vertical.buttons > .button { - height: 10%; -} - -.ui.eleven.vertical.buttons > .button { - height: 9.09%; -} - -.ui.twelve.vertical.buttons > .button { - height: 8.3333%; -} - -/* ------------------- - Colors --------------------- */ - -.ui.primary.buttons .button, -.ui.primary.button { - background-color: #2185d0; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.primary.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.primary.buttons .button:hover, -.ui.primary.button:hover { - background-color: #1678c2; - color: #fff; - text-shadow: none; -} - -.ui.primary.buttons .button:focus, -.ui.primary.button:focus { - background-color: #0d71bb; - color: #fff; - text-shadow: none; -} - -.ui.primary.buttons .button:active, -.ui.primary.button:active { - background-color: #1a69a4; - color: #fff; - text-shadow: none; -} - -.ui.primary.buttons .active.button, -.ui.primary.buttons .active.button:active, -.ui.primary.active.button, -.ui.primary.button .active.button:active { - background-color: #1279c6; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.primary.buttons .button, -.ui.basic.primary.button { - background: transparent; - box-shadow: 0 0 0 1px #2185d0 inset; - color: #2185d0; -} - -.ui.basic.primary.buttons .button:hover, -.ui.basic.primary.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #1678c2 inset; - color: #1678c2; -} - -.ui.basic.primary.buttons .button:focus, -.ui.basic.primary.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #0d71bb inset; - color: #1678c2; -} - -.ui.basic.primary.buttons .active.button, -.ui.basic.primary.active.button { - background: transparent; - box-shadow: 0 0 0 1px #1279c6 inset; - color: #1a69a4; -} - -.ui.basic.primary.buttons .button:active, -.ui.basic.primary.button:active { - box-shadow: 0 0 0 1px #1a69a4 inset; - color: #1a69a4; -} - -/* Inverted */ - -.ui.inverted.primary.buttons .button, -.ui.inverted.primary.button { - background-color: transparent; - box-shadow: 0 0 0 2px #54c8ff inset; - color: #54c8ff; -} - -.ui.inverted.primary.buttons .button:hover, -.ui.inverted.primary.button:hover, -.ui.inverted.primary.buttons .button:focus, -.ui.inverted.primary.button:focus, -.ui.inverted.primary.buttons .button.active, -.ui.inverted.primary.button.active, -.ui.inverted.primary.buttons .button:active, -.ui.inverted.primary.button:active { - box-shadow: none; - color: #fff; -} - -.ui.inverted.primary.buttons .button:hover, -.ui.inverted.primary.button:hover { - background-color: #21b8ff; -} - -.ui.inverted.primary.buttons .button:focus, -.ui.inverted.primary.button:focus { - background-color: #2bbbff; -} - -.ui.inverted.primary.buttons .active.button, -.ui.inverted.primary.active.button { - background-color: #3ac0ff; -} - -.ui.inverted.primary.buttons .button:active, -.ui.inverted.primary.button:active { - background-color: #21b8ff; -} - -/* Inverted Basic */ - -.ui.inverted.primary.basic.buttons .button, -.ui.inverted.primary.buttons .basic.button, -.ui.inverted.primary.basic.button { - background-color: transparent; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; - color: #fff; -} - -.ui.inverted.primary.basic.buttons .button:hover, -.ui.inverted.primary.buttons .basic.button:hover, -.ui.inverted.primary.basic.button:hover { - box-shadow: 0 0 0 2px #21b8ff inset; - color: #54c8ff; -} - -.ui.inverted.primary.basic.buttons .button:focus, -.ui.inverted.primary.basic.buttons .button:focus, -.ui.inverted.primary.basic.button:focus { - box-shadow: 0 0 0 2px #2bbbff inset; - color: #54c8ff; -} - -.ui.inverted.primary.basic.buttons .active.button, -.ui.inverted.primary.buttons .basic.active.button, -.ui.inverted.primary.basic.active.button { - box-shadow: 0 0 0 2px #3ac0ff inset; - color: #54c8ff; -} - -.ui.inverted.primary.basic.buttons .button:active, -.ui.inverted.primary.buttons .basic.button:active, -.ui.inverted.primary.basic.button:active { - box-shadow: 0 0 0 2px #21b8ff inset; - color: #54c8ff; -} - -/* Tertiary */ - -.ui.tertiary.primary.buttons .button, -.ui.tertiary.primary.buttons .tertiary.button, -.ui.tertiary.primary.button { - background: transparent; - box-shadow: none; - color: #2185d0; -} - -.ui.tertiary.primary.buttons .button:hover, -.ui.tertiary.primary.buttons button:hover, -.ui.tertiary.primary.button:hover { - box-shadow: inset 0 -0.2em 0 #2b75ac; - color: #2b75ac; -} - -.ui.tertiary.primary.buttons .button:focus, -.ui.tertiary.primary.buttons .tertiary.button:focus, -.ui.tertiary.primary.button:focus { - box-shadow: inset 0 -0.2em 0 #216ea7; - color: #216ea7; -} - -.ui.tertiary.primary.buttons .active.button, -.ui.tertiary.primary.buttons .tertiary.active.button, -.ui.tertiary.primary.active.button, -.ui.tertiary.primary.buttons .button:active, -.ui.tertiary.primary.buttons .tertiary.button:active, -.ui.tertiary.primary.button:active { - box-shadow: inset 0 -0.2em 0 #007bd8; - color: #1279c6; -} - -.ui.secondary.buttons .button, -.ui.secondary.button { - background-color: #1b1c1d; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.secondary.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.secondary.buttons .button:hover, -.ui.secondary.button:hover { - background-color: #27292a; - color: #fff; - text-shadow: none; -} - -.ui.secondary.buttons .button:focus, -.ui.secondary.button:focus { - background-color: #2e3032; - color: #fff; - text-shadow: none; -} - -.ui.secondary.buttons .button:active, -.ui.secondary.button:active { - background-color: #343637; - color: #fff; - text-shadow: none; -} - -.ui.secondary.buttons .active.button, -.ui.secondary.buttons .active.button:active, -.ui.secondary.active.button, -.ui.secondary.button .active.button:active { - background-color: #27292a; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.secondary.buttons .button, -.ui.basic.secondary.button { - background: transparent; - box-shadow: 0 0 0 1px #1b1c1d inset; - color: #1b1c1d; -} - -.ui.basic.secondary.buttons .button:hover, -.ui.basic.secondary.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #27292a inset; - color: #27292a; -} - -.ui.basic.secondary.buttons .button:focus, -.ui.basic.secondary.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #2e3032 inset; - color: #27292a; -} - -.ui.basic.secondary.buttons .active.button, -.ui.basic.secondary.active.button { - background: transparent; - box-shadow: 0 0 0 1px #27292a inset; - color: #343637; -} - -.ui.basic.secondary.buttons .button:active, -.ui.basic.secondary.button:active { - box-shadow: 0 0 0 1px #343637 inset; - color: #343637; -} - -/* Inverted */ - -.ui.inverted.secondary.buttons .button, -.ui.inverted.secondary.button { - background-color: transparent; - box-shadow: 0 0 0 2px #545454 inset; - color: #545454; -} - -.ui.inverted.secondary.buttons .button:hover, -.ui.inverted.secondary.button:hover, -.ui.inverted.secondary.buttons .button:focus, -.ui.inverted.secondary.button:focus, -.ui.inverted.secondary.buttons .button.active, -.ui.inverted.secondary.button.active, -.ui.inverted.secondary.buttons .button:active, -.ui.inverted.secondary.button:active { - box-shadow: none; - color: #fff; -} - -.ui.inverted.secondary.buttons .button:hover, -.ui.inverted.secondary.button:hover { - background-color: #6e6e6e; -} - -.ui.inverted.secondary.buttons .button:focus, -.ui.inverted.secondary.button:focus { - background-color: #686868; -} - -.ui.inverted.secondary.buttons .active.button, -.ui.inverted.secondary.active.button { - background-color: #616161; -} - -.ui.inverted.secondary.buttons .button:active, -.ui.inverted.secondary.button:active { - background-color: #6e6e6e; -} - -/* Inverted Basic */ - -.ui.inverted.secondary.basic.buttons .button, -.ui.inverted.secondary.buttons .basic.button, -.ui.inverted.secondary.basic.button { - background-color: transparent; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; - color: #fff; -} - -.ui.inverted.secondary.basic.buttons .button:hover, -.ui.inverted.secondary.buttons .basic.button:hover, -.ui.inverted.secondary.basic.button:hover { - box-shadow: 0 0 0 2px #6e6e6e inset; - color: #545454; -} - -.ui.inverted.secondary.basic.buttons .button:focus, -.ui.inverted.secondary.basic.buttons .button:focus, -.ui.inverted.secondary.basic.button:focus { - box-shadow: 0 0 0 2px #686868 inset; - color: #545454; -} - -.ui.inverted.secondary.basic.buttons .active.button, -.ui.inverted.secondary.buttons .basic.active.button, -.ui.inverted.secondary.basic.active.button { - box-shadow: 0 0 0 2px #616161 inset; - color: #545454; -} - -.ui.inverted.secondary.basic.buttons .button:active, -.ui.inverted.secondary.buttons .basic.button:active, -.ui.inverted.secondary.basic.button:active { - box-shadow: 0 0 0 2px #6e6e6e inset; - color: #545454; -} - -/* Tertiary */ - -.ui.tertiary.secondary.buttons .button, -.ui.tertiary.secondary.buttons .tertiary.button, -.ui.tertiary.secondary.button { - background: transparent; - box-shadow: none; - color: #1b1c1d; -} - -.ui.tertiary.secondary.buttons .button:hover, -.ui.tertiary.secondary.buttons button:hover, -.ui.tertiary.secondary.button:hover { - box-shadow: inset 0 -0.2em 0 #292929; - color: #292929; -} - -.ui.tertiary.secondary.buttons .button:focus, -.ui.tertiary.secondary.buttons .tertiary.button:focus, -.ui.tertiary.secondary.button:focus { - box-shadow: inset 0 -0.2em 0 #303030; - color: #303030; -} - -.ui.tertiary.secondary.buttons .active.button, -.ui.tertiary.secondary.buttons .tertiary.active.button, -.ui.tertiary.secondary.active.button, -.ui.tertiary.secondary.buttons .button:active, -.ui.tertiary.secondary.buttons .tertiary.button:active, -.ui.tertiary.secondary.button:active { - box-shadow: inset 0 -0.2em 0 #1f2933; - color: #27292a; -} - -.ui.red.buttons .button, -.ui.red.button { - background-color: #db2828; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.red.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.red.buttons .button:hover, -.ui.red.button:hover { - background-color: #d01919; - color: #fff; - text-shadow: none; -} - -.ui.red.buttons .button:focus, -.ui.red.button:focus { - background-color: #ca1010; - color: #fff; - text-shadow: none; -} - -.ui.red.buttons .button:active, -.ui.red.button:active { - background-color: #b21e1e; - color: #fff; - text-shadow: none; -} - -.ui.red.buttons .active.button, -.ui.red.buttons .active.button:active, -.ui.red.active.button, -.ui.red.button .active.button:active { - background-color: #d41515; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.red.buttons .button, -.ui.basic.red.button { - background: transparent; - box-shadow: 0 0 0 1px #db2828 inset; - color: #db2828; -} - -.ui.basic.red.buttons .button:hover, -.ui.basic.red.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #d01919 inset; - color: #d01919; -} - -.ui.basic.red.buttons .button:focus, -.ui.basic.red.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #ca1010 inset; - color: #d01919; -} - -.ui.basic.red.buttons .active.button, -.ui.basic.red.active.button { - background: transparent; - box-shadow: 0 0 0 1px #d41515 inset; - color: #b21e1e; -} - -.ui.basic.red.buttons .button:active, -.ui.basic.red.button:active { - box-shadow: 0 0 0 1px #b21e1e inset; - color: #b21e1e; -} - -/* Inverted */ - -.ui.inverted.red.buttons .button, -.ui.inverted.red.button { - background-color: transparent; - box-shadow: 0 0 0 2px #ff695e inset; - color: #ff695e; -} - -.ui.inverted.red.buttons .button:hover, -.ui.inverted.red.button:hover, -.ui.inverted.red.buttons .button:focus, -.ui.inverted.red.button:focus, -.ui.inverted.red.buttons .button.active, -.ui.inverted.red.button.active, -.ui.inverted.red.buttons .button:active, -.ui.inverted.red.button:active { - box-shadow: none; - color: #fff; -} - -.ui.inverted.red.buttons .button:hover, -.ui.inverted.red.button:hover { - background-color: #ff392b; -} - -.ui.inverted.red.buttons .button:focus, -.ui.inverted.red.button:focus { - background-color: #ff4335; -} - -.ui.inverted.red.buttons .active.button, -.ui.inverted.red.active.button { - background-color: #ff5144; -} - -.ui.inverted.red.buttons .button:active, -.ui.inverted.red.button:active { - background-color: #ff392b; -} - -/* Inverted Basic */ - -.ui.inverted.red.basic.buttons .button, -.ui.inverted.red.buttons .basic.button, -.ui.inverted.red.basic.button { - background-color: transparent; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; - color: #fff; -} - -.ui.inverted.red.basic.buttons .button:hover, -.ui.inverted.red.buttons .basic.button:hover, -.ui.inverted.red.basic.button:hover { - box-shadow: 0 0 0 2px #ff392b inset; - color: #ff695e; -} - -.ui.inverted.red.basic.buttons .button:focus, -.ui.inverted.red.basic.buttons .button:focus, -.ui.inverted.red.basic.button:focus { - box-shadow: 0 0 0 2px #ff4335 inset; - color: #ff695e; -} - -.ui.inverted.red.basic.buttons .active.button, -.ui.inverted.red.buttons .basic.active.button, -.ui.inverted.red.basic.active.button { - box-shadow: 0 0 0 2px #ff5144 inset; - color: #ff695e; -} - -.ui.inverted.red.basic.buttons .button:active, -.ui.inverted.red.buttons .basic.button:active, -.ui.inverted.red.basic.button:active { - box-shadow: 0 0 0 2px #ff392b inset; - color: #ff695e; -} - -/* Tertiary */ - -.ui.tertiary.red.buttons .button, -.ui.tertiary.red.buttons .tertiary.button, -.ui.tertiary.red.button { - background: transparent; - box-shadow: none; - color: #db2828; -} - -.ui.tertiary.red.buttons .button:hover, -.ui.tertiary.red.buttons button:hover, -.ui.tertiary.red.button:hover { - box-shadow: inset 0 -0.2em 0 #b93131; - color: #b93131; -} - -.ui.tertiary.red.buttons .button:focus, -.ui.tertiary.red.buttons .tertiary.button:focus, -.ui.tertiary.red.button:focus { - box-shadow: inset 0 -0.2em 0 #b52626; - color: #b52626; -} - -.ui.tertiary.red.buttons .active.button, -.ui.tertiary.red.buttons .tertiary.active.button, -.ui.tertiary.red.active.button, -.ui.tertiary.red.buttons .button:active, -.ui.tertiary.red.buttons .tertiary.button:active, -.ui.tertiary.red.button:active { - box-shadow: inset 0 -0.2em 0 #ea0000; - color: #d41515; -} - -.ui.orange.buttons .button, -.ui.orange.button { - background-color: #f2711c; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.orange.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.orange.buttons .button:hover, -.ui.orange.button:hover { - background-color: #f26202; - color: #fff; - text-shadow: none; -} - -.ui.orange.buttons .button:focus, -.ui.orange.button:focus { - background-color: #e55b00; - color: #fff; - text-shadow: none; -} - -.ui.orange.buttons .button:active, -.ui.orange.button:active { - background-color: #cf590c; - color: #fff; - text-shadow: none; -} - -.ui.orange.buttons .active.button, -.ui.orange.buttons .active.button:active, -.ui.orange.active.button, -.ui.orange.button .active.button:active { - background-color: #f56100; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.orange.buttons .button, -.ui.basic.orange.button { - background: transparent; - box-shadow: 0 0 0 1px #f2711c inset; - color: #f2711c; -} - -.ui.basic.orange.buttons .button:hover, -.ui.basic.orange.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #f26202 inset; - color: #f26202; -} - -.ui.basic.orange.buttons .button:focus, -.ui.basic.orange.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #e55b00 inset; - color: #f26202; -} - -.ui.basic.orange.buttons .active.button, -.ui.basic.orange.active.button { - background: transparent; - box-shadow: 0 0 0 1px #f56100 inset; - color: #cf590c; -} - -.ui.basic.orange.buttons .button:active, -.ui.basic.orange.button:active { - box-shadow: 0 0 0 1px #cf590c inset; - color: #cf590c; -} - -/* Inverted */ - -.ui.inverted.orange.buttons .button, -.ui.inverted.orange.button { - background-color: transparent; - box-shadow: 0 0 0 2px #ff851b inset; - color: #ff851b; -} - -.ui.inverted.orange.buttons .button:hover, -.ui.inverted.orange.button:hover, -.ui.inverted.orange.buttons .button:focus, -.ui.inverted.orange.button:focus, -.ui.inverted.orange.buttons .button.active, -.ui.inverted.orange.button.active, -.ui.inverted.orange.buttons .button:active, -.ui.inverted.orange.button:active { - box-shadow: none; - color: #fff; -} - -.ui.inverted.orange.buttons .button:hover, -.ui.inverted.orange.button:hover { - background-color: #e76b00; -} - -.ui.inverted.orange.buttons .button:focus, -.ui.inverted.orange.button:focus { - background-color: #f17000; -} - -.ui.inverted.orange.buttons .active.button, -.ui.inverted.orange.active.button { - background-color: #ff7701; -} - -.ui.inverted.orange.buttons .button:active, -.ui.inverted.orange.button:active { - background-color: #e76b00; -} - -/* Inverted Basic */ - -.ui.inverted.orange.basic.buttons .button, -.ui.inverted.orange.buttons .basic.button, -.ui.inverted.orange.basic.button { - background-color: transparent; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; - color: #fff; -} - -.ui.inverted.orange.basic.buttons .button:hover, -.ui.inverted.orange.buttons .basic.button:hover, -.ui.inverted.orange.basic.button:hover { - box-shadow: 0 0 0 2px #e76b00 inset; - color: #ff851b; -} - -.ui.inverted.orange.basic.buttons .button:focus, -.ui.inverted.orange.basic.buttons .button:focus, -.ui.inverted.orange.basic.button:focus { - box-shadow: 0 0 0 2px #f17000 inset; - color: #ff851b; -} - -.ui.inverted.orange.basic.buttons .active.button, -.ui.inverted.orange.buttons .basic.active.button, -.ui.inverted.orange.basic.active.button { - box-shadow: 0 0 0 2px #ff7701 inset; - color: #ff851b; -} - -.ui.inverted.orange.basic.buttons .button:active, -.ui.inverted.orange.buttons .basic.button:active, -.ui.inverted.orange.basic.button:active { - box-shadow: 0 0 0 2px #e76b00 inset; - color: #ff851b; -} - -/* Tertiary */ - -.ui.tertiary.orange.buttons .button, -.ui.tertiary.orange.buttons .tertiary.button, -.ui.tertiary.orange.button { - background: transparent; - box-shadow: none; - color: #f2711c; -} - -.ui.tertiary.orange.buttons .button:hover, -.ui.tertiary.orange.buttons button:hover, -.ui.tertiary.orange.button:hover { - box-shadow: inset 0 -0.2em 0 #da671b; - color: #da671b; -} - -.ui.tertiary.orange.buttons .button:focus, -.ui.tertiary.orange.buttons .tertiary.button:focus, -.ui.tertiary.orange.button:focus { - box-shadow: inset 0 -0.2em 0 #ce6017; - color: #ce6017; -} - -.ui.tertiary.orange.buttons .active.button, -.ui.tertiary.orange.buttons .tertiary.active.button, -.ui.tertiary.orange.active.button, -.ui.tertiary.orange.buttons .button:active, -.ui.tertiary.orange.buttons .tertiary.button:active, -.ui.tertiary.orange.button:active { - box-shadow: inset 0 -0.2em 0 #f56100; - color: #f56100; -} - -.ui.yellow.buttons .button, -.ui.yellow.button { - background-color: #fbbd08; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.yellow.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.yellow.buttons .button:hover, -.ui.yellow.button:hover { - background-color: #eaae00; - color: #fff; - text-shadow: none; -} - -.ui.yellow.buttons .button:focus, -.ui.yellow.button:focus { - background-color: #daa300; - color: #fff; - text-shadow: none; -} - -.ui.yellow.buttons .button:active, -.ui.yellow.button:active { - background-color: #cd9903; - color: #fff; - text-shadow: none; -} - -.ui.yellow.buttons .active.button, -.ui.yellow.buttons .active.button:active, -.ui.yellow.active.button, -.ui.yellow.button .active.button:active { - background-color: #eaae00; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.yellow.buttons .button, -.ui.basic.yellow.button { - background: transparent; - box-shadow: 0 0 0 1px #fbbd08 inset; - color: #fbbd08; -} - -.ui.basic.yellow.buttons .button:hover, -.ui.basic.yellow.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #eaae00 inset; - color: #eaae00; -} - -.ui.basic.yellow.buttons .button:focus, -.ui.basic.yellow.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #daa300 inset; - color: #eaae00; -} - -.ui.basic.yellow.buttons .active.button, -.ui.basic.yellow.active.button { - background: transparent; - box-shadow: 0 0 0 1px #eaae00 inset; - color: #cd9903; -} - -.ui.basic.yellow.buttons .button:active, -.ui.basic.yellow.button:active { - box-shadow: 0 0 0 1px #cd9903 inset; - color: #cd9903; -} - -/* Inverted */ - -.ui.inverted.yellow.buttons .button, -.ui.inverted.yellow.button { - background-color: transparent; - box-shadow: 0 0 0 2px #ffe21f inset; - color: #ffe21f; -} - -.ui.inverted.yellow.buttons .button:hover, -.ui.inverted.yellow.button:hover, -.ui.inverted.yellow.buttons .button:focus, -.ui.inverted.yellow.button:focus, -.ui.inverted.yellow.buttons .button.active, -.ui.inverted.yellow.button.active, -.ui.inverted.yellow.buttons .button:active, -.ui.inverted.yellow.button:active { - box-shadow: none; - color: rgba(0, 0, 0, 0.6); -} - -.ui.inverted.yellow.buttons .button:hover, -.ui.inverted.yellow.button:hover { - background-color: #ebcd00; -} - -.ui.inverted.yellow.buttons .button:focus, -.ui.inverted.yellow.button:focus { - background-color: #f5d500; -} - -.ui.inverted.yellow.buttons .active.button, -.ui.inverted.yellow.active.button { - background-color: #ffdf05; -} - -.ui.inverted.yellow.buttons .button:active, -.ui.inverted.yellow.button:active { - background-color: #ebcd00; -} - -/* Inverted Basic */ - -.ui.inverted.yellow.basic.buttons .button, -.ui.inverted.yellow.buttons .basic.button, -.ui.inverted.yellow.basic.button { - background-color: transparent; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; - color: #fff; -} - -.ui.inverted.yellow.basic.buttons .button:hover, -.ui.inverted.yellow.buttons .basic.button:hover, -.ui.inverted.yellow.basic.button:hover { - box-shadow: 0 0 0 2px #ebcd00 inset; - color: #ffe21f; -} - -.ui.inverted.yellow.basic.buttons .button:focus, -.ui.inverted.yellow.basic.buttons .button:focus, -.ui.inverted.yellow.basic.button:focus { - box-shadow: 0 0 0 2px #f5d500 inset; - color: #ffe21f; -} - -.ui.inverted.yellow.basic.buttons .active.button, -.ui.inverted.yellow.buttons .basic.active.button, -.ui.inverted.yellow.basic.active.button { - box-shadow: 0 0 0 2px #ffdf05 inset; - color: #ffe21f; -} - -.ui.inverted.yellow.basic.buttons .button:active, -.ui.inverted.yellow.buttons .basic.button:active, -.ui.inverted.yellow.basic.button:active { - box-shadow: 0 0 0 2px #ebcd00 inset; - color: #ffe21f; -} - -/* Tertiary */ - -.ui.tertiary.yellow.buttons .button, -.ui.tertiary.yellow.buttons .tertiary.button, -.ui.tertiary.yellow.button { - background: transparent; - box-shadow: none; - color: #fbbd08; -} - -.ui.tertiary.yellow.buttons .button:hover, -.ui.tertiary.yellow.buttons button:hover, -.ui.tertiary.yellow.button:hover { - box-shadow: inset 0 -0.2em 0 #d2a217; - color: #d2a217; -} - -.ui.tertiary.yellow.buttons .button:focus, -.ui.tertiary.yellow.buttons .tertiary.button:focus, -.ui.tertiary.yellow.button:focus { - box-shadow: inset 0 -0.2em 0 #c49816; - color: #c49816; -} - -.ui.tertiary.yellow.buttons .active.button, -.ui.tertiary.yellow.buttons .tertiary.active.button, -.ui.tertiary.yellow.active.button, -.ui.tertiary.yellow.buttons .button:active, -.ui.tertiary.yellow.buttons .tertiary.button:active, -.ui.tertiary.yellow.button:active { - box-shadow: inset 0 -0.2em 0 #eaae00; - color: #eaae00; -} - -.ui.olive.buttons .button, -.ui.olive.button { - background-color: #b5cc18; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.olive.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.olive.buttons .button:hover, -.ui.olive.button:hover { - background-color: #a7bd0d; - color: #fff; - text-shadow: none; -} - -.ui.olive.buttons .button:focus, -.ui.olive.button:focus { - background-color: #a0b605; - color: #fff; - text-shadow: none; -} - -.ui.olive.buttons .button:active, -.ui.olive.button:active { - background-color: #8d9e13; - color: #fff; - text-shadow: none; -} - -.ui.olive.buttons .active.button, -.ui.olive.buttons .active.button:active, -.ui.olive.active.button, -.ui.olive.button .active.button:active { - background-color: #aac109; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.olive.buttons .button, -.ui.basic.olive.button { - background: transparent; - box-shadow: 0 0 0 1px #b5cc18 inset; - color: #b5cc18; -} - -.ui.basic.olive.buttons .button:hover, -.ui.basic.olive.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #a7bd0d inset; - color: #a7bd0d; -} - -.ui.basic.olive.buttons .button:focus, -.ui.basic.olive.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #a0b605 inset; - color: #a7bd0d; -} - -.ui.basic.olive.buttons .active.button, -.ui.basic.olive.active.button { - background: transparent; - box-shadow: 0 0 0 1px #aac109 inset; - color: #8d9e13; -} - -.ui.basic.olive.buttons .button:active, -.ui.basic.olive.button:active { - box-shadow: 0 0 0 1px #8d9e13 inset; - color: #8d9e13; -} - -/* Inverted */ - -.ui.inverted.olive.buttons .button, -.ui.inverted.olive.button { - background-color: transparent; - box-shadow: 0 0 0 2px #d9e778 inset; - color: #d9e778; -} - -.ui.inverted.olive.buttons .button:hover, -.ui.inverted.olive.button:hover, -.ui.inverted.olive.buttons .button:focus, -.ui.inverted.olive.button:focus, -.ui.inverted.olive.buttons .button.active, -.ui.inverted.olive.button.active, -.ui.inverted.olive.buttons .button:active, -.ui.inverted.olive.button:active { - box-shadow: none; - color: rgba(0, 0, 0, 0.6); -} - -.ui.inverted.olive.buttons .button:hover, -.ui.inverted.olive.button:hover { - background-color: #d2e745; -} - -.ui.inverted.olive.buttons .button:focus, -.ui.inverted.olive.button:focus { - background-color: #daef47; -} - -.ui.inverted.olive.buttons .active.button, -.ui.inverted.olive.active.button { - background-color: #daed59; -} - -.ui.inverted.olive.buttons .button:active, -.ui.inverted.olive.button:active { - background-color: #cddf4d; -} - -/* Inverted Basic */ - -.ui.inverted.olive.basic.buttons .button, -.ui.inverted.olive.buttons .basic.button, -.ui.inverted.olive.basic.button { - background-color: transparent; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; - color: #fff; -} - -.ui.inverted.olive.basic.buttons .button:hover, -.ui.inverted.olive.buttons .basic.button:hover, -.ui.inverted.olive.basic.button:hover { - box-shadow: 0 0 0 2px #d2e745 inset; - color: #d9e778; -} - -.ui.inverted.olive.basic.buttons .button:focus, -.ui.inverted.olive.basic.buttons .button:focus, -.ui.inverted.olive.basic.button:focus { - box-shadow: 0 0 0 2px #daef47 inset; - color: #d9e778; -} - -.ui.inverted.olive.basic.buttons .active.button, -.ui.inverted.olive.buttons .basic.active.button, -.ui.inverted.olive.basic.active.button { - box-shadow: 0 0 0 2px #daed59 inset; - color: #d9e778; -} - -.ui.inverted.olive.basic.buttons .button:active, -.ui.inverted.olive.buttons .basic.button:active, -.ui.inverted.olive.basic.button:active { - box-shadow: 0 0 0 2px #cddf4d inset; - color: #d9e778; -} - -/* Tertiary */ - -.ui.tertiary.olive.buttons .button, -.ui.tertiary.olive.buttons .tertiary.button, -.ui.tertiary.olive.button { - background: transparent; - box-shadow: none; - color: #b5cc18; -} - -.ui.tertiary.olive.buttons .button:hover, -.ui.tertiary.olive.buttons button:hover, -.ui.tertiary.olive.button:hover { - box-shadow: inset 0 -0.2em 0 #98a922; - color: #98a922; -} - -.ui.tertiary.olive.buttons .button:focus, -.ui.tertiary.olive.buttons .tertiary.button:focus, -.ui.tertiary.olive.button:focus { - box-shadow: inset 0 -0.2em 0 #92a418; - color: #92a418; -} - -.ui.tertiary.olive.buttons .active.button, -.ui.tertiary.olive.buttons .tertiary.active.button, -.ui.tertiary.olive.active.button, -.ui.tertiary.olive.buttons .button:active, -.ui.tertiary.olive.buttons .tertiary.button:active, -.ui.tertiary.olive.button:active { - box-shadow: inset 0 -0.2em 0 #b1cb00; - color: #aac109; -} - -.ui.green.buttons .button, -.ui.green.button { - background-color: #21ba45; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.green.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.green.buttons .button:hover, -.ui.green.button:hover { - background-color: #16ab39; - color: #fff; - text-shadow: none; -} - -.ui.green.buttons .button:focus, -.ui.green.button:focus { - background-color: #0ea432; - color: #fff; - text-shadow: none; -} - -.ui.green.buttons .button:active, -.ui.green.button:active { - background-color: #198f35; - color: #fff; - text-shadow: none; -} - -.ui.green.buttons .active.button, -.ui.green.buttons .active.button:active, -.ui.green.active.button, -.ui.green.button .active.button:active { - background-color: #13ae38; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.green.buttons .button, -.ui.basic.green.button { - background: transparent; - box-shadow: 0 0 0 1px #21ba45 inset; - color: #21ba45; -} - -.ui.basic.green.buttons .button:hover, -.ui.basic.green.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #16ab39 inset; - color: #16ab39; -} - -.ui.basic.green.buttons .button:focus, -.ui.basic.green.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #0ea432 inset; - color: #16ab39; -} - -.ui.basic.green.buttons .active.button, -.ui.basic.green.active.button { - background: transparent; - box-shadow: 0 0 0 1px #13ae38 inset; - color: #198f35; -} - -.ui.basic.green.buttons .button:active, -.ui.basic.green.button:active { - box-shadow: 0 0 0 1px #198f35 inset; - color: #198f35; -} - -/* Inverted */ - -.ui.inverted.green.buttons .button, -.ui.inverted.green.button { - background-color: transparent; - box-shadow: 0 0 0 2px #2ecc40 inset; - color: #2ecc40; -} - -.ui.inverted.green.buttons .button:hover, -.ui.inverted.green.button:hover, -.ui.inverted.green.buttons .button:focus, -.ui.inverted.green.button:focus, -.ui.inverted.green.buttons .button.active, -.ui.inverted.green.button.active, -.ui.inverted.green.buttons .button:active, -.ui.inverted.green.button:active { - box-shadow: none; - color: #fff; -} - -.ui.inverted.green.buttons .button:hover, -.ui.inverted.green.button:hover { - background-color: #1ea92e; -} - -.ui.inverted.green.buttons .button:focus, -.ui.inverted.green.button:focus { - background-color: #19b82b; -} - -.ui.inverted.green.buttons .active.button, -.ui.inverted.green.active.button { - background-color: #1fc231; -} - -.ui.inverted.green.buttons .button:active, -.ui.inverted.green.button:active { - background-color: #25a233; -} - -/* Inverted Basic */ - -.ui.inverted.green.basic.buttons .button, -.ui.inverted.green.buttons .basic.button, -.ui.inverted.green.basic.button { - background-color: transparent; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; - color: #fff; -} - -.ui.inverted.green.basic.buttons .button:hover, -.ui.inverted.green.buttons .basic.button:hover, -.ui.inverted.green.basic.button:hover { - box-shadow: 0 0 0 2px #1ea92e inset; - color: #2ecc40; -} - -.ui.inverted.green.basic.buttons .button:focus, -.ui.inverted.green.basic.buttons .button:focus, -.ui.inverted.green.basic.button:focus { - box-shadow: 0 0 0 2px #19b82b inset; - color: #2ecc40; -} - -.ui.inverted.green.basic.buttons .active.button, -.ui.inverted.green.buttons .basic.active.button, -.ui.inverted.green.basic.active.button { - box-shadow: 0 0 0 2px #1fc231 inset; - color: #2ecc40; -} - -.ui.inverted.green.basic.buttons .button:active, -.ui.inverted.green.buttons .basic.button:active, -.ui.inverted.green.basic.button:active { - box-shadow: 0 0 0 2px #25a233 inset; - color: #2ecc40; -} - -/* Tertiary */ - -.ui.tertiary.green.buttons .button, -.ui.tertiary.green.buttons .tertiary.button, -.ui.tertiary.green.button { - background: transparent; - box-shadow: none; - color: #21ba45; -} - -.ui.tertiary.green.buttons .button:hover, -.ui.tertiary.green.buttons button:hover, -.ui.tertiary.green.button:hover { - box-shadow: inset 0 -0.2em 0 #2a9844; - color: #2a9844; -} - -.ui.tertiary.green.buttons .button:focus, -.ui.tertiary.green.buttons .tertiary.button:focus, -.ui.tertiary.green.button:focus { - box-shadow: inset 0 -0.2em 0 #20923b; - color: #20923b; -} - -.ui.tertiary.green.buttons .active.button, -.ui.tertiary.green.buttons .tertiary.active.button, -.ui.tertiary.green.active.button, -.ui.tertiary.green.buttons .button:active, -.ui.tertiary.green.buttons .tertiary.button:active, -.ui.tertiary.green.button:active { - box-shadow: inset 0 -0.2em 0 #00c22e; - color: #13ae38; -} - -.ui.teal.buttons .button, -.ui.teal.button { - background-color: #00b5ad; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.teal.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.teal.buttons .button:hover, -.ui.teal.button:hover { - background-color: #009c95; - color: #fff; - text-shadow: none; -} - -.ui.teal.buttons .button:focus, -.ui.teal.button:focus { - background-color: #008c86; - color: #fff; - text-shadow: none; -} - -.ui.teal.buttons .button:active, -.ui.teal.button:active { - background-color: #00827c; - color: #fff; - text-shadow: none; -} - -.ui.teal.buttons .active.button, -.ui.teal.buttons .active.button:active, -.ui.teal.active.button, -.ui.teal.button .active.button:active { - background-color: #009c95; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.teal.buttons .button, -.ui.basic.teal.button { - background: transparent; - box-shadow: 0 0 0 1px #00b5ad inset; - color: #00b5ad; -} - -.ui.basic.teal.buttons .button:hover, -.ui.basic.teal.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #009c95 inset; - color: #009c95; -} - -.ui.basic.teal.buttons .button:focus, -.ui.basic.teal.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #008c86 inset; - color: #009c95; -} - -.ui.basic.teal.buttons .active.button, -.ui.basic.teal.active.button { - background: transparent; - box-shadow: 0 0 0 1px #009c95 inset; - color: #00827c; -} - -.ui.basic.teal.buttons .button:active, -.ui.basic.teal.button:active { - box-shadow: 0 0 0 1px #00827c inset; - color: #00827c; -} - -/* Inverted */ - -.ui.inverted.teal.buttons .button, -.ui.inverted.teal.button { - background-color: transparent; - box-shadow: 0 0 0 2px #6dffff inset; - color: #6dffff; -} - -.ui.inverted.teal.buttons .button:hover, -.ui.inverted.teal.button:hover, -.ui.inverted.teal.buttons .button:focus, -.ui.inverted.teal.button:focus, -.ui.inverted.teal.buttons .button.active, -.ui.inverted.teal.button.active, -.ui.inverted.teal.buttons .button:active, -.ui.inverted.teal.button:active { - box-shadow: none; - color: rgba(0, 0, 0, 0.6); -} - -.ui.inverted.teal.buttons .button:hover, -.ui.inverted.teal.button:hover { - background-color: #3affff; -} - -.ui.inverted.teal.buttons .button:focus, -.ui.inverted.teal.button:focus { - background-color: #44ffff; -} - -.ui.inverted.teal.buttons .active.button, -.ui.inverted.teal.active.button { - background-color: #54ffff; -} - -.ui.inverted.teal.buttons .button:active, -.ui.inverted.teal.button:active { - background-color: #3affff; -} - -/* Inverted Basic */ - -.ui.inverted.teal.basic.buttons .button, -.ui.inverted.teal.buttons .basic.button, -.ui.inverted.teal.basic.button { - background-color: transparent; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; - color: #fff; -} - -.ui.inverted.teal.basic.buttons .button:hover, -.ui.inverted.teal.buttons .basic.button:hover, -.ui.inverted.teal.basic.button:hover { - box-shadow: 0 0 0 2px #3affff inset; - color: #6dffff; -} - -.ui.inverted.teal.basic.buttons .button:focus, -.ui.inverted.teal.basic.buttons .button:focus, -.ui.inverted.teal.basic.button:focus { - box-shadow: 0 0 0 2px #44ffff inset; - color: #6dffff; -} - -.ui.inverted.teal.basic.buttons .active.button, -.ui.inverted.teal.buttons .basic.active.button, -.ui.inverted.teal.basic.active.button { - box-shadow: 0 0 0 2px #54ffff inset; - color: #6dffff; -} - -.ui.inverted.teal.basic.buttons .button:active, -.ui.inverted.teal.buttons .basic.button:active, -.ui.inverted.teal.basic.button:active { - box-shadow: 0 0 0 2px #3affff inset; - color: #6dffff; -} - -/* Tertiary */ - -.ui.tertiary.teal.buttons .button, -.ui.tertiary.teal.buttons .tertiary.button, -.ui.tertiary.teal.button { - background: transparent; - box-shadow: none; - color: #00b5ad; -} - -.ui.tertiary.teal.buttons .button:hover, -.ui.tertiary.teal.buttons button:hover, -.ui.tertiary.teal.button:hover { - box-shadow: inset 0 -0.2em 0 #108c86; - color: #108c86; -} - -.ui.tertiary.teal.buttons .button:focus, -.ui.tertiary.teal.buttons .tertiary.button:focus, -.ui.tertiary.teal.button:focus { - box-shadow: inset 0 -0.2em 0 #0e7e79; - color: #0e7e79; -} - -.ui.tertiary.teal.buttons .active.button, -.ui.tertiary.teal.buttons .tertiary.active.button, -.ui.tertiary.teal.active.button, -.ui.tertiary.teal.buttons .button:active, -.ui.tertiary.teal.buttons .tertiary.button:active, -.ui.tertiary.teal.button:active { - box-shadow: inset 0 -0.2em 0 #009c95; - color: #009c95; -} - -.ui.blue.buttons .button, -.ui.blue.button { - background-color: #2185d0; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.blue.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.blue.buttons .button:hover, -.ui.blue.button:hover { - background-color: #1678c2; - color: #fff; - text-shadow: none; -} - -.ui.blue.buttons .button:focus, -.ui.blue.button:focus { - background-color: #0d71bb; - color: #fff; - text-shadow: none; -} - -.ui.blue.buttons .button:active, -.ui.blue.button:active { - background-color: #1a69a4; - color: #fff; - text-shadow: none; -} - -.ui.blue.buttons .active.button, -.ui.blue.buttons .active.button:active, -.ui.blue.active.button, -.ui.blue.button .active.button:active { - background-color: #1279c6; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.blue.buttons .button, -.ui.basic.blue.button { - background: transparent; - box-shadow: 0 0 0 1px #2185d0 inset; - color: #2185d0; -} - -.ui.basic.blue.buttons .button:hover, -.ui.basic.blue.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #1678c2 inset; - color: #1678c2; -} - -.ui.basic.blue.buttons .button:focus, -.ui.basic.blue.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #0d71bb inset; - color: #1678c2; -} - -.ui.basic.blue.buttons .active.button, -.ui.basic.blue.active.button { - background: transparent; - box-shadow: 0 0 0 1px #1279c6 inset; - color: #1a69a4; -} - -.ui.basic.blue.buttons .button:active, -.ui.basic.blue.button:active { - box-shadow: 0 0 0 1px #1a69a4 inset; - color: #1a69a4; -} - -/* Inverted */ - -.ui.inverted.blue.buttons .button, -.ui.inverted.blue.button { - background-color: transparent; - box-shadow: 0 0 0 2px #54c8ff inset; - color: #54c8ff; -} - -.ui.inverted.blue.buttons .button:hover, -.ui.inverted.blue.button:hover, -.ui.inverted.blue.buttons .button:focus, -.ui.inverted.blue.button:focus, -.ui.inverted.blue.buttons .button.active, -.ui.inverted.blue.button.active, -.ui.inverted.blue.buttons .button:active, -.ui.inverted.blue.button:active { - box-shadow: none; - color: #fff; -} - -.ui.inverted.blue.buttons .button:hover, -.ui.inverted.blue.button:hover { - background-color: #21b8ff; -} - -.ui.inverted.blue.buttons .button:focus, -.ui.inverted.blue.button:focus { - background-color: #2bbbff; -} - -.ui.inverted.blue.buttons .active.button, -.ui.inverted.blue.active.button { - background-color: #3ac0ff; -} - -.ui.inverted.blue.buttons .button:active, -.ui.inverted.blue.button:active { - background-color: #21b8ff; -} - -/* Inverted Basic */ - -.ui.inverted.blue.basic.buttons .button, -.ui.inverted.blue.buttons .basic.button, -.ui.inverted.blue.basic.button { - background-color: transparent; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; - color: #fff; -} - -.ui.inverted.blue.basic.buttons .button:hover, -.ui.inverted.blue.buttons .basic.button:hover, -.ui.inverted.blue.basic.button:hover { - box-shadow: 0 0 0 2px #21b8ff inset; - color: #54c8ff; -} - -.ui.inverted.blue.basic.buttons .button:focus, -.ui.inverted.blue.basic.buttons .button:focus, -.ui.inverted.blue.basic.button:focus { - box-shadow: 0 0 0 2px #2bbbff inset; - color: #54c8ff; -} - -.ui.inverted.blue.basic.buttons .active.button, -.ui.inverted.blue.buttons .basic.active.button, -.ui.inverted.blue.basic.active.button { - box-shadow: 0 0 0 2px #3ac0ff inset; - color: #54c8ff; -} - -.ui.inverted.blue.basic.buttons .button:active, -.ui.inverted.blue.buttons .basic.button:active, -.ui.inverted.blue.basic.button:active { - box-shadow: 0 0 0 2px #21b8ff inset; - color: #54c8ff; -} - -/* Tertiary */ - -.ui.tertiary.blue.buttons .button, -.ui.tertiary.blue.buttons .tertiary.button, -.ui.tertiary.blue.button { - background: transparent; - box-shadow: none; - color: #2185d0; -} - -.ui.tertiary.blue.buttons .button:hover, -.ui.tertiary.blue.buttons button:hover, -.ui.tertiary.blue.button:hover { - box-shadow: inset 0 -0.2em 0 #2b75ac; - color: #2b75ac; -} - -.ui.tertiary.blue.buttons .button:focus, -.ui.tertiary.blue.buttons .tertiary.button:focus, -.ui.tertiary.blue.button:focus { - box-shadow: inset 0 -0.2em 0 #216ea7; - color: #216ea7; -} - -.ui.tertiary.blue.buttons .active.button, -.ui.tertiary.blue.buttons .tertiary.active.button, -.ui.tertiary.blue.active.button, -.ui.tertiary.blue.buttons .button:active, -.ui.tertiary.blue.buttons .tertiary.button:active, -.ui.tertiary.blue.button:active { - box-shadow: inset 0 -0.2em 0 #007bd8; - color: #1279c6; -} - -.ui.violet.buttons .button, -.ui.violet.button { - background-color: #6435c9; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.violet.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.violet.buttons .button:hover, -.ui.violet.button:hover { - background-color: #5829bb; - color: #fff; - text-shadow: none; -} - -.ui.violet.buttons .button:focus, -.ui.violet.button:focus { - background-color: #4f20b5; - color: #fff; - text-shadow: none; -} - -.ui.violet.buttons .button:active, -.ui.violet.button:active { - background-color: #502aa1; - color: #fff; - text-shadow: none; -} - -.ui.violet.buttons .active.button, -.ui.violet.buttons .active.button:active, -.ui.violet.active.button, -.ui.violet.button .active.button:active { - background-color: #5626bf; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.violet.buttons .button, -.ui.basic.violet.button { - background: transparent; - box-shadow: 0 0 0 1px #6435c9 inset; - color: #6435c9; -} - -.ui.basic.violet.buttons .button:hover, -.ui.basic.violet.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #5829bb inset; - color: #5829bb; -} - -.ui.basic.violet.buttons .button:focus, -.ui.basic.violet.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #4f20b5 inset; - color: #5829bb; -} - -.ui.basic.violet.buttons .active.button, -.ui.basic.violet.active.button { - background: transparent; - box-shadow: 0 0 0 1px #5626bf inset; - color: #502aa1; -} - -.ui.basic.violet.buttons .button:active, -.ui.basic.violet.button:active { - box-shadow: 0 0 0 1px #502aa1 inset; - color: #502aa1; -} - -/* Inverted */ - -.ui.inverted.violet.buttons .button, -.ui.inverted.violet.button { - background-color: transparent; - box-shadow: 0 0 0 2px #a291fb inset; - color: #a291fb; -} - -.ui.inverted.violet.buttons .button:hover, -.ui.inverted.violet.button:hover, -.ui.inverted.violet.buttons .button:focus, -.ui.inverted.violet.button:focus, -.ui.inverted.violet.buttons .button.active, -.ui.inverted.violet.button.active, -.ui.inverted.violet.buttons .button:active, -.ui.inverted.violet.button:active { - box-shadow: none; - color: #fff; -} - -.ui.inverted.violet.buttons .button:hover, -.ui.inverted.violet.button:hover { - background-color: #745aff; -} - -.ui.inverted.violet.buttons .button:focus, -.ui.inverted.violet.button:focus { - background-color: #7d64ff; -} - -.ui.inverted.violet.buttons .active.button, -.ui.inverted.violet.active.button { - background-color: #8a73ff; -} - -.ui.inverted.violet.buttons .button:active, -.ui.inverted.violet.button:active { - background-color: #7860f9; -} - -/* Inverted Basic */ - -.ui.inverted.violet.basic.buttons .button, -.ui.inverted.violet.buttons .basic.button, -.ui.inverted.violet.basic.button { - background-color: transparent; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; - color: #fff; -} - -.ui.inverted.violet.basic.buttons .button:hover, -.ui.inverted.violet.buttons .basic.button:hover, -.ui.inverted.violet.basic.button:hover { - box-shadow: 0 0 0 2px #745aff inset; - color: #a291fb; -} - -.ui.inverted.violet.basic.buttons .button:focus, -.ui.inverted.violet.basic.buttons .button:focus, -.ui.inverted.violet.basic.button:focus { - box-shadow: 0 0 0 2px #7d64ff inset; - color: #a291fb; -} - -.ui.inverted.violet.basic.buttons .active.button, -.ui.inverted.violet.buttons .basic.active.button, -.ui.inverted.violet.basic.active.button { - box-shadow: 0 0 0 2px #8a73ff inset; - color: #a291fb; -} - -.ui.inverted.violet.basic.buttons .button:active, -.ui.inverted.violet.buttons .basic.button:active, -.ui.inverted.violet.basic.button:active { - box-shadow: 0 0 0 2px #7860f9 inset; - color: #a291fb; -} - -/* Tertiary */ - -.ui.tertiary.violet.buttons .button, -.ui.tertiary.violet.buttons .tertiary.button, -.ui.tertiary.violet.button { - background: transparent; - box-shadow: none; - color: #6435c9; -} - -.ui.tertiary.violet.buttons .button:hover, -.ui.tertiary.violet.buttons button:hover, -.ui.tertiary.violet.button:hover { - box-shadow: inset 0 -0.2em 0 #6040a5; - color: #6040a5; -} - -.ui.tertiary.violet.buttons .button:focus, -.ui.tertiary.violet.buttons .tertiary.button:focus, -.ui.tertiary.violet.button:focus { - box-shadow: inset 0 -0.2em 0 #5735a0; - color: #5735a0; -} - -.ui.tertiary.violet.buttons .active.button, -.ui.tertiary.violet.buttons .tertiary.active.button, -.ui.tertiary.violet.active.button, -.ui.tertiary.violet.buttons .button:active, -.ui.tertiary.violet.buttons .tertiary.button:active, -.ui.tertiary.violet.button:active { - box-shadow: inset 0 -0.2em 0 #4e0fd6; - color: #5626bf; -} - -.ui.purple.buttons .button, -.ui.purple.button { - background-color: #a333c8; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.purple.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.purple.buttons .button:hover, -.ui.purple.button:hover { - background-color: #9627ba; - color: #fff; - text-shadow: none; -} - -.ui.purple.buttons .button:focus, -.ui.purple.button:focus { - background-color: #8f1eb4; - color: #fff; - text-shadow: none; -} - -.ui.purple.buttons .button:active, -.ui.purple.button:active { - background-color: #82299f; - color: #fff; - text-shadow: none; -} - -.ui.purple.buttons .active.button, -.ui.purple.buttons .active.button:active, -.ui.purple.active.button, -.ui.purple.button .active.button:active { - background-color: #9724be; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.purple.buttons .button, -.ui.basic.purple.button { - background: transparent; - box-shadow: 0 0 0 1px #a333c8 inset; - color: #a333c8; -} - -.ui.basic.purple.buttons .button:hover, -.ui.basic.purple.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #9627ba inset; - color: #9627ba; -} - -.ui.basic.purple.buttons .button:focus, -.ui.basic.purple.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #8f1eb4 inset; - color: #9627ba; -} - -.ui.basic.purple.buttons .active.button, -.ui.basic.purple.active.button { - background: transparent; - box-shadow: 0 0 0 1px #9724be inset; - color: #82299f; -} - -.ui.basic.purple.buttons .button:active, -.ui.basic.purple.button:active { - box-shadow: 0 0 0 1px #82299f inset; - color: #82299f; -} - -/* Inverted */ - -.ui.inverted.purple.buttons .button, -.ui.inverted.purple.button { - background-color: transparent; - box-shadow: 0 0 0 2px #dc73ff inset; - color: #dc73ff; -} - -.ui.inverted.purple.buttons .button:hover, -.ui.inverted.purple.button:hover, -.ui.inverted.purple.buttons .button:focus, -.ui.inverted.purple.button:focus, -.ui.inverted.purple.buttons .button.active, -.ui.inverted.purple.button.active, -.ui.inverted.purple.buttons .button:active, -.ui.inverted.purple.button:active { - box-shadow: none; - color: #fff; -} - -.ui.inverted.purple.buttons .button:hover, -.ui.inverted.purple.button:hover { - background-color: #cf40ff; -} - -.ui.inverted.purple.buttons .button:focus, -.ui.inverted.purple.button:focus { - background-color: #d24aff; -} - -.ui.inverted.purple.buttons .active.button, -.ui.inverted.purple.active.button { - background-color: #d65aff; -} - -.ui.inverted.purple.buttons .button:active, -.ui.inverted.purple.button:active { - background-color: #cf40ff; -} - -/* Inverted Basic */ - -.ui.inverted.purple.basic.buttons .button, -.ui.inverted.purple.buttons .basic.button, -.ui.inverted.purple.basic.button { - background-color: transparent; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; - color: #fff; -} - -.ui.inverted.purple.basic.buttons .button:hover, -.ui.inverted.purple.buttons .basic.button:hover, -.ui.inverted.purple.basic.button:hover { - box-shadow: 0 0 0 2px #cf40ff inset; - color: #dc73ff; -} - -.ui.inverted.purple.basic.buttons .button:focus, -.ui.inverted.purple.basic.buttons .button:focus, -.ui.inverted.purple.basic.button:focus { - box-shadow: 0 0 0 2px #d24aff inset; - color: #dc73ff; -} - -.ui.inverted.purple.basic.buttons .active.button, -.ui.inverted.purple.buttons .basic.active.button, -.ui.inverted.purple.basic.active.button { - box-shadow: 0 0 0 2px #d65aff inset; - color: #dc73ff; -} - -.ui.inverted.purple.basic.buttons .button:active, -.ui.inverted.purple.buttons .basic.button:active, -.ui.inverted.purple.basic.button:active { - box-shadow: 0 0 0 2px #cf40ff inset; - color: #dc73ff; -} - -/* Tertiary */ - -.ui.tertiary.purple.buttons .button, -.ui.tertiary.purple.buttons .tertiary.button, -.ui.tertiary.purple.button { - background: transparent; - box-shadow: none; - color: #a333c8; -} - -.ui.tertiary.purple.buttons .button:hover, -.ui.tertiary.purple.buttons button:hover, -.ui.tertiary.purple.button:hover { - box-shadow: inset 0 -0.2em 0 #8a3ea4; - color: #8a3ea4; -} - -.ui.tertiary.purple.buttons .button:focus, -.ui.tertiary.purple.buttons .tertiary.button:focus, -.ui.tertiary.purple.button:focus { - box-shadow: inset 0 -0.2em 0 #84339f; - color: #84339f; -} - -.ui.tertiary.purple.buttons .active.button, -.ui.tertiary.purple.buttons .tertiary.active.button, -.ui.tertiary.purple.active.button, -.ui.tertiary.purple.buttons .button:active, -.ui.tertiary.purple.buttons .tertiary.button:active, -.ui.tertiary.purple.button:active { - box-shadow: inset 0 -0.2em 0 #a30dd4; - color: #9724be; -} - -.ui.pink.buttons .button, -.ui.pink.button { - background-color: #e03997; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.pink.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.pink.buttons .button:hover, -.ui.pink.button:hover { - background-color: #e61a8d; - color: #fff; - text-shadow: none; -} - -.ui.pink.buttons .button:focus, -.ui.pink.button:focus { - background-color: #e10f85; - color: #fff; - text-shadow: none; -} - -.ui.pink.buttons .button:active, -.ui.pink.button:active { - background-color: #c71f7e; - color: #fff; - text-shadow: none; -} - -.ui.pink.buttons .active.button, -.ui.pink.buttons .active.button:active, -.ui.pink.active.button, -.ui.pink.button .active.button:active { - background-color: #ea158d; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.pink.buttons .button, -.ui.basic.pink.button { - background: transparent; - box-shadow: 0 0 0 1px #e03997 inset; - color: #e03997; -} - -.ui.basic.pink.buttons .button:hover, -.ui.basic.pink.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #e61a8d inset; - color: #e61a8d; -} - -.ui.basic.pink.buttons .button:focus, -.ui.basic.pink.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #e10f85 inset; - color: #e61a8d; -} - -.ui.basic.pink.buttons .active.button, -.ui.basic.pink.active.button { - background: transparent; - box-shadow: 0 0 0 1px #ea158d inset; - color: #c71f7e; -} - -.ui.basic.pink.buttons .button:active, -.ui.basic.pink.button:active { - box-shadow: 0 0 0 1px #c71f7e inset; - color: #c71f7e; -} - -/* Inverted */ - -.ui.inverted.pink.buttons .button, -.ui.inverted.pink.button { - background-color: transparent; - box-shadow: 0 0 0 2px #ff8edf inset; - color: #ff8edf; -} - -.ui.inverted.pink.buttons .button:hover, -.ui.inverted.pink.button:hover, -.ui.inverted.pink.buttons .button:focus, -.ui.inverted.pink.button:focus, -.ui.inverted.pink.buttons .button.active, -.ui.inverted.pink.button.active, -.ui.inverted.pink.buttons .button:active, -.ui.inverted.pink.button:active { - box-shadow: none; - color: #fff; -} - -.ui.inverted.pink.buttons .button:hover, -.ui.inverted.pink.button:hover { - background-color: #ff5bd1; -} - -.ui.inverted.pink.buttons .button:focus, -.ui.inverted.pink.button:focus { - background-color: #ff65d3; -} - -.ui.inverted.pink.buttons .active.button, -.ui.inverted.pink.active.button { - background-color: #ff74d8; -} - -.ui.inverted.pink.buttons .button:active, -.ui.inverted.pink.button:active { - background-color: #ff5bd1; -} - -/* Inverted Basic */ - -.ui.inverted.pink.basic.buttons .button, -.ui.inverted.pink.buttons .basic.button, -.ui.inverted.pink.basic.button { - background-color: transparent; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; - color: #fff; -} - -.ui.inverted.pink.basic.buttons .button:hover, -.ui.inverted.pink.buttons .basic.button:hover, -.ui.inverted.pink.basic.button:hover { - box-shadow: 0 0 0 2px #ff5bd1 inset; - color: #ff8edf; -} - -.ui.inverted.pink.basic.buttons .button:focus, -.ui.inverted.pink.basic.buttons .button:focus, -.ui.inverted.pink.basic.button:focus { - box-shadow: 0 0 0 2px #ff65d3 inset; - color: #ff8edf; -} - -.ui.inverted.pink.basic.buttons .active.button, -.ui.inverted.pink.buttons .basic.active.button, -.ui.inverted.pink.basic.active.button { - box-shadow: 0 0 0 2px #ff74d8 inset; - color: #ff8edf; -} - -.ui.inverted.pink.basic.buttons .button:active, -.ui.inverted.pink.buttons .basic.button:active, -.ui.inverted.pink.basic.button:active { - box-shadow: 0 0 0 2px #ff5bd1 inset; - color: #ff8edf; -} - -/* Tertiary */ - -.ui.tertiary.pink.buttons .button, -.ui.tertiary.pink.buttons .tertiary.button, -.ui.tertiary.pink.button { - background: transparent; - box-shadow: none; - color: #e03997; -} - -.ui.tertiary.pink.buttons .button:hover, -.ui.tertiary.pink.buttons button:hover, -.ui.tertiary.pink.button:hover { - box-shadow: inset 0 -0.2em 0 #cc3389; - color: #cc3389; -} - -.ui.tertiary.pink.buttons .button:focus, -.ui.tertiary.pink.buttons .tertiary.button:focus, -.ui.tertiary.pink.button:focus { - box-shadow: inset 0 -0.2em 0 #c92782; - color: #c92782; -} - -.ui.tertiary.pink.buttons .active.button, -.ui.tertiary.pink.buttons .tertiary.active.button, -.ui.tertiary.pink.active.button, -.ui.tertiary.pink.buttons .button:active, -.ui.tertiary.pink.buttons .tertiary.button:active, -.ui.tertiary.pink.button:active { - box-shadow: inset 0 -0.2em 0 #ff0090; - color: #ea158d; -} - -.ui.brown.buttons .button, -.ui.brown.button { - background-color: #a5673f; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.brown.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.brown.buttons .button:hover, -.ui.brown.button:hover { - background-color: #975b33; - color: #fff; - text-shadow: none; -} - -.ui.brown.buttons .button:focus, -.ui.brown.button:focus { - background-color: #90532b; - color: #fff; - text-shadow: none; -} - -.ui.brown.buttons .button:active, -.ui.brown.button:active { - background-color: #805031; - color: #fff; - text-shadow: none; -} - -.ui.brown.buttons .active.button, -.ui.brown.buttons .active.button:active, -.ui.brown.active.button, -.ui.brown.button .active.button:active { - background-color: #995a31; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.brown.buttons .button, -.ui.basic.brown.button { - background: transparent; - box-shadow: 0 0 0 1px #a5673f inset; - color: #a5673f; -} - -.ui.basic.brown.buttons .button:hover, -.ui.basic.brown.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #975b33 inset; - color: #975b33; -} - -.ui.basic.brown.buttons .button:focus, -.ui.basic.brown.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #90532b inset; - color: #975b33; -} - -.ui.basic.brown.buttons .active.button, -.ui.basic.brown.active.button { - background: transparent; - box-shadow: 0 0 0 1px #995a31 inset; - color: #805031; -} - -.ui.basic.brown.buttons .button:active, -.ui.basic.brown.button:active { - box-shadow: 0 0 0 1px #805031 inset; - color: #805031; -} - -/* Inverted */ - -.ui.inverted.brown.buttons .button, -.ui.inverted.brown.button { - background-color: transparent; - box-shadow: 0 0 0 2px #d67c1c inset; - color: #d67c1c; -} - -.ui.inverted.brown.buttons .button:hover, -.ui.inverted.brown.button:hover, -.ui.inverted.brown.buttons .button:focus, -.ui.inverted.brown.button:focus, -.ui.inverted.brown.buttons .button.active, -.ui.inverted.brown.button.active, -.ui.inverted.brown.buttons .button:active, -.ui.inverted.brown.button:active { - box-shadow: none; - color: #fff; -} - -.ui.inverted.brown.buttons .button:hover, -.ui.inverted.brown.button:hover { - background-color: #b0620f; -} - -.ui.inverted.brown.buttons .button:focus, -.ui.inverted.brown.button:focus { - background-color: #c16808; -} - -.ui.inverted.brown.buttons .active.button, -.ui.inverted.brown.active.button { - background-color: #cc6f0d; -} - -.ui.inverted.brown.buttons .button:active, -.ui.inverted.brown.button:active { - background-color: #a96216; -} - -/* Inverted Basic */ - -.ui.inverted.brown.basic.buttons .button, -.ui.inverted.brown.buttons .basic.button, -.ui.inverted.brown.basic.button { - background-color: transparent; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; - color: #fff; -} - -.ui.inverted.brown.basic.buttons .button:hover, -.ui.inverted.brown.buttons .basic.button:hover, -.ui.inverted.brown.basic.button:hover { - box-shadow: 0 0 0 2px #b0620f inset; - color: #d67c1c; -} - -.ui.inverted.brown.basic.buttons .button:focus, -.ui.inverted.brown.basic.buttons .button:focus, -.ui.inverted.brown.basic.button:focus { - box-shadow: 0 0 0 2px #c16808 inset; - color: #d67c1c; -} - -.ui.inverted.brown.basic.buttons .active.button, -.ui.inverted.brown.buttons .basic.active.button, -.ui.inverted.brown.basic.active.button { - box-shadow: 0 0 0 2px #cc6f0d inset; - color: #d67c1c; -} - -.ui.inverted.brown.basic.buttons .button:active, -.ui.inverted.brown.buttons .basic.button:active, -.ui.inverted.brown.basic.button:active { - box-shadow: 0 0 0 2px #a96216 inset; - color: #d67c1c; -} - -/* Tertiary */ - -.ui.tertiary.brown.buttons .button, -.ui.tertiary.brown.buttons .tertiary.button, -.ui.tertiary.brown.button { - background: transparent; - box-shadow: none; - color: #a5673f; -} - -.ui.tertiary.brown.buttons .button:hover, -.ui.tertiary.brown.buttons button:hover, -.ui.tertiary.brown.button:hover { - box-shadow: inset 0 -0.2em 0 #835f48; - color: #835f48; -} - -.ui.tertiary.brown.buttons .button:focus, -.ui.tertiary.brown.buttons .tertiary.button:focus, -.ui.tertiary.brown.button:focus { - box-shadow: inset 0 -0.2em 0 #7d573e; - color: #7d573e; -} - -.ui.tertiary.brown.buttons .active.button, -.ui.tertiary.brown.buttons .tertiary.active.button, -.ui.tertiary.brown.active.button, -.ui.tertiary.brown.buttons .button:active, -.ui.tertiary.brown.buttons .tertiary.button:active, -.ui.tertiary.brown.button:active { - box-shadow: inset 0 -0.2em 0 #ae561d; - color: #995a31; -} - -.ui.grey.buttons .button, -.ui.grey.button { - background-color: #767676; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.grey.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.grey.buttons .button:hover, -.ui.grey.button:hover { - background-color: #838383; - color: #fff; - text-shadow: none; -} - -.ui.grey.buttons .button:focus, -.ui.grey.button:focus { - background-color: #8a8a8a; - color: #fff; - text-shadow: none; -} - -.ui.grey.buttons .button:active, -.ui.grey.button:active { - background-color: #909090; - color: #fff; - text-shadow: none; -} - -.ui.grey.buttons .active.button, -.ui.grey.buttons .active.button:active, -.ui.grey.active.button, -.ui.grey.button .active.button:active { - background-color: #696969; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.grey.buttons .button, -.ui.basic.grey.button { - background: transparent; - box-shadow: 0 0 0 1px #767676 inset; - color: #767676; -} - -.ui.basic.grey.buttons .button:hover, -.ui.basic.grey.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #838383 inset; - color: #838383; -} - -.ui.basic.grey.buttons .button:focus, -.ui.basic.grey.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #8a8a8a inset; - color: #838383; -} - -.ui.basic.grey.buttons .active.button, -.ui.basic.grey.active.button { - background: transparent; - box-shadow: 0 0 0 1px #696969 inset; - color: #909090; -} - -.ui.basic.grey.buttons .button:active, -.ui.basic.grey.button:active { - box-shadow: 0 0 0 1px #909090 inset; - color: #909090; -} - -/* Inverted */ - -.ui.inverted.grey.buttons .button, -.ui.inverted.grey.button { - background-color: transparent; - box-shadow: 0 0 0 2px #d4d4d5 inset; - color: #fff; -} - -.ui.inverted.grey.buttons .button:hover, -.ui.inverted.grey.button:hover, -.ui.inverted.grey.buttons .button:focus, -.ui.inverted.grey.button:focus, -.ui.inverted.grey.buttons .button.active, -.ui.inverted.grey.button.active, -.ui.inverted.grey.buttons .button:active, -.ui.inverted.grey.button:active { - box-shadow: none; - color: rgba(0, 0, 0, 0.6); -} - -.ui.inverted.grey.buttons .button:hover, -.ui.inverted.grey.button:hover { - background-color: #c2c4c5; -} - -.ui.inverted.grey.buttons .button:focus, -.ui.inverted.grey.button:focus { - background-color: #c7c9cb; -} - -.ui.inverted.grey.buttons .active.button, -.ui.inverted.grey.active.button { - background-color: #cfd0d2; -} - -.ui.inverted.grey.buttons .button:active, -.ui.inverted.grey.button:active { - background-color: #c2c4c5; -} - -/* Inverted Basic */ - -.ui.inverted.grey.basic.buttons .button, -.ui.inverted.grey.buttons .basic.button, -.ui.inverted.grey.basic.button { - background-color: transparent; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; - color: #fff; -} - -.ui.inverted.grey.basic.buttons .button:hover, -.ui.inverted.grey.buttons .basic.button:hover, -.ui.inverted.grey.basic.button:hover { - box-shadow: 0 0 0 2px #c2c4c5 inset; - color: #fff; -} - -.ui.inverted.grey.basic.buttons .button:focus, -.ui.inverted.grey.basic.buttons .button:focus, -.ui.inverted.grey.basic.button:focus { - box-shadow: 0 0 0 2px #c7c9cb inset; - color: #dcddde; -} - -.ui.inverted.grey.basic.buttons .active.button, -.ui.inverted.grey.buttons .basic.active.button, -.ui.inverted.grey.basic.active.button { - box-shadow: 0 0 0 2px #cfd0d2 inset; - color: #fff; -} - -.ui.inverted.grey.basic.buttons .button:active, -.ui.inverted.grey.buttons .basic.button:active, -.ui.inverted.grey.basic.button:active { - box-shadow: 0 0 0 2px #c2c4c5 inset; - color: #fff; -} - -/* Tertiary */ - -.ui.tertiary.grey.buttons .button, -.ui.tertiary.grey.buttons .tertiary.button, -.ui.tertiary.grey.button { - background: transparent; - box-shadow: none; - color: #767676; -} - -.ui.tertiary.grey.buttons .button:hover, -.ui.tertiary.grey.buttons button:hover, -.ui.tertiary.grey.button:hover { - box-shadow: inset 0 -0.2em 0 #909090; - color: #909090; -} - -.ui.tertiary.grey.buttons .button:focus, -.ui.tertiary.grey.buttons .tertiary.button:focus, -.ui.tertiary.grey.button:focus { - box-shadow: inset 0 -0.2em 0 #9f9f9f; - color: #9f9f9f; -} - -.ui.tertiary.grey.buttons .active.button, -.ui.tertiary.grey.buttons .tertiary.active.button, -.ui.tertiary.grey.active.button, -.ui.tertiary.grey.buttons .button:active, -.ui.tertiary.grey.buttons .tertiary.button:active, -.ui.tertiary.grey.button:active { - box-shadow: inset 0 -0.2em 0 #5d5d5d; - color: #696969; -} - -.ui.black.buttons .button, -.ui.black.button { - background-color: #1b1c1d; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.black.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.black.buttons .button:hover, -.ui.black.button:hover { - background-color: #27292a; - color: #fff; - text-shadow: none; -} - -.ui.black.buttons .button:focus, -.ui.black.button:focus { - background-color: #2f3032; - color: #fff; - text-shadow: none; -} - -.ui.black.buttons .button:active, -.ui.black.button:active { - background-color: #343637; - color: #fff; - text-shadow: none; -} - -.ui.black.buttons .active.button, -.ui.black.buttons .active.button:active, -.ui.black.active.button, -.ui.black.button .active.button:active { - background-color: #0f0f10; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.black.buttons .button, -.ui.basic.black.button { - background: transparent; - box-shadow: 0 0 0 1px #1b1c1d inset; - color: #1b1c1d; -} - -.ui.basic.black.buttons .button:hover, -.ui.basic.black.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #27292a inset; - color: #27292a; -} - -.ui.basic.black.buttons .button:focus, -.ui.basic.black.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #2f3032 inset; - color: #27292a; -} - -.ui.basic.black.buttons .active.button, -.ui.basic.black.active.button { - background: transparent; - box-shadow: 0 0 0 1px #0f0f10 inset; - color: #343637; -} - -.ui.basic.black.buttons .button:active, -.ui.basic.black.button:active { - box-shadow: 0 0 0 1px #343637 inset; - color: #343637; -} - -/* Inverted */ - -.ui.inverted.black.buttons .button, -.ui.inverted.black.button { - background-color: transparent; - box-shadow: 0 0 0 2px #d4d4d5 inset; - color: #fff; -} - -.ui.inverted.black.buttons .button:hover, -.ui.inverted.black.button:hover, -.ui.inverted.black.buttons .button:focus, -.ui.inverted.black.button:focus, -.ui.inverted.black.buttons .button.active, -.ui.inverted.black.button.active, -.ui.inverted.black.buttons .button:active, -.ui.inverted.black.button:active { - box-shadow: none; - color: #fff; -} - -.ui.inverted.black.buttons .button:hover, -.ui.inverted.black.button:hover { - background-color: #000000; -} - -.ui.inverted.black.buttons .button:focus, -.ui.inverted.black.button:focus { - background-color: #000000; -} - -.ui.inverted.black.buttons .active.button, -.ui.inverted.black.active.button { - background-color: #000000; -} - -.ui.inverted.black.buttons .button:active, -.ui.inverted.black.button:active { - background-color: #000000; -} - -/* Inverted Basic */ - -.ui.inverted.black.basic.buttons .button, -.ui.inverted.black.buttons .basic.button, -.ui.inverted.black.basic.button { - background-color: transparent; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; - color: #fff; -} - -.ui.inverted.black.basic.buttons .button:hover, -.ui.inverted.black.buttons .basic.button:hover, -.ui.inverted.black.basic.button:hover { - box-shadow: 0 0 0 2px #000000 inset; - color: #fff; -} - -.ui.inverted.black.basic.buttons .button:focus, -.ui.inverted.black.basic.buttons .button:focus, -.ui.inverted.black.basic.button:focus { - box-shadow: 0 0 0 2px #000000 inset; - color: #545454; -} - -.ui.inverted.black.basic.buttons .active.button, -.ui.inverted.black.buttons .basic.active.button, -.ui.inverted.black.basic.active.button { - box-shadow: 0 0 0 2px #000000 inset; - color: #fff; -} - -.ui.inverted.black.basic.buttons .button:active, -.ui.inverted.black.buttons .basic.button:active, -.ui.inverted.black.basic.button:active { - box-shadow: 0 0 0 2px #000000 inset; - color: #fff; -} - -/* Tertiary */ - -.ui.tertiary.black.buttons .button, -.ui.tertiary.black.buttons .tertiary.button, -.ui.tertiary.black.button { - background: transparent; - box-shadow: none; - color: #1b1c1d; -} - -.ui.tertiary.black.buttons .button:hover, -.ui.tertiary.black.buttons button:hover, -.ui.tertiary.black.button:hover { - box-shadow: inset 0 -0.2em 0 #8b8f93; - color: #8b8f93; -} - -.ui.tertiary.black.buttons .button:focus, -.ui.tertiary.black.buttons .tertiary.button:focus, -.ui.tertiary.black.button:focus { - box-shadow: inset 0 -0.2em 0 #93969a; - color: #93969a; -} - -.ui.tertiary.black.buttons .active.button, -.ui.tertiary.black.buttons .tertiary.active.button, -.ui.tertiary.black.active.button, -.ui.tertiary.black.buttons .button:active, -.ui.tertiary.black.buttons .tertiary.button:active, -.ui.tertiary.black.button:active { - box-shadow: inset 0 -0.2em 0 #404245; - color: #0f0f10; -} - -/* Standard */ - -.ui.positive.buttons .button, -.ui.positive.button { - background-color: #21ba45; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.positive.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.positive.buttons .button:hover, -.ui.positive.button:hover { - background-color: #16ab39; - color: #fff; - text-shadow: none; -} - -.ui.positive.buttons .button:focus, -.ui.positive.button:focus { - background-color: #0ea432; - color: #fff; - text-shadow: none; -} - -.ui.positive.buttons .button:active, -.ui.positive.button:active { - background-color: #198f35; - color: #fff; - text-shadow: none; -} - -.ui.positive.buttons .active.button, -.ui.positive.buttons .active.button:active, -.ui.positive.active.button, -.ui.positive.button .active.button:active { - background-color: #13ae38; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.positive.buttons .button, -.ui.basic.positive.button { - background: transparent; - box-shadow: 0 0 0 1px #21ba45 inset; - color: #21ba45; -} - -.ui.basic.positive.buttons .button:hover, -.ui.basic.positive.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #16ab39 inset; - color: #16ab39; -} - -.ui.basic.positive.buttons .button:focus, -.ui.basic.positive.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #0ea432 inset; - color: #16ab39; -} - -.ui.basic.positive.buttons .active.button, -.ui.basic.positive.active.button { - background: transparent; - box-shadow: 0 0 0 1px #13ae38 inset; - color: #198f35; -} - -.ui.basic.positive.buttons .button:active, -.ui.basic.positive.button:active { - box-shadow: 0 0 0 1px #198f35 inset; - color: #198f35; -} - -.ui.buttons:not(.vertical) > .basic.positive.button:not(:first-child) { - margin-left: -1px; -} - -/* Standard */ - -.ui.negative.buttons .button, -.ui.negative.button { - background-color: #db2828; - color: #fff; - text-shadow: none; - background-image: none; -} - -.ui.negative.button { - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.negative.buttons .button:hover, -.ui.negative.button:hover { - background-color: #d01919; - color: #fff; - text-shadow: none; -} - -.ui.negative.buttons .button:focus, -.ui.negative.button:focus { - background-color: #ca1010; - color: #fff; - text-shadow: none; -} - -.ui.negative.buttons .button:active, -.ui.negative.button:active { - background-color: #b21e1e; - color: #fff; - text-shadow: none; -} - -.ui.negative.buttons .active.button, -.ui.negative.buttons .active.button:active, -.ui.negative.active.button, -.ui.negative.button .active.button:active { - background-color: #d41515; - color: #fff; - text-shadow: none; -} - -/* Basic */ - -.ui.basic.negative.buttons .button, -.ui.basic.negative.button { - background: transparent; - box-shadow: 0 0 0 1px #db2828 inset; - color: #db2828; -} - -.ui.basic.negative.buttons .button:hover, -.ui.basic.negative.button:hover { - background: transparent; - box-shadow: 0 0 0 1px #d01919 inset; - color: #d01919; -} - -.ui.basic.negative.buttons .button:focus, -.ui.basic.negative.button:focus { - background: transparent; - box-shadow: 0 0 0 1px #ca1010 inset; - color: #d01919; -} - -.ui.basic.negative.buttons .active.button, -.ui.basic.negative.active.button { - background: transparent; - box-shadow: 0 0 0 1px #d41515 inset; - color: #b21e1e; -} - -.ui.basic.negative.buttons .button:active, -.ui.basic.negative.button:active { - box-shadow: 0 0 0 1px #b21e1e inset; - color: #b21e1e; -} - -.ui.buttons:not(.vertical) > .basic.negative.button:not(:first-child) { - margin-left: -1px; -} - -/******************************* - Groups - *******************************/ - -.ui.buttons { - display: inline-flex; - flex-direction: row; - font-size: 0; - vertical-align: baseline; - margin: 0 0.25em 0 0; -} - -.ui.buttons:not(.basic):not(.inverted) { - box-shadow: none; -} - -/* Clearfix */ - -.ui.buttons::after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -/* Standard Group */ - -.ui.buttons .button { - flex: 1 0 auto; - border-radius: 0; - margin: 0; -} - -.ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) { - box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.buttons .button:first-child { - border-left: none; - margin-left: 0; - border-top-left-radius: 0.28571429rem; - border-bottom-left-radius: 0.28571429rem; -} - -.ui.buttons .button:last-child { - border-top-right-radius: 0.28571429rem; - border-bottom-right-radius: 0.28571429rem; -} - -/* Vertical Style */ - -.ui.vertical.buttons { - display: inline-flex; - flex-direction: column; -} - -.ui.vertical.buttons .button { - display: block; - float: none; - width: 100%; - margin: 0; - border-radius: 0; -} - -.ui.vertical.buttons .button:not(.basic) { - box-shadow: none; -} - -.ui.vertical.buttons .button:first-child { - border-top-left-radius: 0.28571429rem; - border-top-right-radius: 0.28571429rem; -} - -.ui.vertical.buttons .button:last-child { - margin-bottom: 0; - border-bottom-left-radius: 0.28571429rem; - border-bottom-right-radius: 0.28571429rem; -} - -.ui.vertical.buttons .button:only-child { - border-radius: 0.28571429rem; -} - -.ui.vertical.buttons .basic.button:not(:first-child) { - border-top: none; -} - -.ui.wrapping.buttons { - flex-wrap: wrap; -} - -.ui.wrapping.basic.buttons { - border-bottom: none; -} - -.ui.wrapping.basic.buttons .button { - border-bottom: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.wrapping.basic.buttons .button:hover { - background: transparent !important; -} - -.ui.compact.wrapping.buttons .button { - flex: none; -} - -.ui.wrapped.buttons:not(.spaced) { - border-top-right-radius: 0; -} - -.ui.wrapped.buttons:not(.spaced) .button:first-child { - border-radius: 0.28571429rem 0 0 0; -} - -.ui.wrapped.buttons:not(.spaced) .button:last-child { - border-radius: 0 0 0.28571429rem 0; -} - -.ui.wrapped[class*="top attached"].buttons { - border-radius: 0.28571429rem 0 0 0; -} - -.ui.wrapped[class*="top attached"].buttons .button:last-child { - border-radius: 0; -} - -.ui.wrapped[class*="bottom attached"].buttons { - border-radius: 0 0 0 0.28571429rem; -} - -.ui.wrapped[class*="bottom attached"].buttons .button:first-child { - border-radius: 0; -} - -.ui.spaced.buttons .ui.button { - margin-bottom: 1em; - margin-right: 1em; - border-radius: 0.28571429rem; -} - -.ui.spaced.basic.buttons { - border: none; -} - -.ui.spaced.basic.buttons .button { - border: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.spaced.basic.buttons .button.basic { - border: none; -} - -.ui.spaced.basic.vertical.buttons .button:first-child { - border-top: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.spaced.basic.wrapping.buttons .button:not(.basic) { - border-top: 1px solid rgba(34, 36, 38, 0.15); - border-right: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.spaced.basic.wrapping.buttons .button:not(.basic):first-child { - border-left: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.spaced.basic.inverted.buttons .basic.button { - margin-bottom: calc(1em + 1px); - margin-top: 1px; -} - -.ui.basic.buttons:not(.vertical).inverted .button, -.ui.basic.buttons:not(.vertical) .basic.button { - margin-left: -1px; - border-right: none; -} - -.ui.basic.buttons:not(.vertical):not(.spaced):not(.inverted) .basic.button { - margin-top: -1px; - border-bottom: none; -} - -.ui.inverted.basic.buttons:not(.spaced) .button, -.ui.attached.basic.buttons:not(.wrapping):not(.inverted) .basic.button { - margin-bottom: -1px; -} - -.ui.basic.buttons:not(.vertical):not(.attached):not(.spaced):not(.wrapping):not(.inverted) .basic.button { - margin-bottom: -1px; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Container - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Container -*******************************/ - -/* All Sizes */ - -.ui.container { - display: block; - max-width: 100%; -} - -/* Mobile */ - -@media only screen and (max-width: 767.98px) { - .ui.ui.ui.container:not(.fluid) { - width: auto; - margin-left: 1em; - margin-right: 1em; - } - - .ui.ui.ui.grid.container { - width: auto; - } - - .ui.ui.ui.relaxed.grid.container { - width: auto; - } - - .ui.ui.ui.very.relaxed.grid.container { - width: auto; - } -} - -/* Tablet */ - -@media only screen and (min-width: 768px) and (max-width: 991.98px) { - .ui.ui.ui.container:not(.fluid) { - width: 723px; - margin-left: auto; - margin-right: auto; - } - - .ui.ui.ui.grid.container { - width: calc(723px + 2rem); - } - - .ui.ui.ui.relaxed.grid.container { - width: calc(723px + 3rem); - } - - .ui.ui.ui.very.relaxed.grid.container { - width: calc(723px + 5rem); - } -} - -/* Small Monitor */ - -@media only screen and (min-width: 992px) and (max-width: 1199.98px) { - .ui.ui.ui.container:not(.fluid) { - width: 933px; - margin-left: auto; - margin-right: auto; - } - - .ui.ui.ui.grid.container { - width: calc(933px + 2rem); - } - - .ui.ui.ui.relaxed.grid.container { - width: calc(933px + 3rem); - } - - .ui.ui.ui.very.relaxed.grid.container { - width: calc(933px + 5rem); - } -} - -/* Large Monitor */ - -@media only screen and (min-width: 1200px) { - .ui.ui.ui.container:not(.fluid) { - width: 1127px; - margin-left: auto; - margin-right: auto; - } - - .ui.ui.ui.grid.container { - width: calc(1127px + 2rem); - } - - .ui.ui.ui.relaxed.grid.container { - width: calc(1127px + 3rem); - } - - .ui.ui.ui.very.relaxed.grid.container { - width: calc(1127px + 5rem); - } -} - -/******************************* - Types -*******************************/ - -/* Text Container */ - -.ui.text.container { - font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - max-width: 700px; - line-height: 1.5; - font-size: 1.14285714rem; -} - -/* Wide Container */ - -@media only screen and (min-width: 768px) and (max-width: 991.98px) { - .ui.ui.ui.wide.container { - width: 867.6px; - } -} - -@media only screen and (min-width: 992px) and (max-width: 1199.98px) { - .ui.ui.ui.wide.container { - width: 1119.6px; - } -} - -@media only screen and (min-width: 1200px) { - .ui.ui.ui.wide.container { - width: 1352.4px; - } -} - -/* Fluid */ - -.ui.fluid.container { - width: 100%; -} - -/******************************* - Variations -*******************************/ - -.ui[class*="left aligned"].container { - text-align: left; -} - -.ui[class*="center aligned"].container { - text-align: center; -} - -.ui[class*="right aligned"].container { - text-align: right; -} - -.ui.justified.container { - text-align: justify; - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; -} - -/* -------------- - Scrolling - --------------- */ - -.ui.scrolling.container { - overflow: auto; - -ms-scroll-chaining: none; - overscroll-behavior: none; -} - -@media only screen and (max-width: 767.98px) { - .ui.scrolling.container.short { - max-height: 11.25em; - } - - .ui.scrolling.container.short.resizable { - height: 11.25em; - } - - .ui.scrolling.container[class*="very short"] { - max-height: 7.5em; - } - - .ui.scrolling.container[class*="very short"].resizable { - height: 7.5em; - } - - .ui.scrolling.container { - max-height: 15em; - } - - .ui.scrolling.container.long { - max-height: 30em; - } - - .ui.scrolling.container.long.resizable { - height: 30em; - } - - .ui.scrolling.container[class*="very long"] { - max-height: 45em; - } - - .ui.scrolling.container[class*="very long"].resizable { - height: 45em; - } -} - -@media only screen and (min-width: 768px) { - .ui.scrolling.container.short { - max-height: 13.5em; - } - - .ui.scrolling.container.short.resizable { - height: 13.5em; - } - - .ui.scrolling.container[class*="very short"] { - max-height: 9em; - } - - .ui.scrolling.container[class*="very short"].resizable { - height: 9em; - } - - .ui.scrolling.container { - max-height: 18em; - } - - .ui.scrolling.container.resizable { - height: 18em; - } - - .ui.scrolling.container.long { - max-height: 36em; - } - - .ui.scrolling.container.long.resizable { - height: 36em; - } - - .ui.scrolling.container[class*="very long"] { - max-height: 54em; - } - - .ui.scrolling.container[class*="very long"].resizable { - height: 54em; - } -} - -@media only screen and (min-width: 992px) { - .ui.scrolling.container.short { - max-height: 18em; - } - - .ui.scrolling.container.short.resizable { - height: 18em; - } - - .ui.scrolling.container[class*="very short"] { - max-height: 12em; - } - - .ui.scrolling.container[class*="very short"].resizable { - height: 12em; - } - - .ui.scrolling.container { - max-height: 24em; - } - - .ui.scrolling.container.resizable { - height: 24em; - } - - .ui.scrolling.container.long { - max-height: 48em; - } - - .ui.scrolling.container.long.resizable { - height: 48em; - } - - .ui.scrolling.container[class*="very long"] { - max-height: 72em; - } - - .ui.scrolling.container[class*="very long"].resizable { - height: 72em; - } -} - -@media only screen and (min-width: 1920px) { - .ui.scrolling.container.short { - max-height: 22.5em; - } - - .ui.scrolling.container.short.resizable { - height: 22.5em; - } - - .ui.scrolling.container[class*="very short"] { - max-height: 15em; - } - - .ui.scrolling.container[class*="very short"].resizable { - height: 15em; - } - - .ui.scrolling.container { - max-height: 30em; - } - - .ui.scrolling.container.resizable { - height: 30em; - } - - .ui.scrolling.container.long { - max-height: 60em; - } - - .ui.scrolling.container.long.resizable { - height: 60em; - } - - .ui.scrolling.container[class*="very long"] { - max-height: 90em; - } - - .ui.scrolling.container[class*="very long"].resizable { - height: 90em; - } -} - -.ui.resizable.scrolling.container { - resize: vertical; - max-height: none; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Divider - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Divider -*******************************/ - -.ui.divider { - margin: 1rem 0; - line-height: 1; - height: 0; - font-weight: bold; - text-transform: uppercase; - letter-spacing: 0.05em; - color: rgba(0, 0, 0, 0.85); - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -/* -------------- - Basic ---------------- */ - -.ui.divider:not(.vertical):not(.horizontal) { - border-top: 1px solid rgba(34, 36, 38, 0.15); - border-bottom: 1px solid rgba(255, 255, 255, 0.1); -} - -/* -------------- - Coupling ---------------- */ - -/* Allow divider between each column row */ - -.ui.grid > .column + .divider, -.ui.grid > .row > .column + .divider { - left: auto; -} - -/* -------------- - Horizontal - --------------- */ - -.ui.horizontal.divider { - display: table; - white-space: nowrap; - height: auto; - margin: ""; - line-height: 1; - text-align: center; -} - -.ui.horizontal.divider::before, -.ui.horizontal.divider::after { - content: ""; - display: table-cell; - position: relative; - top: 50%; - width: 50%; - background-repeat: no-repeat; -} - -.ui.horizontal.divider::before { - background-position: right 1em top 50%; -} - -.ui.horizontal.divider::after { - background-position: left 1em top 50%; -} - -/* -------------- - Vertical - --------------- */ - -.ui.vertical.divider { - position: absolute; - z-index: 2; - top: 50%; - left: 50%; - margin: 0; - padding: 0; - width: auto; - height: 50%; - line-height: 0; - text-align: center; - transform: translateX(-50%); -} - -.ui.vertical.divider::before, -.ui.vertical.divider::after { - position: absolute; - left: 50%; - content: ""; - z-index: 3; - border-left: 1px solid rgba(34, 36, 38, 0.15); - border-right: 1px solid rgba(255, 255, 255, 0.1); - width: 0; - height: calc(100% - 1rem); -} - -.ui.vertical.divider::before { - top: -100%; -} - -.ui.vertical.divider::after { - top: auto; - bottom: 0; -} - -/* Inside grid */ - -@media only screen and (max-width: 767.98px) { - .ui.stackable.grid .ui.vertical.divider, - .ui.grid .stackable.row .ui.vertical.divider { - display: table; - white-space: nowrap; - height: auto; - margin: ""; - overflow: hidden; - line-height: 1; - text-align: center; - position: static; - top: 0; - left: 0; - transform: none; - } - - .ui.stackable.grid .ui.vertical.divider::before, - .ui.grid .stackable.row .ui.vertical.divider::before, - .ui.stackable.grid .ui.vertical.divider::after, - .ui.grid .stackable.row .ui.vertical.divider::after { - left: 0; - border-left: none; - border-right: none; - content: ""; - display: table-cell; - position: relative; - top: 50%; - width: 50%; - background-repeat: no-repeat; - } - - .ui.stackable.grid .ui.vertical.divider::before, - .ui.grid .stackable.row .ui.vertical.divider::before { - background-position: right 1em top 50%; - } - - .ui.stackable.grid .ui.vertical.divider::after, - .ui.grid .stackable.row .ui.vertical.divider::after { - background-position: left 1em top 50%; - } -} - -/* -------------- - Icon - --------------- */ - -.ui.divider > .icon { - margin: 0; - font-size: 1rem; - height: 1em; - vertical-align: middle; -} - -/* -------------- - Header - --------------- */ - -.ui.horizontal.divider[class*="left aligned"]::before { - display: none; -} - -.ui.horizontal.divider[class*="left aligned"]::after { - width: 100%; -} - -.ui.horizontal.divider[class*="right aligned"]::before { - width: 100%; -} - -.ui.horizontal.divider[class*="right aligned"]::after { - display: none; -} - -/******************************* - Variations -*******************************/ - -/* -------------- - Hidden - --------------- */ - -.ui.hidden.divider { - border-color: transparent !important; -} - -.ui.hidden.divider::before, -.ui.hidden.divider::after { - display: none; -} - -/* -------------- - Inverted ---------------- */ - -.ui.divider.inverted, -.ui.vertical.inverted.divider, -.ui.horizontal.inverted.divider { - color: #fff; -} - -.ui.divider.inverted, -.ui.divider.inverted::after, -.ui.divider.inverted::before { - border-color: rgba(34, 36, 38, 0.15) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.15) rgba(34, 36, 38, 0.15) !important; -} - -/* -------------- - Fitted ---------------- */ - -.ui.fitted.divider { - margin: 0; -} - -/* -------------- - Clearing - --------------- */ - -.ui.clearing.divider { - clear: both; -} - -/* -------------- - Section - --------------- */ - -.ui.section.divider { - margin-top: 2rem; - margin-bottom: 2rem; -} - -/* -------------- - Sizes ---------------- */ - -.ui.divider { - font-size: 1rem; -} - -.ui.mini.divider { - font-size: 0.78571429rem; -} - -.ui.tiny.divider { - font-size: 0.85714286rem; -} - -.ui.small.divider { - font-size: 0.92857143rem; -} - -.ui.large.divider { - font-size: 1.14285714rem; -} - -.ui.big.divider { - font-size: 1.28571429rem; -} - -.ui.huge.divider { - font-size: 1.42857143rem; -} - -.ui.massive.divider { - font-size: 1.71428571rem; -} - -/******************************* - Theme Overrides -*******************************/ - -.ui.horizontal.divider::before, -.ui.horizontal.divider::after { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC"); -} - -@media only screen and (max-width: 767px) { - .ui.stackable.grid .ui.vertical.divider::before, - .ui.grid .stackable.row .ui.vertical.divider::before, - .ui.stackable.grid .ui.vertical.divider::after, - .ui.grid .stackable.row .ui.vertical.divider::after { - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC"); - } -} - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Flag - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Flag -*******************************/ - -i.flag:not(.icon) { - speak: none; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; -} - -i.flag:not(.icon)::before { - content: "\00A0\00A0\00A0\00A0\00A0\00A0\00A0"; - display: inline-block; - line-height: 1em; - background-repeat: no-repeat; - background-position: center center; -} - -i.flag.small { - font-size: 1.5em; - vertical-align: middle; -} - -i.flag.medium { - font-size: 3em; - vertical-align: middle; -} - -i.flag.large { - font-size: 6em; - vertical-align: middle; -} - -i.flag.big { - font-size: 7.5em; - vertical-align: middle; -} - -i.flag.huge { - font-size: 9em; - vertical-align: middle; -} - -i.flag.massive { - font-size: 12em; - vertical-align: middle; -} - -/* rtl:begin:ignore */ - -i.flag.transgender::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f3f3-fe0f-200d-26a7-fe0f.svg"); -} - -i.flag.rainbow::before, -i.flag.pride::before, -i.flag.lgbt::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f3f3-fe0f-200d-1f308.svg"); -} - -i.flag.pirate::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f3f4-200d-2620-fe0f.svg"); -} - -i.flag.af::before, -i.flag.afghanistan::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1eb.svg"); -} - -i.flag.ax::before, -i.flag.aland.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1fd.svg"); -} - -i.flag.al::before, -i.flag.albania::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1f1.svg"); -} - -i.flag.dz::before, -i.flag.algeria::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e9-1f1ff.svg"); -} - -i.flag.as::before, -i.flag.american.samoa::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1f8.svg"); -} - -i.flag.ad::before, -i.flag.andorra::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1e9.svg"); -} - -i.flag.ao::before, -i.flag.angola::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1f4.svg"); -} - -i.flag.ai::before, -i.flag.anguilla::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1ee.svg"); -} - -i.flag.aq::before, -i.flag.antarctica::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1f6.svg"); -} - -i.flag.ag::before, -i.flag.antigua.and.barbuda::before, -i.flag.antigua::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1ec.svg"); -} - -i.flag.ar::before, -i.flag.argentina::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1f7.svg"); -} - -i.flag.am::before, -i.flag.armenia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1f2.svg"); -} - -i.flag.aw::before, -i.flag.aruba::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1fc.svg"); -} - -i.flag.au::before, -i.flag.australia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1fa.svg"); -} - -i.flag.at::before, -i.flag.austria::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1f9.svg"); -} - -i.flag.az::before, -i.flag.azerbaijan::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1ff.svg"); -} - -i.flag.bs::before, -i.flag.bahamas::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1f8.svg"); -} - -i.flag.bh::before, -i.flag.bahrain::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1ed.svg"); -} - -i.flag.bd::before, -i.flag.bangladesh::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1e9.svg"); -} - -i.flag.bb::before, -i.flag.barbados::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1e7.svg"); -} - -i.flag.by::before, -i.flag.belarus::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1fe.svg"); -} - -i.flag.be::before, -i.flag.belgium::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1ea.svg"); -} - -i.flag.bz::before, -i.flag.belize::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1ff.svg"); -} - -i.flag.bj::before, -i.flag.benin::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1ef.svg"); -} - -i.flag.bm::before, -i.flag.bermuda::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1f2.svg"); -} - -i.flag.bt::before, -i.flag.bhutan::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1f9.svg"); -} - -i.flag.bo::before, -i.flag.bolivia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1f4.svg"); -} - -i.flag.ba::before, -i.flag.bosnia.and.herzegovina::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1e6.svg"); -} - -i.flag.bw::before, -i.flag.botswana::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1fc.svg"); -} - -i.flag.br::before, -i.flag.brazil::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1f7.svg"); -} - -i.flag.io::before, -i.flag.british.indian.ocean.territory::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ee-1f1f4.svg"); -} - -i.flag.vg::before, -i.flag.british.virgin.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fb-1f1ec.svg"); -} - -i.flag.bn::before, -i.flag.brunei::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1f3.svg"); -} - -i.flag.bg::before, -i.flag.bulgaria::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1ec.svg"); -} - -i.flag.bf::before, -i.flag.burkina.faso::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1eb.svg"); -} - -i.flag.bi::before, -i.flag.burundi::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1ee.svg"); -} - -i.flag.kh::before, -i.flag.cambodia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f0-1f1ed.svg"); -} - -i.flag.cm::before, -i.flag.cameroon::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1f2.svg"); -} - -i.flag.ca::before, -i.flag.canada::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1e6.svg"); -} - -i.flag.ic::before, -i.flag.canary.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ee-1f1e8.svg"); -} - -i.flag.cv::before, -i.flag.cape.verde::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1fb.svg"); -} - -i.flag.bq::before, -i.flag.caribbean.netherlands::before, -i.flag.an::before, -i.flag.netherlands.antilles::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1f6.svg"); -} - -i.flag.ky::before, -i.flag.cayman.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f0-1f1fe.svg"); -} - -i.flag.cf::before, -i.flag.central.african.republic::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1eb.svg"); -} - -i.flag.td::before, -i.flag.chad::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1e9.svg"); -} - -i.flag.cl::before, -i.flag.chile::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1f1.svg"); -} - -i.flag.cn::before, -i.flag.china::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1f3.svg"); -} - -i.flag.cx::before, -i.flag.christmas.island::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1fd.svg"); -} - -i.flag.cc::before, -i.flag.cocos.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1e8.svg"); -} - -i.flag.co::before, -i.flag.colombia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1f4.svg"); -} - -i.flag.km::before, -i.flag.comoros::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f0-1f1f2.svg"); -} - -i.flag.cg::before, -i.flag.congo.brazzaville::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1ec.svg"); -} - -i.flag.cd::before, -i.flag.congo.kinshasa::before, -i.flag.congo::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1e9.svg"); -} - -i.flag.ck::before, -i.flag.cook.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1f0.svg"); -} - -i.flag.cr::before, -i.flag.costa.rica::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1f7.svg"); -} - -i.flag.ci::before, -i.flag.côte.d’ivoire::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1ee.svg"); -} - -i.flag.hr::before, -i.flag.croatia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ed-1f1f7.svg"); -} - -i.flag.cu::before, -i.flag.cuba::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1fa.svg"); -} - -i.flag.cw::before, -i.flag.curacao::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1fc.svg"); -} - -i.flag.cy::before, -i.flag.cyprus::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1fe.svg"); -} - -i.flag.cz::before, -i.flag.czechia::before, -i.flag.czech.republic::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1ff.svg"); -} - -i.flag.dk::before, -i.flag.denmark::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e9-1f1f0.svg"); -} - -i.flag.dj::before, -i.flag.djibouti::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e9-1f1ef.svg"); -} - -i.flag.dm::before, -i.flag.dominica::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e9-1f1f2.svg"); -} - -i.flag.do::before, -i.flag.dominican.republic::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e9-1f1f4.svg"); -} - -i.flag.ec::before, -i.flag.ecuador::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ea-1f1e8.svg"); -} - -i.flag.eg::before, -i.flag.egypt::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ea-1f1ec.svg"); -} - -i.flag.sv::before, -i.flag.el.salvador::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1fb.svg"); -} - -i.flag.gq::before, -i.flag.equatorial.guinea::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1f6.svg"); -} - -i.flag.er::before, -i.flag.eritrea::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ea-1f1f7.svg"); -} - -i.flag.ee::before, -i.flag.estonia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ea-1f1ea.svg"); -} - -i.flag.et::before, -i.flag.ethiopia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ea-1f1f9.svg"); -} - -i.flag.eu::before, -i.flag.european.union::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ea-1f1fa.svg"); -} - -i.flag.fk::before, -i.flag.falkland.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1eb-1f1f0.svg"); -} - -i.flag.fo::before, -i.flag.faroe.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1eb-1f1f4.svg"); -} - -i.flag.fj::before, -i.flag.fiji::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1eb-1f1ef.svg"); -} - -i.flag.fi::before, -i.flag.finland::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1eb-1f1ee.svg"); -} - -i.flag.fr::before, -i.flag.france::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1eb-1f1f7.svg"); -} - -i.flag.gf::before, -i.flag.french.guiana::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1eb.svg"); -} - -i.flag.pf::before, -i.flag.french.polynesia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f5-1f1eb.svg"); -} - -i.flag.tf::before, -i.flag.french.southern.territories::before, -i.flag.french.territories::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1eb.svg"); -} - -i.flag.ga::before, -i.flag.gabon::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1e6.svg"); -} - -i.flag.gm::before, -i.flag.gambia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1f2.svg"); -} - -i.flag.ge::before, -i.flag.georgia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1ea.svg"); -} - -i.flag.de::before, -i.flag.germany::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e9-1f1ea.svg"); -} - -i.flag.gh::before, -i.flag.ghana::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1ed.svg"); -} - -i.flag.gi::before, -i.flag.gibraltar::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1ee.svg"); -} - -i.flag.gr::before, -i.flag.greece::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1f7.svg"); -} - -i.flag.gl::before, -i.flag.greenland::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1f1.svg"); -} - -i.flag.gd::before, -i.flag.grenada::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1e9.svg"); -} - -i.flag.gp::before, -i.flag.guadeloupe::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1f5.svg"); -} - -i.flag.gu::before, -i.flag.guam::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1fa.svg"); -} - -i.flag.gt::before, -i.flag.guatemala::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1f9.svg"); -} - -i.flag.gg::before, -i.flag.guernsey::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1ec.svg"); -} - -i.flag.gn::before, -i.flag.guinea::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1f3.svg"); -} - -i.flag.gw::before, -i.flag.guinea-bissau::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1fc.svg"); -} - -i.flag.gy::before, -i.flag.guyana::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1fe.svg"); -} - -i.flag.ht::before, -i.flag.haiti::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ed-1f1f9.svg"); -} - -i.flag.hn::before, -i.flag.honduras::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ed-1f1f3.svg"); -} - -i.flag.hk::before, -i.flag.hong.kong.sar.china::before, -i.flag.hong.kong::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ed-1f1f0.svg"); -} - -i.flag.hu::before, -i.flag.hungary::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ed-1f1fa.svg"); -} - -i.flag.is::before, -i.flag.iceland::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ee-1f1f8.svg"); -} - -i.flag.in::before, -i.flag.india::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ee-1f1f3.svg"); -} - -i.flag.id::before, -i.flag.indonesia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ee-1f1e9.svg"); -} - -i.flag.ir::before, -i.flag.iran::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ee-1f1f7.svg"); -} - -i.flag.iq::before, -i.flag.iraq::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ee-1f1f6.svg"); -} - -i.flag.ie::before, -i.flag.ireland::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ee-1f1ea.svg"); -} - -i.flag.im::before, -i.flag.isle.of.man::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ee-1f1f2.svg"); -} - -i.flag.il::before, -i.flag.israel::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ee-1f1f1.svg"); -} - -i.flag.it::before, -i.flag.italy::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ee-1f1f9.svg"); -} - -i.flag.jm::before, -i.flag.jamaica::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ef-1f1f2.svg"); -} - -i.flag.jp::before, -i.flag.japan::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ef-1f1f5.svg"); -} - -i.flag.je::before, -i.flag.jersey::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ef-1f1ea.svg"); -} - -i.flag.jo::before, -i.flag.jordan::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ef-1f1f4.svg"); -} - -i.flag.kz::before, -i.flag.kazakhstan::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f0-1f1ff.svg"); -} - -i.flag.ke::before, -i.flag.kenya::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f0-1f1ea.svg"); -} - -i.flag.ki::before, -i.flag.kiribati::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f0-1f1ee.svg"); -} - -i.flag.xk::before, -i.flag.kosovo::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fd-1f1f0.svg"); -} - -i.flag.kw::before, -i.flag.kuwait::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f0-1f1fc.svg"); -} - -i.flag.kg::before, -i.flag.kyrgyzstan::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f0-1f1ec.svg"); -} - -i.flag.la::before, -i.flag.laos::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f1-1f1e6.svg"); -} - -i.flag.lv::before, -i.flag.latvia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f1-1f1fb.svg"); -} - -i.flag.lb::before, -i.flag.lebanon::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f1-1f1e7.svg"); -} - -i.flag.ls::before, -i.flag.lesotho::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f1-1f1f8.svg"); -} - -i.flag.lr::before, -i.flag.liberia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f1-1f1f7.svg"); -} - -i.flag.ly::before, -i.flag.libya::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f1-1f1fe.svg"); -} - -i.flag.li::before, -i.flag.liechtenstein::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f1-1f1ee.svg"); -} - -i.flag.lt::before, -i.flag.lithuania::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f1-1f1f9.svg"); -} - -i.flag.lu::before, -i.flag.luxembourg::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f1-1f1fa.svg"); -} - -i.flag.mo::before, -i.flag.macao.sar.china::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1f4.svg"); -} - -i.flag.mk::before, -i.flag.macedonia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1f0.svg"); -} - -i.flag.mg::before, -i.flag.madagascar::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1ec.svg"); -} - -i.flag.mw::before, -i.flag.malawi::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1fc.svg"); -} - -i.flag.my::before, -i.flag.malaysia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1fe.svg"); -} - -i.flag.mv::before, -i.flag.maldives::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1fb.svg"); -} - -i.flag.ml::before, -i.flag.mali::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1f1.svg"); -} - -i.flag.mt::before, -i.flag.malta::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1f9.svg"); -} - -i.flag.mh::before, -i.flag.marshall.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1ed.svg"); -} - -i.flag.mq::before, -i.flag.martinique::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1f6.svg"); -} - -i.flag.mr::before, -i.flag.mauritania::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1f7.svg"); -} - -i.flag.mu::before, -i.flag.mauritius::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1fa.svg"); -} - -i.flag.yt::before, -i.flag.mayotte::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fe-1f1f9.svg"); -} - -i.flag.mx::before, -i.flag.mexico::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1fd.svg"); -} - -i.flag.fm::before, -i.flag.micronesia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1eb-1f1f2.svg"); -} - -i.flag.md::before, -i.flag.moldova::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1e9.svg"); -} - -i.flag.mc::before, -i.flag.monaco::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1e8.svg"); -} - -i.flag.mn::before, -i.flag.mongolia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1f3.svg"); -} - -i.flag.me::before, -i.flag.montenegro::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1ea.svg"); -} - -i.flag.ms::before, -i.flag.montserrat::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1f8.svg"); -} - -i.flag.ma::before, -i.flag.morocco::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1e6.svg"); -} - -i.flag.mz::before, -i.flag.mozambique::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1ff.svg"); -} - -i.flag.mm::before, -i.flag.myanmar::before, -i.flag.burma::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1f2.svg"); -} - -i.flag.na::before, -i.flag.namibia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f3-1f1e6.svg"); -} - -i.flag.nr::before, -i.flag.nauru::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f3-1f1f7.svg"); -} - -i.flag.np::before, -i.flag.nepal::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f3-1f1f5.svg"); -} - -i.flag.nl::before, -i.flag.netherlands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f3-1f1f1.svg"); -} - -i.flag.nc::before, -i.flag.new.caledonia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f3-1f1e8.svg"); -} - -i.flag.nz::before, -i.flag.new.zealand::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f3-1f1ff.svg"); -} - -i.flag.ni::before, -i.flag.nicaragua::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f3-1f1ee.svg"); -} - -i.flag.ne::before, -i.flag.niger::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f3-1f1ea.svg"); -} - -i.flag.ng::before, -i.flag.nigeria::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f3-1f1ec.svg"); -} - -i.flag.nu::before, -i.flag.niue::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f3-1f1fa.svg"); -} - -i.flag.nf::before, -i.flag.norfolk.island::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f3-1f1eb.svg"); -} - -i.flag.kp::before, -i.flag.north.korea::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f0-1f1f5.svg"); -} - -i.flag.mp::before, -i.flag.northern.mariana.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1f5.svg"); -} - -i.flag.no::before, -i.flag.norway::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f3-1f1f4.svg"); -} - -i.flag.om::before, -i.flag.oman::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f4-1f1f2.svg"); -} - -i.flag.pk::before, -i.flag.pakistan::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f5-1f1f0.svg"); -} - -i.flag.pw::before, -i.flag.palau::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f5-1f1fc.svg"); -} - -i.flag.ps::before, -i.flag.palestinian.territories::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f5-1f1f8.svg"); -} - -i.flag.pa::before, -i.flag.panama::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f5-1f1e6.svg"); -} - -i.flag.pg::before, -i.flag.papua.new.guinea::before, -i.flag.new.guinea::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f5-1f1ec.svg"); -} - -i.flag.py::before, -i.flag.paraguay::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f5-1f1fe.svg"); -} - -i.flag.pe::before, -i.flag.peru::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f5-1f1ea.svg"); -} - -i.flag.ph::before, -i.flag.philippines::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f5-1f1ed.svg"); -} - -i.flag.pn::before, -i.flag.pitcairn.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f5-1f1f3.svg"); -} - -i.flag.pl::before, -i.flag.poland::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f5-1f1f1.svg"); -} - -i.flag.pt::before, -i.flag.portugal::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f5-1f1f9.svg"); -} - -i.flag.pr::before, -i.flag.puerto.rico::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f5-1f1f7.svg"); -} - -i.flag.qa::before, -i.flag.qatar::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f6-1f1e6.svg"); -} - -i.flag.re::before, -i.flag.réunion::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f7-1f1ea.svg"); -} - -i.flag.ro::before, -i.flag.romania::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f7-1f1f4.svg"); -} - -i.flag.ru::before, -i.flag.russia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f7-1f1fa.svg"); -} - -i.flag.rw::before, -i.flag.rwanda::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f7-1f1fc.svg"); -} - -i.flag.ws::before, -i.flag.samoa::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fc-1f1f8.svg"); -} - -i.flag.sm::before, -i.flag.san.marino::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1f2.svg"); -} - -i.flag.st::before, -i.flag.sao.tome.and.principe::before, -i.flag.samo.tome::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1f9.svg"); -} - -i.flag.sa::before, -i.flag.saudi.arabia::before, -i.flag.saudiarabia::before, -i.flag.saudi::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1e6.svg"); -} - -i.flag.sn::before, -i.flag.senegal::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1f3.svg"); -} - -i.flag.rs::before, -i.flag.serbia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f7-1f1f8.svg"); -} - -i.flag.sc::before, -i.flag.seychelles::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1e8.svg"); -} - -i.flag.sl::before, -i.flag.sierra.leone::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1f1.svg"); -} - -i.flag.sg::before, -i.flag.singapore::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1ec.svg"); -} - -i.flag.sx::before, -i.flag.sint.maarten::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1fd.svg"); -} - -i.flag.sk::before, -i.flag.slovakia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1f0.svg"); -} - -i.flag.si::before, -i.flag.slovenia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1ee.svg"); -} - -i.flag.gs::before, -i.flag.south.georgia.and.south.sandwich.islands::before, -i.flag.sandwich.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1f8.svg"); -} - -i.flag.sb::before, -i.flag.solomon.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1e7.svg"); -} - -i.flag.so::before, -i.flag.somalia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1f4.svg"); -} - -i.flag.za::before, -i.flag.south.africa::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ff-1f1e6.svg"); -} - -i.flag.kr::before, -i.flag.south.korea::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f0-1f1f7.svg"); -} - -i.flag.ss::before, -i.flag.south.sudan::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1f8.svg"); -} - -i.flag.es::before, -i.flag.spain::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ea-1f1f8.svg"); -} - -i.flag.lk::before, -i.flag.sri.lanka::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f1-1f1f0.svg"); -} - -i.flag.bl::before, -i.flag.st.barthelemy::before, -i.flag.saint.barth::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1f1.svg"); -} - -i.flag.sh::before, -i.flag.st.helena::before, -i.flag.saint.helena::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1ed.svg"); -} - -i.flag.kn::before, -i.flag.st.kitts.and.nevis::before, -i.flag.saint.kitts.and.navis::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f0-1f1f3.svg"); -} - -i.flag.lc::before, -i.flag.st.lucia::before, -i.flag.saint.lucia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f1-1f1e8.svg"); -} - -i.flag.pm::before, -i.flag.st.pierre.and.miquelon::before, -i.flag.saint.pierre::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f5-1f1f2.svg"); -} - -i.flag.vc::before, -i.flag.st.vincent.and.grenadines::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fb-1f1e8.svg"); -} - -i.flag.sd::before, -i.flag.sudan::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1e9.svg"); -} - -i.flag.sr::before, -i.flag.suriname::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1f7.svg"); -} - -i.flag.sz::before, -i.flag.eswatini::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1ff.svg"); -} - -i.flag.se::before, -i.flag.sweden::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1ea.svg"); -} - -i.flag.ch::before, -i.flag.switzerland::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1ed.svg"); -} - -i.flag.sy::before, -i.flag.syria::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1fe.svg"); -} - -i.flag.tw::before, -i.flag.taiwan::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1fc.svg"); -} - -i.flag.tj::before, -i.flag.tajikistan::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1ef.svg"); -} - -i.flag.tz::before, -i.flag.tanzania::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1ff.svg"); -} - -i.flag.th::before, -i.flag.thailand::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1ed.svg"); -} - -i.flag.tl::before, -i.flag.timor-leste::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1f1.svg"); -} - -i.flag.tg::before, -i.flag.togo::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1ec.svg"); -} - -i.flag.tk::before, -i.flag.tokelau::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1f0.svg"); -} - -i.flag.to::before, -i.flag.tonga::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1f4.svg"); -} - -i.flag.tt::before, -i.flag.trinidad.and.tobago::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1f9.svg"); -} - -i.flag.tn::before, -i.flag.tunisia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1f3.svg"); -} - -i.flag.tr::before, -i.flag.turkey::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1f7.svg"); -} - -i.flag.tm::before, -i.flag.turkmenistan::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1f2.svg"); -} - -i.flag.tc::before, -i.flag.turks.and.caicos.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1e8.svg"); -} - -i.flag.vi::before, -i.flag.us.virgin.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fb-1f1ee.svg"); -} - -i.flag.tv::before, -i.flag.tuvalu::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1fb.svg"); -} - -i.flag.ug::before, -i.flag.uganda::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fa-1f1ec.svg"); -} - -i.flag.ua::before, -i.flag.ukraine::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fa-1f1e6.svg"); -} - -i.flag.ae::before, -i.flag.united.arab.emirates::before, -i.flag.uae::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1ea.svg"); -} - -i.flag.gb::before, -i.flag.united.kingdom::before, -i.flag.uk::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ec-1f1e7.svg"); -} - -i.flag.gb.eng::before, -i.flag.england::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f3f4-e0067-e0062-e0065-e006e-e0067-e007f.svg"); -} - -i.flag.gb.sct::before, -i.flag.scotland::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f3f4-e0067-e0062-e0073-e0063-e0074-e007f.svg"); -} - -i.flag.gb.wls::before, -i.flag.wales::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f3f4-e0067-e0062-e0077-e006c-e0073-e007f.svg"); -} - -i.flag.us::before, -i.flag.united.states::before, -i.flag.america::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fa-1f1f8.svg"); -} - -i.flag.uy::before, -i.flag.uruguay::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fa-1f1fe.svg"); -} - -i.flag.uz::before, -i.flag.uzbekistan::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fa-1f1ff.svg"); -} - -i.flag.vu::before, -i.flag.vanuatu::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fb-1f1fa.svg"); -} - -i.flag.va::before, -i.flag.vatican.city::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fb-1f1e6.svg"); -} - -i.flag.ve::before, -i.flag.venezuela::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fb-1f1ea.svg"); -} - -i.flag.vn::before, -i.flag.vietnam::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fb-1f1f3.svg"); -} - -i.flag.wf::before, -i.flag.wallis.and.futuna::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fc-1f1eb.svg"); -} - -i.flag.eh::before, -i.flag.western.sahara::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ea-1f1ed.svg"); -} - -i.flag.ye::before, -i.flag.yemen::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fe-1f1ea.svg"); -} - -i.flag.zm::before, -i.flag.zambia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ff-1f1f2.svg"); -} - -i.flag.zw::before, -i.flag.zimbabwe::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ff-1f1fc.svg"); -} - -i.flag.ac::before, -i.flag.ascension.island::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e6-1f1e8.svg"); -} - -i.flag.bv::before, -i.flag.bouvet.island::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e7-1f1fb.svg"); -} - -i.flag.cp::before, -i.flag.clipperton.island::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e8-1f1f5.svg"); -} - -i.flag.ea::before, -i.flag.ceuta.and.melilla::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ea-1f1e6.svg"); -} - -i.flag.dg::before, -i.flag.diego.garcia::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1e9-1f1ec.svg"); -} - -i.flag.hm::before, -i.flag.heard.and.mcdonald.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1ed-1f1f2.svg"); -} - -i.flag.mf::before, -i.flag.st.martin::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f2-1f1eb.svg"); -} - -i.flag.sj::before, -i.flag.svalbard.and.jan.mayen::before, -i.flag.svalbard::before, -i.flag.jan.mayen::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f8-1f1ef.svg"); -} - -i.flag.ta::before, -i.flag.tristan.da.cunha::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1f9-1f1e6.svg"); -} - -i.flag.um::before, -i.flag.us.outlying.islands::before, -i.flag.minor.islands::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fa-1f1f2.svg"); -} - -i.flag.un::before, -i.flag.united.nations::before, -i.flag.united.nations::before { - background-image: url("https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f1fa-1f1f3.svg"); -} - -/* rtl:end:ignore */ - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Header - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Header -*******************************/ - -/* Standard */ - -.ui.header { - border: none; - margin: calc(2rem - 0.1428571428571429em) 0 1rem; - padding: 0 0; - font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-weight: bold; - line-height: 1.28571429em; - text-transform: none; - color: rgba(0, 0, 0, 0.87); -} - -.ui.header:first-child { - margin-top: -0.14285714em; -} - -.ui.header:last-child { - margin-bottom: 0; -} - -/* -------------- - Sub Header - --------------- */ - -.ui.header .sub.header { - display: block; - font-weight: normal; - padding: 0; - margin: 0; - font-size: 1rem; - line-height: 1.2em; - color: rgba(0, 0, 0, 0.6); -} - -/* -------------- - Icon ---------------- */ - -.ui.header > .icons, -.ui.header > i.icon { - display: table-cell; - opacity: 1; - font-size: 1.5em; - padding-top: 0; - vertical-align: middle; -} - -/* With Text Node */ - -.ui.header:not(.icon) > .icons:only-child, -.ui.header:not(.icon) > i.icon:only-child { - display: inline-block; - padding: 0; - margin-right: 0.75rem; -} - -/* ------------------- - Image --------------------- */ - -.ui.header > .image:not(.icon), -.ui.header > img { - display: inline-block; - margin-top: 0.14285714em; - width: 2.5em; - height: auto; - vertical-align: middle; -} - -.ui.header > .image:not(.icon):only-child, -.ui.header > img:only-child { - margin-right: 0.75rem; -} - -/* -------------- - Content ---------------- */ - -.ui.header .content { - display: inline-block; - vertical-align: top; -} - -/* After Image */ - -.ui.header > img + .content, -.ui.header > .image + .content { - padding-left: 0.75rem; - vertical-align: middle; -} - -/* After Icon */ - -.ui.header:not(.icon):not(.centered):not(.aligned) > .icons + .content, -.ui.header:not(.icon):not(.centered):not(.aligned) > i.icon + .content { - padding-left: 0.75rem; - display: table-cell; - vertical-align: middle; -} - -/* -------------- - Loose Coupling ---------------- */ - -.ui.header .ui.label { - font-size: ""; - margin-left: 0.5rem; - vertical-align: middle; -} - -/* Positioning */ - -.ui.header + p { - margin-top: 0; -} - -/******************************* - Types -*******************************/ - -/* -------------- - Page ---------------- */ - -h1.ui.header { - font-size: 2rem; -} - -h1.ui.header .sub.header { - font-size: 1.14285714rem; -} - -h2.ui.header { - font-size: 1.71428571rem; -} - -h2.ui.header .sub.header { - font-size: 1.14285714rem; -} - -h3.ui.header { - font-size: 1.28571429rem; -} - -h3.ui.header .sub.header { - font-size: 1rem; -} - -h4.ui.header { - font-size: 1.07142857rem; -} - -h4.ui.header .sub.header { - font-size: 1rem; -} - -h5.ui.header { - font-size: 1rem; -} - -h5.ui.header .sub.header { - font-size: 0.92857143rem; -} - -h6.ui.header { - font-size: 0.85714286rem; -} - -h6.ui.header .sub.header { - font-size: 0.92857143rem; -} - -/* -------------- - Content Heading ---------------- */ - -.ui.mini.header { - font-size: 0.85714286em; -} - -.ui.mini.header .sub.header { - font-size: 0.92857143rem; -} - -.ui.mini.sub.header { - font-size: 0.78571429em; -} - -.ui.tiny.header { - font-size: 1em; -} - -.ui.tiny.header .sub.header { - font-size: 0.92857143rem; -} - -.ui.tiny.sub.header { - font-size: 0.78571429em; -} - -.ui.small.header { - font-size: 1.07142857em; -} - -.ui.small.header .sub.header { - font-size: 1rem; -} - -.ui.small.sub.header { - font-size: 0.78571429em; -} - -.ui.large.header { - font-size: 1.71428571em; -} - -.ui.large.header .sub.header { - font-size: 1.14285714rem; -} - -.ui.large.sub.header { - font-size: 0.92857143em; -} - -.ui.big.header { - font-size: 1.85714286em; -} - -.ui.big.header .sub.header { - font-size: 1.14285714rem; -} - -.ui.big.sub.header { - font-size: 1em; -} - -.ui.huge.header { - font-size: 2em; - min-height: 1em; -} - -.ui.huge.header .sub.header { - font-size: 1.14285714rem; -} - -.ui.huge.sub.header { - font-size: 1em; -} - -.ui.massive.header { - font-size: 2.28571429em; - min-height: 1em; -} - -.ui.massive.header .sub.header { - font-size: 1.42857143rem; -} - -.ui.massive.sub.header { - font-size: 1.14285714em; -} - -/* -------------- - Sub Heading - --------------- */ - -.ui.sub.header { - padding: 0; - margin-bottom: 0.14285714rem; - font-weight: bold; - font-size: 0.85714286em; - text-transform: uppercase; - color: ""; -} - -/* ------------------- - Icon - -------------------- */ - -.ui.icon.header { - display: inline-block; - text-align: center; - margin: 2rem 0 1rem; -} - -.ui.icon.header::after { - content: ""; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -.ui.icon.header:first-child { - margin-top: 0; -} - -.ui.icon.header > .image.icon, -.ui.icon.header > .icons, -.ui.icon.header > i.icon { - float: none; - display: block; - width: auto; - height: auto; - line-height: 1; - padding: 0; - font-size: 3em; - margin: 0 auto 0.5rem; - opacity: 1; -} - -.ui.icon.header .corner.icon { - font-size: calc(3em * 0.45); -} - -.ui.icon.header .content { - display: block; - padding: 0; -} - -.ui.icon.header > i.circular { - font-size: 2em; -} - -.ui.icon.header > i.square { - font-size: 2em; -} - -.ui.block.icon.header > .image.icon, -.ui.block.icon.header > .icons, -.ui.block.icon.header > i.icon { - margin-bottom: 0; -} - -.ui.icon.header.aligned { - margin-left: auto; - margin-right: auto; - display: block; -} - -/******************************* - States -*******************************/ - -.ui.disabled.header { - opacity: 0.45; -} - -/******************************* - Variations -*******************************/ - -/* ------------------- - Inverted - -------------------- */ - -.ui.inverted.header { - color: #fff; -} - -.ui.inverted.header .sub.header { - color: rgba(255, 255, 255, 0.8); -} - -.ui.inverted.attached.header { - background: #1b1c1d; - box-shadow: none; - border-color: transparent; -} - -.ui.inverted.block.header { - background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05)); - box-shadow: none; - border-bottom: none; -} - -/* ------------------- - Colors --------------------- */ - -.ui.primary.header { - color: #2185d0; -} - -a.ui.primary.header:hover { - color: #1678c2; -} - -.ui.primary.dividing.header { - border-bottom: 2px solid #2185d0; -} - -.ui.inverted.primary.header.header.header { - color: #54c8ff; -} - -a.ui.inverted.primary.header.header.header:hover { - color: #21b8ff; -} - -.ui.inverted.primary.dividing.header { - border-bottom: 2px solid #54c8ff; -} - -.ui.secondary.header { - color: #1b1c1d; -} - -a.ui.secondary.header:hover { - color: #27292a; -} - -.ui.secondary.dividing.header { - border-bottom: 2px solid #1b1c1d; -} - -.ui.inverted.secondary.header.header.header { - color: #545454; -} - -a.ui.inverted.secondary.header.header.header:hover { - color: #6e6e6e; -} - -.ui.inverted.secondary.dividing.header { - border-bottom: 2px solid #545454; -} - -.ui.red.header { - color: #db2828; -} - -a.ui.red.header:hover { - color: #d01919; -} - -.ui.red.dividing.header { - border-bottom: 2px solid #db2828; -} - -.ui.inverted.red.header.header.header { - color: #ff695e; -} - -a.ui.inverted.red.header.header.header:hover { - color: #ff392b; -} - -.ui.inverted.red.dividing.header { - border-bottom: 2px solid #ff695e; -} - -.ui.orange.header { - color: #f2711c; -} - -a.ui.orange.header:hover { - color: #f26202; -} - -.ui.orange.dividing.header { - border-bottom: 2px solid #f2711c; -} - -.ui.inverted.orange.header.header.header { - color: #ff851b; -} - -a.ui.inverted.orange.header.header.header:hover { - color: #e76b00; -} - -.ui.inverted.orange.dividing.header { - border-bottom: 2px solid #ff851b; -} - -.ui.yellow.header { - color: #fbbd08; -} - -a.ui.yellow.header:hover { - color: #eaae00; -} - -.ui.yellow.dividing.header { - border-bottom: 2px solid #fbbd08; -} - -.ui.inverted.yellow.header.header.header { - color: #ffe21f; -} - -a.ui.inverted.yellow.header.header.header:hover { - color: #ebcd00; -} - -.ui.inverted.yellow.dividing.header { - border-bottom: 2px solid #ffe21f; -} - -.ui.olive.header { - color: #b5cc18; -} - -a.ui.olive.header:hover { - color: #a7bd0d; -} - -.ui.olive.dividing.header { - border-bottom: 2px solid #b5cc18; -} - -.ui.inverted.olive.header.header.header { - color: #d9e778; -} - -a.ui.inverted.olive.header.header.header:hover { - color: #d2e745; -} - -.ui.inverted.olive.dividing.header { - border-bottom: 2px solid #d9e778; -} - -.ui.green.header { - color: #21ba45; -} - -a.ui.green.header:hover { - color: #16ab39; -} - -.ui.green.dividing.header { - border-bottom: 2px solid #21ba45; -} - -.ui.inverted.green.header.header.header { - color: #2ecc40; -} - -a.ui.inverted.green.header.header.header:hover { - color: #1ea92e; -} - -.ui.inverted.green.dividing.header { - border-bottom: 2px solid #2ecc40; -} - -.ui.teal.header { - color: #00b5ad; -} - -a.ui.teal.header:hover { - color: #009c95; -} - -.ui.teal.dividing.header { - border-bottom: 2px solid #00b5ad; -} - -.ui.inverted.teal.header.header.header { - color: #6dffff; -} - -a.ui.inverted.teal.header.header.header:hover { - color: #3affff; -} - -.ui.inverted.teal.dividing.header { - border-bottom: 2px solid #6dffff; -} - -.ui.blue.header { - color: #2185d0; -} - -a.ui.blue.header:hover { - color: #1678c2; -} - -.ui.blue.dividing.header { - border-bottom: 2px solid #2185d0; -} - -.ui.inverted.blue.header.header.header { - color: #54c8ff; -} - -a.ui.inverted.blue.header.header.header:hover { - color: #21b8ff; -} - -.ui.inverted.blue.dividing.header { - border-bottom: 2px solid #54c8ff; -} - -.ui.violet.header { - color: #6435c9; -} - -a.ui.violet.header:hover { - color: #5829bb; -} - -.ui.violet.dividing.header { - border-bottom: 2px solid #6435c9; -} - -.ui.inverted.violet.header.header.header { - color: #a291fb; -} - -a.ui.inverted.violet.header.header.header:hover { - color: #745aff; -} - -.ui.inverted.violet.dividing.header { - border-bottom: 2px solid #a291fb; -} - -.ui.purple.header { - color: #a333c8; -} - -a.ui.purple.header:hover { - color: #9627ba; -} - -.ui.purple.dividing.header { - border-bottom: 2px solid #a333c8; -} - -.ui.inverted.purple.header.header.header { - color: #dc73ff; -} - -a.ui.inverted.purple.header.header.header:hover { - color: #cf40ff; -} - -.ui.inverted.purple.dividing.header { - border-bottom: 2px solid #dc73ff; -} - -.ui.pink.header { - color: #e03997; -} - -a.ui.pink.header:hover { - color: #e61a8d; -} - -.ui.pink.dividing.header { - border-bottom: 2px solid #e03997; -} - -.ui.inverted.pink.header.header.header { - color: #ff8edf; -} - -a.ui.inverted.pink.header.header.header:hover { - color: #ff5bd1; -} - -.ui.inverted.pink.dividing.header { - border-bottom: 2px solid #ff8edf; -} - -.ui.brown.header { - color: #a5673f; -} - -a.ui.brown.header:hover { - color: #975b33; -} - -.ui.brown.dividing.header { - border-bottom: 2px solid #a5673f; -} - -.ui.inverted.brown.header.header.header { - color: #d67c1c; -} - -a.ui.inverted.brown.header.header.header:hover { - color: #b0620f; -} - -.ui.inverted.brown.dividing.header { - border-bottom: 2px solid #d67c1c; -} - -.ui.grey.header { - color: #767676; -} - -a.ui.grey.header:hover { - color: #838383; -} - -.ui.grey.dividing.header { - border-bottom: 2px solid #767676; -} - -.ui.inverted.grey.header.header.header { - color: #dcddde; -} - -a.ui.inverted.grey.header.header.header:hover { - color: #c2c4c5; -} - -.ui.inverted.grey.dividing.header { - border-bottom: 2px solid #dcddde; -} - -.ui.black.header { - color: #1b1c1d; -} - -a.ui.black.header:hover { - color: #27292a; -} - -.ui.black.dividing.header { - border-bottom: 2px solid #1b1c1d; -} - -.ui.inverted.black.header.header.header { - color: #545454; -} - -a.ui.inverted.black.header.header.header:hover { - color: #000000; -} - -.ui.inverted.black.dividing.header { - border-bottom: 2px solid #545454; -} - -/* ------------------- - Aligned - -------------------- */ - -.ui.left.aligned.header { - text-align: left; -} - -.ui.right.aligned.header { - text-align: right; -} - -.ui.centered.header, -.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[class*="left floated"].header { - float: left; - margin-top: 0; - margin-right: 0.5em; -} - -.ui[class*="right floated"].header { - float: right; - margin-top: 0; - margin-left: 0.5em; -} - -/* ------------------- - Fitted - -------------------- */ - -.ui.fitted.header { - padding: 0; -} - -/* ------------------- - Dividing - -------------------- */ - -.ui.dividing.header { - padding-bottom: 0.21428571rem; - border-bottom: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.dividing.header .sub.header { - padding-bottom: 0.21428571rem; -} - -.ui.dividing.header i.icon { - margin-bottom: 0; -} - -.ui.inverted.dividing.header { - border-bottom-color: rgba(255, 255, 255, 0.1); -} - -/* ------------------- - Block - -------------------- */ - -.ui.block.header { - background: #f3f4f5; - padding: 0.78571429rem 1rem; - box-shadow: none; - border: 1px solid #d4d4d5; - border-radius: 0.28571429rem; -} - -.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { - font-size: 1rem; -} - -.ui.mini.block.header { - font-size: 0.78571429rem; -} - -.ui.tiny.block.header { - font-size: 0.85714286rem; -} - -.ui.small.block.header { - font-size: 0.92857143rem; -} - -.ui.large.block.header { - font-size: 1.14285714rem; -} - -.ui.big.block.header { - font-size: 1.28571429rem; -} - -.ui.huge.block.header { - font-size: 1.42857143rem; -} - -.ui.massive.block.header { - font-size: 1.71428571rem; -} - -/* ------------------- - Attached - -------------------- */ - -.ui.attached.header { - background: #fff; - padding: 0.78571429rem 1rem; - margin: 0 -1px; - box-shadow: none; - border: 1px solid #d4d4d5; - border-radius: 0; -} - -.ui.attached.block.header { - background: #f3f4f5; -} - -.ui.attached:not(.top).header { - border-top: none; -} - -.ui.top.attached.header { - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui.bottom.attached.header { - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -/* Attached Sizes */ - -.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { - font-size: 1em; -} - -.ui.mini.attached.header { - font-size: 0.78571429em; -} - -.ui.tiny.attached.header { - font-size: 0.85714286em; -} - -.ui.small.attached.header { - font-size: 0.92857143em; -} - -.ui.large.attached.header { - font-size: 1.14285714em; -} - -.ui.big.attached.header { - font-size: 1.28571429em; -} - -.ui.huge.attached.header { - font-size: 1.42857143em; -} - -.ui.massive.attached.header { - font-size: 1.71428571em; -} - -/* ------------------- - Sizing --------------------- */ - -.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { - font-size: 1.28571429em; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Icon - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Icon -*******************************/ - -/*@font-face {*/ -/* font-family: "icons";*/ -/* src: url("./themes/default/assets/fonts/icons.woff2") format("woff2") , url("./themes/default/assets/fonts/icons.woff") format("woff");*/ -/* font-style: normal;*/ -/* font-weight: normal;*/ -/* font-display: block;*/ -/* font-variant: normal;*/ -/* text-decoration: inherit;*/ -/* text-transform: none;*/ -/*}*/ - -/*@font-face {*/ -/* font-family: "outline-icons";*/ -/* src: url("./themes/default/assets/fonts/outline-icons.woff2") format("woff2") , url("./themes/default/assets/fonts/outline-icons.woff") format("woff");*/ -/* font-style: normal;*/ -/* font-weight: normal;*/ -/* font-display: block;*/ -/* font-variant: normal;*/ -/* text-decoration: inherit;*/ -/* text-transform: none;*/ -/*}*/ - -/*@font-face {*/ -/* font-family: "brand-icons";*/ -/* src: url("./themes/default/assets/fonts/brand-icons.woff2") format("woff2") , url("./themes/default/assets/fonts/brand-icons.woff") format("woff");*/ -/* font-style: normal;*/ -/* font-weight: normal;*/ -/* font-display: block;*/ -/* font-variant: normal;*/ -/* text-decoration: inherit;*/ -/* text-transform: none;*/ -/*}*/ - -i.icon { - display: inline-block; - opacity: 1; - margin: 0 0.25rem 0 0; - width: 1.18em; - height: 1em; - font-family: "icons"; - font-style: normal; - font-weight: normal; - text-decoration: inherit; - text-align: center; - speak: none; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; -} - -i.icon::before { - background: none; -} - -/******************************* - Types -*******************************/ - -/* -------------- - Loading - --------------- */ - -i.loading.icon { - height: 1em; - line-height: 1; -} - -i.loading.icon, -i.loading.icons { - animation: loader 2s linear infinite; -} - -/******************************* - States -*******************************/ - -i.icon:hover, -i.icons:hover, -i.icon:active, -i.icons:active, -i.emphasized.icon:not(.disabled), -i.emphasized.icons:not(.disabled) { - opacity: 1; -} - -i.disabled.icon, -i.disabled.icons { - opacity: 0.45; - cursor: default; - pointer-events: none; -} - -/******************************* - Variations -*******************************/ - -/* ------------------- - Fitted - -------------------- */ - -i.fitted.icons, -i.fitted.icon { - width: auto; - margin: 0 !important; -} - -/* ------------------- - Link - -------------------- */ - -i.link.icon:not(.disabled), -i.link.icons:not(.disabled) { - cursor: pointer; - opacity: 0.8; - transition: opacity 0.1s ease; -} - -i.link.icon:hover, -i.link.icons:hover { - opacity: 1; -} - -/* ------------------- - Circular - -------------------- */ - -i.circular.icon { - border-radius: 500em !important; - line-height: 1 !important; - padding: 0.5em 0 !important; - box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset; - width: 2em !important; - height: 2em !important; -} - -i.circular.icon.colored { - box-shadow: 0 0 0 0.1em currentColor inset; -} - -i.circular.inverted.icon { - border: none; - box-shadow: none; -} - -/* ------------------- - Flipped - -------------------- */ - -i.flipped.icon, -i.horizontally.flipped.icon { - transform: scale(-1, 1); -} - -i.vertically.flipped.icon { - transform: scale(1, -1); -} - -.icons i.flipped.icon:not(.corner):not(:first-child), -.icons i.horizontally.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(-1, 1); -} - -.icons i.vertically.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(1, -1); -} - -/* ------------------- - Rotated - -------------------- */ - -i.rotated.icon, -i.right.rotated.icon, -i.clockwise.rotated.icon { - transform: rotate(90deg); -} - -i.left.rotated.icon, -i.counterclockwise.rotated.icon { - transform: rotate(-90deg); -} - -i.halfway.rotated.icon { - transform: rotate(180deg); -} - -.icons i.rotated.rotated.icon:not(.corner):not(:first-child), -.icons i.right.rotated.icon:not(.corner):not(:first-child), -.icons i.clockwise.rotated.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) rotate(90deg); -} - -.icons i.left.rotated.icon:not(.corner):not(:first-child), -.icons i.counterclockwise.rotated.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) rotate(-90deg); -} - -.icons i.halfway.rotated.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) rotate(180deg); -} - -/* -------------------------- - Flipped & Rotated - --------------------------- */ - -i.rotated.flipped.icon, -i.right.rotated.flipped.icon, -i.clockwise.rotated.flipped.icon { - transform: scale(-1, 1) rotate(90deg); -} - -i.left.rotated.flipped.icon, -i.counterclockwise.rotated.flipped.icon { - transform: scale(-1, 1) rotate(-90deg); -} - -i.halfway.rotated.flipped.icon { - transform: scale(-1, 1) rotate(180deg); -} - -i.rotated.vertically.flipped.icon, -i.right.rotated.vertically.flipped.icon, -i.clockwise.rotated.vertically.flipped.icon { - transform: scale(1, -1) rotate(90deg); -} - -i.left.rotated.vertically.flipped.icon, -i.counterclockwise.rotated.vertically.flipped.icon { - transform: scale(1, -1) rotate(-90deg); -} - -i.halfway.rotated.vertically.flipped.icon { - transform: scale(1, -1) rotate(180deg); -} - -.icons i.rotated.flipped.icon:not(.corner):not(:first-child), -.icons i.right.rotated.flipped.icon:not(.corner):not(:first-child), -.icons i.clockwise.rotated.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(90deg); -} - -.icons i.left.rotated.flipped.icon:not(.corner):not(:first-child), -.icons i.counterclockwise.rotated.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(-90deg); -} - -.icons i.halfway.rotated.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(180deg); -} - -.icons i.rotated.vertically.flipped.icon:not(.corner):not(:first-child), -.icons i.right.rotated.vertically.flipped.icon:not(.corner):not(:first-child), -.icons i.clockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(90deg); -} - -.icons i.left.rotated.vertically.flipped.icon:not(.corner):not(:first-child), -.icons i.counterclockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(-90deg); -} - -.icons i.halfway.rotated.vertically.flipped.icon:not(.corner):not(:first-child) { - transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(180deg); -} - -/* ------------------- - Bordered - -------------------- */ - -i.bordered.icon { - line-height: 1; - vertical-align: baseline; - width: 2em; - height: 2em; - padding: 0.5em 0 !important; - box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset; -} - -i.bordered.icon.colored { - box-shadow: 0 0 0 0.1em currentColor inset; -} - -i.bordered.inverted.icon { - border: none; - box-shadow: none; -} - -/* ------------------- - Inverted - -------------------- */ - -/* Inverted Shapes */ - -i.inverted.bordered.icon, -i.inverted.circular.icon { - background-color: #1b1c1d; - color: #fff; -} - -i.inverted.icon { - color: #fff; -} - -/* ------------------- - Colors --------------------- */ - -i.primary.icon.icon.icon.icon.icon.icon { - color: #2185d0; -} - -i.inverted.primary.icon.icon.icon.icon.icon.icon { - color: #54c8ff; -} - -i.inverted.bordered.primary.icon.icon.icon.icon.icon.icon, -i.inverted.circular.primary.icon.icon.icon.icon.icon.icon, -i.inverted.bordered.primary.icons, -i.inverted.circular.primary.icons { - background-color: #2185d0; - color: #fff; -} - -i.secondary.icon.icon.icon.icon.icon.icon { - color: #1b1c1d; -} - -i.inverted.secondary.icon.icon.icon.icon.icon.icon { - color: #545454; -} - -i.inverted.bordered.secondary.icon.icon.icon.icon.icon.icon, -i.inverted.circular.secondary.icon.icon.icon.icon.icon.icon, -i.inverted.bordered.secondary.icons, -i.inverted.circular.secondary.icons { - background-color: #1b1c1d; - color: #fff; -} - -i.red.icon.icon.icon.icon.icon.icon { - color: #db2828; -} - -i.inverted.red.icon.icon.icon.icon.icon.icon { - color: #ff695e; -} - -i.inverted.bordered.red.icon.icon.icon.icon.icon.icon, -i.inverted.circular.red.icon.icon.icon.icon.icon.icon, -i.inverted.bordered.red.icons, -i.inverted.circular.red.icons { - background-color: #db2828; - color: #fff; -} - -i.orange.icon.icon.icon.icon.icon.icon { - color: #f2711c; -} - -i.inverted.orange.icon.icon.icon.icon.icon.icon { - color: #ff851b; -} - -i.inverted.bordered.orange.icon.icon.icon.icon.icon.icon, -i.inverted.circular.orange.icon.icon.icon.icon.icon.icon, -i.inverted.bordered.orange.icons, -i.inverted.circular.orange.icons { - background-color: #f2711c; - color: #fff; -} - -i.yellow.icon.icon.icon.icon.icon.icon { - color: #fbbd08; -} - -i.inverted.yellow.icon.icon.icon.icon.icon.icon { - color: #ffe21f; -} - -i.inverted.bordered.yellow.icon.icon.icon.icon.icon.icon, -i.inverted.circular.yellow.icon.icon.icon.icon.icon.icon, -i.inverted.bordered.yellow.icons, -i.inverted.circular.yellow.icons { - background-color: #fbbd08; - color: #fff; -} - -i.olive.icon.icon.icon.icon.icon.icon { - color: #b5cc18; -} - -i.inverted.olive.icon.icon.icon.icon.icon.icon { - color: #d9e778; -} - -i.inverted.bordered.olive.icon.icon.icon.icon.icon.icon, -i.inverted.circular.olive.icon.icon.icon.icon.icon.icon, -i.inverted.bordered.olive.icons, -i.inverted.circular.olive.icons { - background-color: #b5cc18; - color: #fff; -} - -i.green.icon.icon.icon.icon.icon.icon { - color: #21ba45; -} - -i.inverted.green.icon.icon.icon.icon.icon.icon { - color: #2ecc40; -} - -i.inverted.bordered.green.icon.icon.icon.icon.icon.icon, -i.inverted.circular.green.icon.icon.icon.icon.icon.icon, -i.inverted.bordered.green.icons, -i.inverted.circular.green.icons { - background-color: #21ba45; - color: #fff; -} - -i.teal.icon.icon.icon.icon.icon.icon { - color: #00b5ad; -} - -i.inverted.teal.icon.icon.icon.icon.icon.icon { - color: #6dffff; -} - -i.inverted.bordered.teal.icon.icon.icon.icon.icon.icon, -i.inverted.circular.teal.icon.icon.icon.icon.icon.icon, -i.inverted.bordered.teal.icons, -i.inverted.circular.teal.icons { - background-color: #00b5ad; - color: #fff; -} - -i.blue.icon.icon.icon.icon.icon.icon { - color: #2185d0; -} - -i.inverted.blue.icon.icon.icon.icon.icon.icon { - color: #54c8ff; -} - -i.inverted.bordered.blue.icon.icon.icon.icon.icon.icon, -i.inverted.circular.blue.icon.icon.icon.icon.icon.icon, -i.inverted.bordered.blue.icons, -i.inverted.circular.blue.icons { - background-color: #2185d0; - color: #fff; -} - -i.violet.icon.icon.icon.icon.icon.icon { - color: #6435c9; -} - -i.inverted.violet.icon.icon.icon.icon.icon.icon { - color: #a291fb; -} - -i.inverted.bordered.violet.icon.icon.icon.icon.icon.icon, -i.inverted.circular.violet.icon.icon.icon.icon.icon.icon, -i.inverted.bordered.violet.icons, -i.inverted.circular.violet.icons { - background-color: #6435c9; - color: #fff; -} - -i.purple.icon.icon.icon.icon.icon.icon { - color: #a333c8; -} - -i.inverted.purple.icon.icon.icon.icon.icon.icon { - color: #dc73ff; -} - -i.inverted.bordered.purple.icon.icon.icon.icon.icon.icon, -i.inverted.circular.purple.icon.icon.icon.icon.icon.icon, -i.inverted.bordered.purple.icons, -i.inverted.circular.purple.icons { - background-color: #a333c8; - color: #fff; -} - -i.pink.icon.icon.icon.icon.icon.icon { - color: #e03997; -} - -i.inverted.pink.icon.icon.icon.icon.icon.icon { - color: #ff8edf; -} - -i.inverted.bordered.pink.icon.icon.icon.icon.icon.icon, -i.inverted.circular.pink.icon.icon.icon.icon.icon.icon, -i.inverted.bordered.pink.icons, -i.inverted.circular.pink.icons { - background-color: #e03997; - color: #fff; -} - -i.brown.icon.icon.icon.icon.icon.icon { - color: #a5673f; -} - -i.inverted.brown.icon.icon.icon.icon.icon.icon { - color: #d67c1c; -} - -i.inverted.bordered.brown.icon.icon.icon.icon.icon.icon, -i.inverted.circular.brown.icon.icon.icon.icon.icon.icon, -i.inverted.bordered.brown.icons, -i.inverted.circular.brown.icons { - background-color: #a5673f; - color: #fff; -} - -i.grey.icon.icon.icon.icon.icon.icon { - color: #767676; -} - -i.inverted.grey.icon.icon.icon.icon.icon.icon { - color: #dcddde; -} - -i.inverted.bordered.grey.icon.icon.icon.icon.icon.icon, -i.inverted.circular.grey.icon.icon.icon.icon.icon.icon, -i.inverted.bordered.grey.icons, -i.inverted.circular.grey.icons { - background-color: #767676; - color: #fff; -} - -i.black.icon.icon.icon.icon.icon.icon { - color: #1b1c1d; -} - -i.inverted.black.icon.icon.icon.icon.icon.icon { - color: #545454; -} - -i.inverted.bordered.black.icon.icon.icon.icon.icon.icon, -i.inverted.circular.black.icon.icon.icon.icon.icon.icon, -i.inverted.bordered.black.icons, -i.inverted.circular.black.icons { - background-color: #1b1c1d; - color: #fff; -} - -/* ------------------- - Sizes --------------------- */ - -i.icon, -i.icons { - font-size: 1em; - line-height: 1; - font-style: normal; -} - -i.mini.mini.mini.icon, -i.mini.mini.mini.icons { - font-size: 0.4em; - vertical-align: middle; -} - -i.tiny.tiny.tiny.icon, -i.tiny.tiny.tiny.icons { - font-size: 0.5em; - vertical-align: middle; -} - -i.small.small.small.icon, -i.small.small.small.icons { - font-size: 0.75em; - vertical-align: middle; -} - -i.large.large.large.icon, -i.large.large.large.icons { - font-size: 1.5em; - vertical-align: middle; -} - -i.big.big.big.icon, -i.big.big.big.icons { - font-size: 2em; - vertical-align: middle; -} - -i.huge.huge.huge.icon, -i.huge.huge.huge.icons { - font-size: 4em; - vertical-align: middle; -} - -i.massive.massive.massive.icon, -i.massive.massive.massive.icons { - font-size: 8em; - vertical-align: middle; -} - -/******************************* - Groups - *******************************/ - -i.icons { - display: inline-block; - position: relative; - line-height: 1; - min-width: 1.18em; - min-height: 1em; - margin: 0 0.25rem 0 0; - text-align: center; -} - -i.icons .icon { - position: absolute; - top: 50%; - left: 50%; - margin: 0; -} - -i.icons .icon:not(.corner):not(.rotated):not(.flipped) { - transform: translateX(-50%) translateY(-50%); -} - -i.icons .icon:first-child { - position: static; - width: auto; - height: auto; - vertical-align: top; -} - -i.icons:not(.bordered):not(.circular) .icon:first-child:not(.rotated):not(.flipped) { - transform: none; -} - -/* Corner Icon */ - -i.icons .corner.icon { - top: auto; - left: auto; - right: 0; - bottom: 0; - font-size: 0.45em; - text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; -} - -i.icons .corner.icon:not(.rotated):not(.flipped) { - transform: none; -} - -i.icons .icon.corner[class*="top right"] { - top: 0; - left: auto; - right: 0; - bottom: auto; -} - -i.icons .icon.corner[class*="top left"] { - top: 0; - left: 0; - right: auto; - bottom: auto; -} - -i.icons .icon.corner[class*="bottom left"] { - top: auto; - left: 0; - right: auto; - bottom: 0; -} - -i.icons .icon.corner[class*="bottom right"] { - top: auto; - left: auto; - right: 0; - bottom: 0; -} - -i.icons .inverted.corner.icon { - text-shadow: -1px -1px 0 #1b1c1d, 1px -1px 0 #1b1c1d, -1px 1px 0 #1b1c1d, 1px 1px 0 #1b1c1d; -} - -/************************************************* - Bordered/circular with corner or group icons - *************************************************/ - -i.bordered.icons, -i.circular.icons { - width: 2em; - height: 2em; - box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset; - vertical-align: middle; -} - -i.bordered.icons.colored, -i.circular.icons.colored { - box-shadow: 0 0 0 0.1em currentColor inset; -} - -i.circular.icons { - border-radius: 500em; -} - -i.bordered.icons i.icon:first-child, -i.circular.icons i.icon:first-child { - position: absolute; - transform: translateX(-50%) translateY(-50%); -} - -/* Inverted Icon */ - -i.bordered.inverted.icons, -i.circular.inverted.icons { - border: none; - box-shadow: none; - background-color: #1b1c1d; - color: #fff; -} - -/* Corner Icon */ - -i.bordered.icons .icon.corner, -i.circular.icons .icon.corner, -i.bordered.icons .icon.corner[class*="bottom right"], -i.circular.icons .icon.corner[class*="bottom right"] { - top: auto; - left: auto; - right: 1.15em; - bottom: 1.15em; -} - -i.bordered.icons .icon.corner[class*="top right"], -i.circular.icons .icon.corner[class*="top right"] { - top: 1.15em; - left: auto; - right: 1.15em; - bottom: auto; -} - -i.bordered.icons .icon.corner[class*="top left"], -i.circular.icons .icon.corner[class*="top left"] { - top: 1.15em; - left: 1.15em; - right: auto; - bottom: auto; -} - -i.bordered.icons .icon.corner[class*="bottom left"], -i.circular.icons .icon.corner[class*="bottom left"] { - top: auto; - left: 1.15em; - right: auto; - bottom: 1.15em; -} - -/* Deprecated *In/Out Naming Conflict) */ - -i.icon.linkedin.in::before { - content: "\f0e1"; -} - -i.icon.zoom.in::before { - content: "\f00e"; -} - -i.icon.zoom.out::before { - content: "\f010"; -} - -i.icon.sign.in::before { - content: "\f2f6"; -} - -i.icon.in.cart::before { - content: "\f218"; -} - -i.icon.log.out::before { - content: "\f2f5"; -} - -i.icon.sign.out::before { - content: "\f2f5"; -} - -i.icon.sign.in.alternate::before { - content: "\f2f6"; -} - -i.icon.sign.out.alternate::before { - content: "\f2f5"; -} - -/******************************* - Solid Icons - *******************************/ - -/* Icons */ - -i.icon.ad::before { - content: "\f641"; -} - -i.icon.address.book::before { - content: "\f2b9"; -} - -i.icon.address.card::before { - content: "\f2bb"; -} - -i.icon.adjust::before { - content: "\f042"; -} - -i.icon.air.freshener::before { - content: "\f5d0"; -} - -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.allergies::before { - content: "\f461"; -} - -i.icon.ambulance::before { - content: "\f0f9"; -} - -i.icon.american.sign.language.interpreting::before { - content: "\f2a3"; -} - -i.icon.anchor::before { - content: "\f13d"; -} - -i.icon.angle.double.down::before { - content: "\f103"; -} - -i.icon.angle.double.left::before { - content: "\f100"; -} - -i.icon.angle.double.right::before { - content: "\f101"; -} - -i.icon.angle.double.up::before { - content: "\f102"; -} - -i.icon.angle.left::before { - content: "\f104"; -} - -i.icon.angle.right::before { - content: "\f105"; -} - -i.icon.angle.up::before { - content: "\f106"; -} - -i.icon.angle.down::before { - content: "\f107"; -} - -i.icon.angry::before { - content: "\f556"; -} - -i.icon.ankh::before { - content: "\f644"; -} - -i.icon.archive::before { - content: "\f187"; -} - -i.icon.archway::before { - content: "\f557"; -} - -i.icon.arrow.alternate.circle.down::before { - content: "\f358"; -} - -i.icon.arrow.alternate.circle.left::before { - content: "\f359"; -} - -i.icon.arrow.alternate.circle.right::before { - content: "\f35a"; -} - -i.icon.arrow.alternate.circle.up::before { - content: "\f35b"; -} - -i.icon.arrow.circle.down::before { - content: "\f0ab"; -} - -i.icon.arrow.circle.left::before { - content: "\f0a8"; -} - -i.icon.arrow.circle.right::before { - content: "\f0a9"; -} - -i.icon.arrow.circle.up::before { - content: "\f0aa"; -} - -i.icon.arrow.down::before { - content: "\f063"; -} - -i.icon.arrow.left::before { - content: "\f060"; -} - -i.icon.arrow.right::before { - content: "\f061"; -} - -i.icon.arrow.up::before { - content: "\f062"; -} - -i.icon.arrows.alternate::before { - content: "\f0b2"; -} - -i.icon.arrows.alternate.horizontal::before { - content: "\f337"; -} - -i.icon.arrows.alternate.vertical::before { - content: "\f338"; -} - -i.icon.assistive.listening.systems::before { - content: "\f2a2"; -} - -i.icon.asterisk::before { - content: "\f069"; -} - -i.icon.at::before { - content: "\f1fa"; -} - -i.icon.atlas::before { - content: "\f558"; -} - -i.icon.atom::before { - content: "\f5d2"; -} - -i.icon.audio.description::before { - content: "\f29e"; -} - -i.icon.award::before { - content: "\f559"; -} - -i.icon.baby::before { - content: "\f77c"; -} - -i.icon.baby.carriage::before { - content: "\f77d"; -} - -i.icon.backspace::before { - content: "\f55a"; -} - -i.icon.backward::before { - content: "\f04a"; -} - -i.icon.bacon::before { - content: "\f7e5"; -} - -i.icon.bacteria::before { - content: "\e059"; -} - -i.icon.bacterium::before { - content: "\e05a"; -} - -i.icon.bahai::before { - content: "\f666"; -} - -i.icon.balance.scale::before { - content: "\f24e"; -} - -i.icon.balance.scale.left::before { - content: "\f515"; -} - -i.icon.balance.scale.right::before { - content: "\f516"; -} - -i.icon.ban::before { - content: "\f05e"; -} - -i.icon.band.aid::before { - content: "\f462"; -} - -i.icon.barcode::before { - content: "\f02a"; -} - -i.icon.bars::before { - content: "\f0c9"; -} - -i.icon.baseball.ball::before { - content: "\f433"; -} - -i.icon.basketball.ball::before { - content: "\f434"; -} - -i.icon.bath::before { - content: "\f2cd"; -} - -i.icon.battery.empty::before { - content: "\f244"; -} - -i.icon.battery.full::before { - content: "\f240"; -} - -i.icon.battery.half::before { - content: "\f242"; -} - -i.icon.battery.quarter::before { - content: "\f243"; -} - -i.icon.battery.three.quarters::before { - content: "\f241"; -} - -i.icon.bed::before { - content: "\f236"; -} - -i.icon.beer::before { - content: "\f0fc"; -} - -i.icon.bell::before { - content: "\f0f3"; -} - -i.icon.bell.slash::before { - content: "\f1f6"; -} - -i.icon.bezier.curve::before { - content: "\f55b"; -} - -i.icon.bible::before { - content: "\f647"; -} - -i.icon.bicycle::before { - content: "\f206"; -} - -i.icon.biking::before { - content: "\f84a"; -} - -i.icon.binoculars::before { - content: "\f1e5"; -} - -i.icon.biohazard::before { - content: "\f780"; -} - -i.icon.birthday.cake::before { - content: "\f1fd"; -} - -i.icon.blender::before { - content: "\f517"; -} - -i.icon.blender.phone::before { - content: "\f6b6"; -} - -i.icon.blind::before { - content: "\f29d"; -} - -i.icon.blog::before { - content: "\f781"; -} - -i.icon.bold::before { - content: "\f032"; -} - -i.icon.bolt::before { - content: "\f0e7"; -} - -i.icon.bomb::before { - content: "\f1e2"; -} - -i.icon.bone::before { - content: "\f5d7"; -} - -i.icon.bong::before { - content: "\f55c"; -} - -i.icon.book::before { - content: "\f02d"; -} - -i.icon.book.dead::before { - content: "\f6b7"; -} - -i.icon.book.medical::before { - content: "\f7e6"; -} - -i.icon.book.open::before { - content: "\f518"; -} - -i.icon.book.reader::before { - content: "\f5da"; -} - -i.icon.bookmark::before { - content: "\f02e"; -} - -i.icon.border.all::before { - content: "\f84c"; -} - -i.icon.border.none::before { - content: "\f850"; -} - -i.icon.border.style::before { - content: "\f853"; -} - -i.icon.bowling.ball::before { - content: "\f436"; -} - -i.icon.box::before { - content: "\f466"; -} - -i.icon.box.open::before { - content: "\f49e"; -} - -i.icon.box.tissue::before { - content: "\e05b"; -} - -i.icon.boxes::before { - content: "\f468"; -} - -i.icon.braille::before { - content: "\f2a1"; -} - -i.icon.brain::before { - content: "\f5dc"; -} - -i.icon.bread.slice::before { - content: "\f7ec"; -} - -i.icon.briefcase::before { - content: "\f0b1"; -} - -i.icon.briefcase.medical::before { - content: "\f469"; -} - -i.icon.broadcast.tower::before { - content: "\f519"; -} - -i.icon.broom::before { - content: "\f51a"; -} - -i.icon.brush::before { - content: "\f55d"; -} - -i.icon.bug::before { - content: "\f188"; -} - -i.icon.building::before { - content: "\f1ad"; -} - -i.icon.bullhorn::before { - content: "\f0a1"; -} - -i.icon.bullseye::before { - content: "\f140"; -} - -i.icon.burn::before { - content: "\f46a"; -} - -i.icon.bus::before { - content: "\f207"; -} - -i.icon.bus.alternate::before { - content: "\f55e"; -} - -i.icon.business.time::before { - content: "\f64a"; -} - -i.icon.calculator::before { - content: "\f1ec"; -} - -i.icon.calendar::before { - content: "\f133"; -} - -i.icon.calendar.alternate::before { - content: "\f073"; -} - -i.icon.calendar.check::before { - content: "\f274"; -} - -i.icon.calendar.day::before { - content: "\f783"; -} - -i.icon.calendar.minus::before { - content: "\f272"; -} - -i.icon.calendar.plus::before { - content: "\f271"; -} - -i.icon.calendar.times::before { - content: "\f273"; -} - -i.icon.calendar.week::before { - content: "\f784"; -} - -i.icon.camera::before { - content: "\f030"; -} - -i.icon.camera.retro::before { - content: "\f083"; -} - -i.icon.campground::before { - content: "\f6bb"; -} - -i.icon.candy.cane::before { - content: "\f786"; -} - -i.icon.cannabis::before { - content: "\f55f"; -} - -i.icon.capsules::before { - content: "\f46b"; -} - -i.icon.car::before { - content: "\f1b9"; -} - -i.icon.car.alternate::before { - content: "\f5de"; -} - -i.icon.car.battery::before { - content: "\f5df"; -} - -i.icon.car.crash::before { - content: "\f5e1"; -} - -i.icon.car.side::before { - content: "\f5e4"; -} - -i.icon.caravan::before { - content: "\f8ff"; -} - -i.icon.caret.down::before { - content: "\f0d7"; -} - -i.icon.caret.left::before { - content: "\f0d9"; -} - -i.icon.caret.right::before { - content: "\f0da"; -} - -i.icon.caret.square.down::before { - content: "\f150"; -} - -i.icon.caret.square.left::before { - content: "\f191"; -} - -i.icon.caret.square.right::before { - content: "\f152"; -} - -i.icon.caret.square.up::before { - content: "\f151"; -} - -i.icon.caret.up::before { - content: "\f0d8"; -} - -i.icon.carrot::before { - content: "\f787"; -} - -i.icon.cart.arrow.down::before { - content: "\f218"; -} - -i.icon.cart.plus::before { - content: "\f217"; -} - -i.icon.cash.register::before { - content: "\f788"; -} - -i.icon.cat::before { - content: "\f6be"; -} - -i.icon.certificate::before { - content: "\f0a3"; -} - -i.icon.chair::before { - content: "\f6c0"; -} - -i.icon.chalkboard::before { - content: "\f51b"; -} - -i.icon.chalkboard.teacher::before { - content: "\f51c"; -} - -i.icon.charging.station::before { - content: "\f5e7"; -} - -i.icon.chart.area::before { - content: "\f1fe"; -} - -i.icon.chart.bar::before { - content: "\f080"; -} - -i.icon.chart.pie::before { - content: "\f200"; -} - -i.icon.chartline::before { - content: "\f201"; -} - -i.icon.check::before { - content: "\f00c"; -} - -i.icon.check.circle::before { - content: "\f058"; -} - -i.icon.check.double::before { - content: "\f560"; -} - -i.icon.check.square::before { - content: "\f14a"; -} - -i.icon.cheese::before { - content: "\f7ef"; -} - -i.icon.chess::before { - content: "\f439"; -} - -i.icon.chess.bishop::before { - content: "\f43a"; -} - -i.icon.chess.board::before { - content: "\f43c"; -} - -i.icon.chess.king::before { - content: "\f43f"; -} - -i.icon.chess.knight::before { - content: "\f441"; -} - -i.icon.chess.pawn::before { - content: "\f443"; -} - -i.icon.chess.queen::before { - content: "\f445"; -} - -i.icon.chess.rook::before { - content: "\f447"; -} - -i.icon.chevron.circle.down::before { - content: "\f13a"; -} - -i.icon.chevron.circle.left::before { - content: "\f137"; -} - -i.icon.chevron.circle.right::before { - content: "\f138"; -} - -i.icon.chevron.circle.up::before { - content: "\f139"; -} - -i.icon.chevron.down::before { - content: "\f078"; -} - -i.icon.chevron.left::before { - content: "\f053"; -} - -i.icon.chevron.right::before { - content: "\f054"; -} - -i.icon.chevron.up::before { - content: "\f077"; -} - -i.icon.child::before { - content: "\f1ae"; -} - -i.icon.church::before { - content: "\f51d"; -} - -i.icon.circle::before { - content: "\f111"; -} - -i.icon.circle.notch::before { - content: "\f1ce"; -} - -i.icon.city::before { - content: "\f64f"; -} - -i.icon.clinic.medical::before { - content: "\f7f2"; -} - -i.icon.clipboard::before { - content: "\f328"; -} - -i.icon.clipboard.check::before { - content: "\f46c"; -} - -i.icon.clipboard.list::before { - content: "\f46d"; -} - -i.icon.clock::before { - content: "\f017"; -} - -i.icon.clone::before { - content: "\f24d"; -} - -i.icon.closed.captioning::before { - content: "\f20a"; -} - -i.icon.cloud::before { - content: "\f0c2"; -} - -i.icon.cloud.download.alternate::before { - content: "\f381"; -} - -i.icon.cloud.meatball::before { - content: "\f73b"; -} - -i.icon.cloud.moon::before { - content: "\f6c3"; -} - -i.icon.cloud.moon.rain::before { - content: "\f73c"; -} - -i.icon.cloud.rain::before { - content: "\f73d"; -} - -i.icon.cloud.showers.heavy::before { - content: "\f740"; -} - -i.icon.cloud.sun::before { - content: "\f6c4"; -} - -i.icon.cloud.sun.rain::before { - content: "\f743"; -} - -i.icon.cloud.upload.alternate::before { - content: "\f382"; -} - -i.icon.cocktail::before { - content: "\f561"; -} - -i.icon.code::before { - content: "\f121"; -} - -i.icon.code.branch::before { - content: "\f126"; -} - -i.icon.coffee::before { - content: "\f0f4"; -} - -i.icon.cog::before { - content: "\f013"; -} - -i.icon.cogs::before { - content: "\f085"; -} - -i.icon.coins::before { - content: "\f51e"; -} - -i.icon.columns::before { - content: "\f0db"; -} - -i.icon.comment::before { - content: "\f075"; -} - -i.icon.comment.alternate::before { - content: "\f27a"; -} - -i.icon.comment.dollar::before { - content: "\f651"; -} - -i.icon.comment.dots::before { - content: "\f4ad"; -} - -i.icon.comment.medical::before { - content: "\f7f5"; -} - -i.icon.comment.slash::before { - content: "\f4b3"; -} - -i.icon.comments::before { - content: "\f086"; -} - -i.icon.comments.dollar::before { - content: "\f653"; -} - -i.icon.compact.disc::before { - content: "\f51f"; -} - -i.icon.compass::before { - content: "\f14e"; -} - -i.icon.compress::before { - content: "\f066"; -} - -i.icon.compress.alternate::before { - content: "\f422"; -} - -i.icon.compress.arrows.alternate::before { - content: "\f78c"; -} - -i.icon.concierge.bell::before { - content: "\f562"; -} - -i.icon.cookie::before { - content: "\f563"; -} - -i.icon.cookie.bite::before { - content: "\f564"; -} - -i.icon.copy::before { - content: "\f0c5"; -} - -i.icon.copyright::before { - content: "\f1f9"; -} - -i.icon.couch::before { - content: "\f4b8"; -} - -i.icon.credit.card::before { - content: "\f09d"; -} - -i.icon.crop::before { - content: "\f125"; -} - -i.icon.crop.alternate::before { - content: "\f565"; -} - -i.icon.cross::before { - content: "\f654"; -} - -i.icon.crosshairs::before { - content: "\f05b"; -} - -i.icon.crow::before { - content: "\f520"; -} - -i.icon.crown::before { - content: "\f521"; -} - -i.icon.crutch::before { - content: "\f7f7"; -} - -i.icon.cube::before { - content: "\f1b2"; -} - -i.icon.cubes::before { - content: "\f1b3"; -} - -i.icon.cut::before { - content: "\f0c4"; -} - -i.icon.database::before { - content: "\f1c0"; -} - -i.icon.deaf::before { - content: "\f2a4"; -} - -i.icon.democrat::before { - content: "\f747"; -} - -i.icon.desktop::before { - content: "\f108"; -} - -i.icon.dharmachakra::before { - content: "\f655"; -} - -i.icon.diagnoses::before { - content: "\f470"; -} - -i.icon.dice::before { - content: "\f522"; -} - -i.icon.dice.d20::before { - content: "\f6cf"; -} - -i.icon.dice.d6::before { - content: "\f6d1"; -} - -i.icon.dice.five::before { - content: "\f523"; -} - -i.icon.dice.four::before { - content: "\f524"; -} - -i.icon.dice.one::before { - content: "\f525"; -} - -i.icon.dice.six::before { - content: "\f526"; -} - -i.icon.dice.three::before { - content: "\f527"; -} - -i.icon.dice.two::before { - content: "\f528"; -} - -i.icon.digital.tachograph::before { - content: "\f566"; -} - -i.icon.directions::before { - content: "\f5eb"; -} - -i.icon.disease::before { - content: "\f7fa"; -} - -i.icon.divide::before { - content: "\f529"; -} - -i.icon.dizzy::before { - content: "\f567"; -} - -i.icon.dna::before { - content: "\f471"; -} - -i.icon.dog::before { - content: "\f6d3"; -} - -i.icon.dollar.sign::before { - content: "\f155"; -} - -i.icon.dolly::before { - content: "\f472"; -} - -i.icon.dolly.flatbed::before { - content: "\f474"; -} - -i.icon.donate::before { - content: "\f4b9"; -} - -i.icon.door.closed::before { - content: "\f52a"; -} - -i.icon.door.open::before { - content: "\f52b"; -} - -i.icon.dot.circle::before { - content: "\f192"; -} - -i.icon.dove::before { - content: "\f4ba"; -} - -i.icon.download::before { - content: "\f019"; -} - -i.icon.drafting.compass::before { - content: "\f568"; -} - -i.icon.dragon::before { - content: "\f6d5"; -} - -i.icon.draw.polygon::before { - content: "\f5ee"; -} - -i.icon.drum::before { - content: "\f569"; -} - -i.icon.drum.steelpan::before { - content: "\f56a"; -} - -i.icon.drumstick.bite::before { - content: "\f6d7"; -} - -i.icon.dumbbell::before { - content: "\f44b"; -} - -i.icon.dumpster::before { - content: "\f793"; -} - -i.icon.dumpster.fire::before { - content: "\f794"; -} - -i.icon.dungeon::before { - content: "\f6d9"; -} - -i.icon.edit::before { - content: "\f044"; -} - -i.icon.egg::before { - content: "\f7fb"; -} - -i.icon.eject::before { - content: "\f052"; -} - -i.icon.ellipsis.horizontal::before { - content: "\f141"; -} - -i.icon.ellipsis.vertical::before { - content: "\f142"; -} - -i.icon.envelope::before { - content: "\f0e0"; -} - -i.icon.envelope.open::before { - content: "\f2b6"; -} - -i.icon.envelope.open.text::before { - content: "\f658"; -} - -i.icon.envelope.square::before { - content: "\f199"; -} - -i.icon.equals::before { - content: "\f52c"; -} - -i.icon.eraser::before { - content: "\f12d"; -} - -i.icon.ethernet::before { - content: "\f796"; -} - -i.icon.euro.sign::before { - content: "\f153"; -} - -i.icon.exchange.alternate::before { - content: "\f362"; -} - -i.icon.exclamation::before { - content: "\f12a"; -} - -i.icon.exclamation.circle::before { - content: "\f06a"; -} - -i.icon.exclamation.triangle::before { - content: "\f071"; -} - -i.icon.expand::before { - content: "\f065"; -} - -i.icon.expand.alternate::before { - content: "\f424"; -} - -i.icon.expand.arrows.alternate::before { - content: "\f31e"; -} - -i.icon.external.alternate::before { - content: "\f35d"; -} - -i.icon.external.link.square.alternate::before { - content: "\f360"; -} - -i.icon.eye::before { - content: "\f06e"; -} - -i.icon.eye.dropper::before { - content: "\f1fb"; -} - -i.icon.eye.slash::before { - content: "\f070"; -} - -i.icon.fan::before { - content: "\f863"; -} - -i.icon.fast.backward::before { - content: "\f049"; -} - -i.icon.fast.forward::before { - content: "\f050"; -} - -i.icon.faucet::before { - content: "\e005"; -} - -i.icon.fax::before { - content: "\f1ac"; -} - -i.icon.feather::before { - content: "\f52d"; -} - -i.icon.feather.alternate::before { - content: "\f56b"; -} - -i.icon.female::before { - content: "\f182"; -} - -i.icon.fighter.jet::before { - content: "\f0fb"; -} - -i.icon.file::before { - content: "\f15b"; -} - -i.icon.file.alternate::before { - content: "\f15c"; -} - -i.icon.file.archive::before { - content: "\f1c6"; -} - -i.icon.file.audio::before { - content: "\f1c7"; -} - -i.icon.file.code::before { - content: "\f1c9"; -} - -i.icon.file.contract::before { - content: "\f56c"; -} - -i.icon.file.csv::before { - content: "\f6dd"; -} - -i.icon.file.download::before { - content: "\f56d"; -} - -i.icon.file.excel::before { - content: "\f1c3"; -} - -i.icon.file.export::before { - content: "\f56e"; -} - -i.icon.file.image::before { - content: "\f1c5"; -} - -i.icon.file.import::before { - content: "\f56f"; -} - -i.icon.file.invoice::before { - content: "\f570"; -} - -i.icon.file.invoice.dollar::before { - content: "\f571"; -} - -i.icon.file.medical::before { - content: "\f477"; -} - -i.icon.file.medical.alternate::before { - content: "\f478"; -} - -i.icon.file.pdf::before { - content: "\f1c1"; -} - -i.icon.file.powerpoint::before { - content: "\f1c4"; -} - -i.icon.file.prescription::before { - content: "\f572"; -} - -i.icon.file.signature::before { - content: "\f573"; -} - -i.icon.file.upload::before { - content: "\f574"; -} - -i.icon.file.video::before { - content: "\f1c8"; -} - -i.icon.file.word::before { - content: "\f1c2"; -} - -i.icon.fill::before { - content: "\f575"; -} - -i.icon.fill.drip::before { - content: "\f576"; -} - -i.icon.film::before { - content: "\f008"; -} - -i.icon.filter::before { - content: "\f0b0"; -} - -i.icon.fingerprint::before { - content: "\f577"; -} - -i.icon.fire::before { - content: "\f06d"; -} - -i.icon.fire.alternate::before { - content: "\f7e4"; -} - -i.icon.fire.extinguisher::before { - content: "\f134"; -} - -i.icon.first.aid::before { - content: "\f479"; -} - -i.icon.fish::before { - content: "\f578"; -} - -i.icon.fist.raised::before { - content: "\f6de"; -} - -i.icon.flag::before { - content: "\f024"; -} - -i.icon.flag.checkered::before { - content: "\f11e"; -} - -i.icon.flag.usa::before { - content: "\f74d"; -} - -i.icon.flask::before { - content: "\f0c3"; -} - -i.icon.flushed::before { - content: "\f579"; -} - -i.icon.folder::before { - content: "\f07b"; -} - -i.icon.folder.minus::before { - content: "\f65d"; -} - -i.icon.folder.open::before { - content: "\f07c"; -} - -i.icon.folder.plus::before { - content: "\f65e"; -} - -i.icon.font::before { - content: "\f031"; -} - -i.icon.football.ball::before { - content: "\f44e"; -} - -i.icon.forward::before { - content: "\f04e"; -} - -i.icon.frog::before { - content: "\f52e"; -} - -i.icon.frown::before { - content: "\f119"; -} - -i.icon.frown.open::before { - content: "\f57a"; -} - -i.icon.fruit-apple::before { - content: "\f5d1"; -} - -i.icon.funnel.dollar::before { - content: "\f662"; -} - -i.icon.futbol::before { - content: "\f1e3"; -} - -i.icon.gamepad::before { - content: "\f11b"; -} - -i.icon.gas.pump::before { - content: "\f52f"; -} - -i.icon.gavel::before { - content: "\f0e3"; -} - -i.icon.gem::before { - content: "\f3a5"; -} - -i.icon.genderless::before { - content: "\f22d"; -} - -i.icon.ghost::before { - content: "\f6e2"; -} - -i.icon.gift::before { - content: "\f06b"; -} - -i.icon.gifts::before { - content: "\f79c"; -} - -i.icon.glass.cheers::before { - content: "\f79f"; -} - -i.icon.glass.martini::before { - content: "\f000"; -} - -i.icon.glass.martini.alternate::before { - content: "\f57b"; -} - -i.icon.glass.whiskey::before { - content: "\f7a0"; -} - -i.icon.glasses::before { - content: "\f530"; -} - -i.icon.globe::before { - content: "\f0ac"; -} - -i.icon.globe.africa::before { - content: "\f57c"; -} - -i.icon.globe.americas::before { - content: "\f57d"; -} - -i.icon.globe.asia::before { - content: "\f57e"; -} - -i.icon.globe.europe::before { - content: "\f7a2"; -} - -i.icon.golf.ball::before { - content: "\f450"; -} - -i.icon.gopuram::before { - content: "\f664"; -} - -i.icon.graduation.cap::before { - content: "\f19d"; -} - -i.icon.greater.than::before { - content: "\f531"; -} - -i.icon.greater.than.equal::before { - content: "\f532"; -} - -i.icon.grimace::before { - content: "\f57f"; -} - -i.icon.grin::before { - content: "\f580"; -} - -i.icon.grin.alternate::before { - content: "\f581"; -} - -i.icon.grin.beam::before { - content: "\f582"; -} - -i.icon.grin.beam.sweat::before { - content: "\f583"; -} - -i.icon.grin.hearts::before { - content: "\f584"; -} - -i.icon.grin.squint::before { - content: "\f585"; -} - -i.icon.grin.squint.tears::before { - content: "\f586"; -} - -i.icon.grin.stars::before { - content: "\f587"; -} - -i.icon.grin.tears::before { - content: "\f588"; -} - -i.icon.grin.tongue::before { - content: "\f589"; -} - -i.icon.grin.tongue.squint::before { - content: "\f58a"; -} - -i.icon.grin.tongue.wink::before { - content: "\f58b"; -} - -i.icon.grin.wink::before { - content: "\f58c"; -} - -i.icon.grip.horizontal::before { - content: "\f58d"; -} - -i.icon.grip.lines::before { - content: "\f7a4"; -} - -i.icon.grip.lines.vertical::before { - content: "\f7a5"; -} - -i.icon.grip.vertical::before { - content: "\f58e"; -} - -i.icon.guitar::before { - content: "\f7a6"; -} - -i.icon.h.square::before { - content: "\f0fd"; -} - -i.icon.hamburger::before { - content: "\f805"; -} - -i.icon.hammer::before { - content: "\f6e3"; -} - -i.icon.hamsa::before { - content: "\f665"; -} - -i.icon.hand.holding::before { - content: "\f4bd"; -} - -i.icon.hand.holding.heart::before { - content: "\f4be"; -} - -i.icon.hand.holding.medical::before { - content: "\e05c"; -} - -i.icon.hand.holding.usd::before { - content: "\f4c0"; -} - -i.icon.hand.holding.water::before { - content: "\f4c1"; -} - -i.icon.hand.lizard::before { - content: "\f258"; -} - -i.icon.hand.middle.finger::before { - content: "\f806"; -} - -i.icon.hand.paper::before { - content: "\f256"; -} - -i.icon.hand.peace::before { - content: "\f25b"; -} - -i.icon.hand.point.down::before { - content: "\f0a7"; -} - -i.icon.hand.point.left::before { - content: "\f0a5"; -} - -i.icon.hand.point.right::before { - content: "\f0a4"; -} - -i.icon.hand.point.up::before { - content: "\f0a6"; -} - -i.icon.hand.pointer::before { - content: "\f25a"; -} - -i.icon.hand.rock::before { - content: "\f255"; -} - -i.icon.hand.scissors::before { - content: "\f257"; -} - -i.icon.hand.sparkles::before { - content: "\e05d"; -} - -i.icon.hand.spock::before { - content: "\f259"; -} - -i.icon.hands::before { - content: "\f4c2"; -} - -i.icon.hands.helping::before { - content: "\f4c4"; -} - -i.icon.hands.wash::before { - content: "\e05e"; -} - -i.icon.handshake::before { - content: "\f2b5"; -} - -i.icon.handshake.alternate.slash::before { - content: "\e05f"; -} - -i.icon.handshake.slash::before { - content: "\e060"; -} - -i.icon.hanukiah::before { - content: "\f6e6"; -} - -i.icon.hard.hat::before { - content: "\f807"; -} - -i.icon.hashtag::before { - content: "\f292"; -} - -i.icon.hat.cowboy::before { - content: "\f8c0"; -} - -i.icon.hat.cowboy.side::before { - content: "\f8c1"; -} - -i.icon.hat.wizard::before { - content: "\f6e8"; -} - -i.icon.hdd::before { - content: "\f0a0"; -} - -i.icon.head.side.cough::before { - content: "\e061"; -} - -i.icon.head.side.cough.slash::before { - content: "\e062"; -} - -i.icon.head.side.mask::before { - content: "\e063"; -} - -i.icon.head.side.virus::before { - content: "\e064"; -} - -i.icon.heading::before { - content: "\f1dc"; -} - -i.icon.headphones::before { - content: "\f025"; -} - -i.icon.headphones.alternate::before { - content: "\f58f"; -} - -i.icon.headset::before { - content: "\f590"; -} - -i.icon.heart::before { - content: "\f004"; -} - -i.icon.heart.broken::before { - content: "\f7a9"; -} - -i.icon.heartbeat::before { - content: "\f21e"; -} - -i.icon.helicopter::before { - content: "\f533"; -} - -i.icon.highlighter::before { - content: "\f591"; -} - -i.icon.hiking::before { - content: "\f6ec"; -} - -i.icon.hippo::before { - content: "\f6ed"; -} - -i.icon.history::before { - content: "\f1da"; -} - -i.icon.hockey.puck::before { - content: "\f453"; -} - -i.icon.holly.berry::before { - content: "\f7aa"; -} - -i.icon.home::before { - content: "\f015"; -} - -i.icon.horse::before { - content: "\f6f0"; -} - -i.icon.horse.head::before { - content: "\f7ab"; -} - -i.icon.hospital::before { - content: "\f0f8"; -} - -i.icon.hospital.alternate::before { - content: "\f47d"; -} - -i.icon.hospital.symbol::before { - content: "\f47e"; -} - -i.icon.hospital.user::before { - content: "\f80d"; -} - -i.icon.hot.tub::before { - content: "\f593"; -} - -i.icon.hotdog::before { - content: "\f80f"; -} - -i.icon.hotel::before { - content: "\f594"; -} - -i.icon.hourglass::before { - content: "\f254"; -} - -i.icon.hourglass.end::before { - content: "\f253"; -} - -i.icon.hourglass.half::before { - content: "\f252"; -} - -i.icon.hourglass.start::before { - content: "\f251"; -} - -i.icon.house.damage::before { - content: "\f6f1"; -} - -i.icon.house.user::before { - content: "\e065"; -} - -i.icon.hryvnia::before { - content: "\f6f2"; -} - -i.icon.i.cursor::before { - content: "\f246"; -} - -i.icon.ice.cream::before { - content: "\f810"; -} - -i.icon.icicles::before { - content: "\f7ad"; -} - -i.icon.icons::before { - content: "\f86d"; -} - -i.icon.id.badge::before { - content: "\f2c1"; -} - -i.icon.id.card::before { - content: "\f2c2"; -} - -i.icon.id.card.alternate::before { - content: "\f47f"; -} - -i.icon.igloo::before { - content: "\f7ae"; -} - -i.icon.image::before { - content: "\f03e"; -} - -i.icon.images::before { - content: "\f302"; -} - -i.icon.inbox::before { - content: "\f01c"; -} - -i.icon.indent::before { - content: "\f03c"; -} - -i.icon.industry::before { - content: "\f275"; -} - -i.icon.infinity::before { - content: "\f534"; -} - -i.icon.info::before { - content: "\f129"; -} - -i.icon.info.circle::before { - content: "\f05a"; -} - -i.icon.italic::before { - content: "\f033"; -} - -i.icon.jedi::before { - content: "\f669"; -} - -i.icon.joint::before { - content: "\f595"; -} - -i.icon.journal.whills::before { - content: "\f66a"; -} - -i.icon.kaaba::before { - content: "\f66b"; -} - -i.icon.key::before { - content: "\f084"; -} - -i.icon.keyboard::before { - content: "\f11c"; -} - -i.icon.khanda::before { - content: "\f66d"; -} - -i.icon.kiss::before { - content: "\f596"; -} - -i.icon.kiss.beam::before { - content: "\f597"; -} - -i.icon.kiss.wink.heart::before { - content: "\f598"; -} - -i.icon.kiwi.bird::before { - content: "\f535"; -} - -i.icon.landmark::before { - content: "\f66f"; -} - -i.icon.language::before { - content: "\f1ab"; -} - -i.icon.laptop::before { - content: "\f109"; -} - -i.icon.laptop.code::before { - content: "\f5fc"; -} - -i.icon.laptop.house::before { - content: "\e066"; -} - -i.icon.laptop.medical::before { - content: "\f812"; -} - -i.icon.laugh::before { - content: "\f599"; -} - -i.icon.laugh.beam::before { - content: "\f59a"; -} - -i.icon.laugh.squint::before { - content: "\f59b"; -} - -i.icon.laugh.wink::before { - content: "\f59c"; -} - -i.icon.layer.group::before { - content: "\f5fd"; -} - -i.icon.leaf::before { - content: "\f06c"; -} - -i.icon.lemon::before { - content: "\f094"; -} - -i.icon.less.than::before { - content: "\f536"; -} - -i.icon.less.than.equal::before { - content: "\f537"; -} - -i.icon.level.down.alternate::before { - content: "\f3be"; -} - -i.icon.level.up.alternate::before { - content: "\f3bf"; -} - -i.icon.life.ring::before { - content: "\f1cd"; -} - -i.icon.lightbulb::before { - content: "\f0eb"; -} - -i.icon.linkify::before { - content: "\f0c1"; -} - -i.icon.lira.sign::before { - content: "\f195"; -} - -i.icon.list::before { - content: "\f03a"; -} - -i.icon.list.alternate::before { - content: "\f022"; -} - -i.icon.list.ol::before { - content: "\f0cb"; -} - -i.icon.list.ul::before { - content: "\f0ca"; -} - -i.icon.location.arrow::before { - content: "\f124"; -} - -i.icon.lock::before { - content: "\f023"; -} - -i.icon.lock.open::before { - content: "\f3c1"; -} - -i.icon.long.arrow.alternate.down::before { - content: "\f309"; -} - -i.icon.long.arrow.alternate.left::before { - content: "\f30a"; -} - -i.icon.long.arrow.alternate.right::before { - content: "\f30b"; -} - -i.icon.long.arrow.alternate.up::before { - content: "\f30c"; -} - -i.icon.low.vision::before { - content: "\f2a8"; -} - -i.icon.luggage.cart::before { - content: "\f59d"; -} - -i.icon.lungs::before { - content: "\f604"; -} - -i.icon.lungs.virus::before { - content: "\e067"; -} - -i.icon.magic::before { - content: "\f0d0"; -} - -i.icon.magnet::before { - content: "\f076"; -} - -i.icon.mail.bulk::before { - content: "\f674"; -} - -i.icon.male::before { - content: "\f183"; -} - -i.icon.map::before { - content: "\f279"; -} - -i.icon.map.marked::before { - content: "\f59f"; -} - -i.icon.map.marked.alternate::before { - content: "\f5a0"; -} - -i.icon.map.marker::before { - content: "\f041"; -} - -i.icon.map.marker.alternate::before { - content: "\f3c5"; -} - -i.icon.map.pin::before { - content: "\f276"; -} - -i.icon.map.signs::before { - content: "\f277"; -} - -i.icon.marker::before { - content: "\f5a1"; -} - -i.icon.mars::before { - content: "\f222"; -} - -i.icon.mars.double::before { - content: "\f227"; -} - -i.icon.mars.stroke::before { - content: "\f229"; -} - -i.icon.mars.stroke.horizontal::before { - content: "\f22b"; -} - -i.icon.mars.stroke.vertical::before { - content: "\f22a"; -} - -i.icon.mask::before { - content: "\f6fa"; -} - -i.icon.medal::before { - content: "\f5a2"; -} - -i.icon.medkit::before { - content: "\f0fa"; -} - -i.icon.meh::before { - content: "\f11a"; -} - -i.icon.meh.blank::before { - content: "\f5a4"; -} - -i.icon.meh.rolling.eyes::before { - content: "\f5a5"; -} - -i.icon.memory::before { - content: "\f538"; -} - -i.icon.menorah::before { - content: "\f676"; -} - -i.icon.mercury::before { - content: "\f223"; -} - -i.icon.meteor::before { - content: "\f753"; -} - -i.icon.microchip::before { - content: "\f2db"; -} - -i.icon.microphone::before { - content: "\f130"; -} - -i.icon.microphone.alternate::before { - content: "\f3c9"; -} - -i.icon.microphone.alternate.slash::before { - content: "\f539"; -} - -i.icon.microphone.slash::before { - content: "\f131"; -} - -i.icon.microscope::before { - content: "\f610"; -} - -i.icon.minus::before { - content: "\f068"; -} - -i.icon.minus.circle::before { - content: "\f056"; -} - -i.icon.minus.square::before { - content: "\f146"; -} - -i.icon.mitten::before { - content: "\f7b5"; -} - -i.icon.mobile::before { - content: "\f10b"; -} - -i.icon.mobile.alternate::before { - content: "\f3cd"; -} - -i.icon.money.bill::before { - content: "\f0d6"; -} - -i.icon.money.bill.alternate::before { - content: "\f3d1"; -} - -i.icon.money.bill.wave::before { - content: "\f53a"; -} - -i.icon.money.bill.wave.alternate::before { - content: "\f53b"; -} - -i.icon.money.check::before { - content: "\f53c"; -} - -i.icon.money.check.alternate::before { - content: "\f53d"; -} - -i.icon.monument::before { - content: "\f5a6"; -} - -i.icon.moon::before { - content: "\f186"; -} - -i.icon.mortar.pestle::before { - content: "\f5a7"; -} - -i.icon.mosque::before { - content: "\f678"; -} - -i.icon.motorcycle::before { - content: "\f21c"; -} - -i.icon.mountain::before { - content: "\f6fc"; -} - -i.icon.mouse::before { - content: "\f8cc"; -} - -i.icon.mouse.pointer::before { - content: "\f245"; -} - -i.icon.mug.hot::before { - content: "\f7b6"; -} - -i.icon.music::before { - content: "\f001"; -} - -i.icon.network.wired::before { - content: "\f6ff"; -} - -i.icon.neuter::before { - content: "\f22c"; -} - -i.icon.newspaper::before { - content: "\f1ea"; -} - -i.icon.not.equal::before { - content: "\f53e"; -} - -i.icon.notes.medical::before { - content: "\f481"; -} - -i.icon.object.group::before { - content: "\f247"; -} - -i.icon.object.ungroup::before { - content: "\f248"; -} - -i.icon.oil.can::before { - content: "\f613"; -} - -i.icon.om::before { - content: "\f679"; -} - -i.icon.otter::before { - content: "\f700"; -} - -i.icon.outdent::before { - content: "\f03b"; -} - -i.icon.pager::before { - content: "\f815"; -} - -i.icon.paint.brush::before { - content: "\f1fc"; -} - -i.icon.paint.roller::before { - content: "\f5aa"; -} - -i.icon.palette::before { - content: "\f53f"; -} - -i.icon.pallet::before { - content: "\f482"; -} - -i.icon.paper.plane::before { - content: "\f1d8"; -} - -i.icon.paperclip::before { - content: "\f0c6"; -} - -i.icon.parachute.box::before { - content: "\f4cd"; -} - -i.icon.paragraph::before { - content: "\f1dd"; -} - -i.icon.parking::before { - content: "\f540"; -} - -i.icon.passport::before { - content: "\f5ab"; -} - -i.icon.pastafarianism::before { - content: "\f67b"; -} - -i.icon.paste::before { - content: "\f0ea"; -} - -i.icon.pause::before { - content: "\f04c"; -} - -i.icon.pause.circle::before { - content: "\f28b"; -} - -i.icon.paw::before { - content: "\f1b0"; -} - -i.icon.peace::before { - content: "\f67c"; -} - -i.icon.pen::before { - content: "\f304"; -} - -i.icon.pen.alternate::before { - content: "\f305"; -} - -i.icon.pen.fancy::before { - content: "\f5ac"; -} - -i.icon.pen.nib::before { - content: "\f5ad"; -} - -i.icon.pen.square::before { - content: "\f14b"; -} - -i.icon.pencil.alternate::before { - content: "\f303"; -} - -i.icon.pencil.ruler::before { - content: "\f5ae"; -} - -i.icon.people.arrows::before { - content: "\e068"; -} - -i.icon.people.carry::before { - content: "\f4ce"; -} - -i.icon.pepper.hot::before { - content: "\f816"; -} - -i.icon.percent::before { - content: "\f295"; -} - -i.icon.percentage::before { - content: "\f541"; -} - -i.icon.person.booth::before { - content: "\f756"; -} - -i.icon.phone::before { - content: "\f095"; -} - -i.icon.phone.alternate::before { - content: "\f879"; -} - -i.icon.phone.slash::before { - content: "\f3dd"; -} - -i.icon.phone.square::before { - content: "\f098"; -} - -i.icon.phone.square.alternate::before { - content: "\f87b"; -} - -i.icon.phone.volume::before { - content: "\f2a0"; -} - -i.icon.photo.video::before { - content: "\f87c"; -} - -i.icon.piggy.bank::before { - content: "\f4d3"; -} - -i.icon.pills::before { - content: "\f484"; -} - -i.icon.pizza.slice::before { - content: "\f818"; -} - -i.icon.place.of.worship::before { - content: "\f67f"; -} - -i.icon.plane::before { - content: "\f072"; -} - -i.icon.plane.arrival::before { - content: "\f5af"; -} - -i.icon.plane.departure::before { - content: "\f5b0"; -} - -i.icon.plane.slash::before { - content: "\e069"; -} - -i.icon.play::before { - content: "\f04b"; -} - -i.icon.play.circle::before { - content: "\f144"; -} - -i.icon.plug::before { - content: "\f1e6"; -} - -i.icon.plus::before { - content: "\f067"; -} - -i.icon.plus.circle::before { - content: "\f055"; -} - -i.icon.plus.square::before { - content: "\f0fe"; -} - -i.icon.podcast::before { - content: "\f2ce"; -} - -i.icon.poll::before { - content: "\f681"; -} - -i.icon.poll.horizontal::before { - content: "\f682"; -} - -i.icon.poo::before { - content: "\f2fe"; -} - -i.icon.poo.storm::before { - content: "\f75a"; -} - -i.icon.poop::before { - content: "\f619"; -} - -i.icon.portrait::before { - content: "\f3e0"; -} - -i.icon.pound.sign::before { - content: "\f154"; -} - -i.icon.power.off::before { - content: "\f011"; -} - -i.icon.pray::before { - content: "\f683"; -} - -i.icon.praying.hands::before { - content: "\f684"; -} - -i.icon.prescription::before { - content: "\f5b1"; -} - -i.icon.prescription.bottle::before { - content: "\f485"; -} - -i.icon.prescription.bottle.alternate::before { - content: "\f486"; -} - -i.icon.print::before { - content: "\f02f"; -} - -i.icon.procedures::before { - content: "\f487"; -} - -i.icon.project.diagram::before { - content: "\f542"; -} - -i.icon.pump.medical::before { - content: "\e06a"; -} - -i.icon.pump.soap::before { - content: "\e06b"; -} - -i.icon.puzzle.piece::before { - content: "\f12e"; -} - -i.icon.qrcode::before { - content: "\f029"; -} - -i.icon.question::before { - content: "\f128"; -} - -i.icon.question.circle::before { - content: "\f059"; -} - -i.icon.quidditch::before { - content: "\f458"; -} - -i.icon.quote.left::before { - content: "\f10d"; -} - -i.icon.quote.right::before { - content: "\f10e"; -} - -i.icon.quran::before { - content: "\f687"; -} - -i.icon.radiation::before { - content: "\f7b9"; -} - -i.icon.radiation.alternate::before { - content: "\f7ba"; -} - -i.icon.rainbow::before { - content: "\f75b"; -} - -i.icon.random::before { - content: "\f074"; -} - -i.icon.receipt::before { - content: "\f543"; -} - -i.icon.record.vinyl::before { - content: "\f8d9"; -} - -i.icon.recycle::before { - content: "\f1b8"; -} - -i.icon.redo::before { - content: "\f01e"; -} - -i.icon.redo.alternate::before { - content: "\f2f9"; -} - -i.icon.registered::before { - content: "\f25d"; -} - -i.icon.remove.format::before { - content: "\f87d"; -} - -i.icon.reply::before { - content: "\f3e5"; -} - -i.icon.reply.all::before { - content: "\f122"; -} - -i.icon.republican::before { - content: "\f75e"; -} - -i.icon.restroom::before { - content: "\f7bd"; -} - -i.icon.retweet::before { - content: "\f079"; -} - -i.icon.ribbon::before { - content: "\f4d6"; -} - -i.icon.ring::before { - content: "\f70b"; -} - -i.icon.road::before { - content: "\f018"; -} - -i.icon.robot::before { - content: "\f544"; -} - -i.icon.rocket::before { - content: "\f135"; -} - -i.icon.route::before { - content: "\f4d7"; -} - -i.icon.rss::before { - content: "\f09e"; -} - -i.icon.rss.square::before { - content: "\f143"; -} - -i.icon.ruble.sign::before { - content: "\f158"; -} - -i.icon.ruler::before { - content: "\f545"; -} - -i.icon.ruler.combined::before { - content: "\f546"; -} - -i.icon.ruler.horizontal::before { - content: "\f547"; -} - -i.icon.ruler.vertical::before { - content: "\f548"; -} - -i.icon.running::before { - content: "\f70c"; -} - -i.icon.rupee.sign::before { - content: "\f156"; -} - -i.icon.sad.cry::before { - content: "\f5b3"; -} - -i.icon.sad.tear::before { - content: "\f5b4"; -} - -i.icon.satellite::before { - content: "\f7bf"; -} - -i.icon.satellite.dish::before { - content: "\f7c0"; -} - -i.icon.save::before { - content: "\f0c7"; -} - -i.icon.school::before { - content: "\f549"; -} - -i.icon.screwdriver::before { - content: "\f54a"; -} - -i.icon.scroll::before { - content: "\f70e"; -} - -i.icon.sd.card::before { - content: "\f7c2"; -} - -i.icon.search::before { - content: "\f002"; -} - -i.icon.search.dollar::before { - content: "\f688"; -} - -i.icon.search.location::before { - content: "\f689"; -} - -i.icon.search.minus::before { - content: "\f010"; -} - -i.icon.search.plus::before { - content: "\f00e"; -} - -i.icon.seedling::before { - content: "\f4d8"; -} - -i.icon.server::before { - content: "\f233"; -} - -i.icon.shapes::before { - content: "\f61f"; -} - -i.icon.share::before { - content: "\f064"; -} - -i.icon.share.alternate::before { - content: "\f1e0"; -} - -i.icon.share.alternate.square::before { - content: "\f1e1"; -} - -i.icon.share.square::before { - content: "\f14d"; -} - -i.icon.shekel.sign::before { - content: "\f20b"; -} - -i.icon.shield.alternate::before { - content: "\f3ed"; -} - -i.icon.shield.virus::before { - content: "\e06c"; -} - -i.icon.ship::before { - content: "\f21a"; -} - -i.icon.shipping.fast::before { - content: "\f48b"; -} - -i.icon.shoe.prints::before { - content: "\f54b"; -} - -i.icon.shopping.bag::before { - content: "\f290"; -} - -i.icon.shopping.basket::before { - content: "\f291"; -} - -i.icon.shopping.cart::before { - content: "\f07a"; -} - -i.icon.shower::before { - content: "\f2cc"; -} - -i.icon.shuttle.van::before { - content: "\f5b6"; -} - -i.icon.sign::before { - content: "\f4d9"; -} - -i.icon.sign.language::before { - content: "\f2a7"; -} - -i.icon.signal::before { - content: "\f012"; -} - -i.icon.signature::before { - content: "\f5b7"; -} - -i.icon.sim.card::before { - content: "\f7c4"; -} - -i.icon.sink::before { - content: "\e06d"; -} - -i.icon.sitemap::before { - content: "\f0e8"; -} - -i.icon.skating::before { - content: "\f7c5"; -} - -i.icon.skiing::before { - content: "\f7c9"; -} - -i.icon.skiing.nordic::before { - content: "\f7ca"; -} - -i.icon.skull::before { - content: "\f54c"; -} - -i.icon.skull.crossbones::before { - content: "\f714"; -} - -i.icon.slash::before { - content: "\f715"; -} - -i.icon.sleigh::before { - content: "\f7cc"; -} - -i.icon.sliders.horizontal::before { - content: "\f1de"; -} - -i.icon.smile::before { - content: "\f118"; -} - -i.icon.smile.beam::before { - content: "\f5b8"; -} - -i.icon.smile.wink::before { - content: "\f4da"; -} - -i.icon.smog::before { - content: "\f75f"; -} - -i.icon.smoking::before { - content: "\f48d"; -} - -i.icon.smoking.ban::before { - content: "\f54d"; -} - -i.icon.sms::before { - content: "\f7cd"; -} - -i.icon.snowboarding::before { - content: "\f7ce"; -} - -i.icon.snowflake::before { - content: "\f2dc"; -} - -i.icon.snowman::before { - content: "\f7d0"; -} - -i.icon.snowplow::before { - content: "\f7d2"; -} - -i.icon.soap::before { - content: "\e06e"; -} - -i.icon.socks::before { - content: "\f696"; -} - -i.icon.solar.panel::before { - content: "\f5ba"; -} - -i.icon.sort::before { - content: "\f0dc"; -} - -i.icon.sort.alphabet.down::before { - content: "\f15d"; -} - -i.icon.sort.alphabet.down.alternate::before { - content: "\f881"; -} - -i.icon.sort.alphabet.up::before { - content: "\f15e"; -} - -i.icon.sort.alphabet.up.alternate::before { - content: "\f882"; -} - -i.icon.sort.amount.down::before { - content: "\f160"; -} - -i.icon.sort.amount.down.alternate::before { - content: "\f884"; -} - -i.icon.sort.amount.up::before { - content: "\f161"; -} - -i.icon.sort.amount.up.alternate::before { - content: "\f885"; -} - -i.icon.sort.down::before { - content: "\f0dd"; -} - -i.icon.sort.numeric.down::before { - content: "\f162"; -} - -i.icon.sort.numeric.down.alternate::before { - content: "\f886"; -} - -i.icon.sort.numeric.up::before { - content: "\f163"; -} - -i.icon.sort.numeric.up.alternate::before { - content: "\f887"; -} - -i.icon.sort.up::before { - content: "\f0de"; -} - -i.icon.spa::before { - content: "\f5bb"; -} - -i.icon.space.shuttle::before { - content: "\f197"; -} - -i.icon.spell.check::before { - content: "\f891"; -} - -i.icon.spider::before { - content: "\f717"; -} - -i.icon.spinner::before { - content: "\f110"; -} - -i.icon.splotch::before { - content: "\f5bc"; -} - -i.icon.spray.can::before { - content: "\f5bd"; -} - -i.icon.square::before { - content: "\f0c8"; -} - -i.icon.square.full::before { - content: "\f45c"; -} - -i.icon.square.root.alternate::before { - content: "\f698"; -} - -i.icon.stamp::before { - content: "\f5bf"; -} - -i.icon.star::before { - content: "\f005"; -} - -i.icon.star.and.crescent::before { - content: "\f699"; -} - -i.icon.star.half::before { - content: "\f089"; -} - -i.icon.star.half.alternate::before { - content: "\f5c0"; -} - -i.icon.star.of.david::before { - content: "\f69a"; -} - -i.icon.star.of.life::before { - content: "\f621"; -} - -i.icon.step.backward::before { - content: "\f048"; -} - -i.icon.step.forward::before { - content: "\f051"; -} - -i.icon.stethoscope::before { - content: "\f0f1"; -} - -i.icon.sticky.note::before { - content: "\f249"; -} - -i.icon.stop::before { - content: "\f04d"; -} - -i.icon.stop.circle::before { - content: "\f28d"; -} - -i.icon.stopwatch::before { - content: "\f2f2"; -} - -i.icon.stopwatch.twenty::before { - content: "\e06f"; -} - -i.icon.store::before { - content: "\f54e"; -} - -i.icon.store.alternate::before { - content: "\f54f"; -} - -i.icon.store.alternate.slash::before { - content: "\e070"; -} - -i.icon.store.slash::before { - content: "\e071"; -} - -i.icon.stream::before { - content: "\f550"; -} - -i.icon.street.view::before { - content: "\f21d"; -} - -i.icon.strikethrough::before { - content: "\f0cc"; -} - -i.icon.stroopwafel::before { - content: "\f551"; -} - -i.icon.subscript::before { - content: "\f12c"; -} - -i.icon.subway::before { - content: "\f239"; -} - -i.icon.suitcase::before { - content: "\f0f2"; -} - -i.icon.suitcase.rolling::before { - content: "\f5c1"; -} - -i.icon.sun::before { - content: "\f185"; -} - -i.icon.superscript::before { - content: "\f12b"; -} - -i.icon.surprise::before { - content: "\f5c2"; -} - -i.icon.swatchbook::before { - content: "\f5c3"; -} - -i.icon.swimmer::before { - content: "\f5c4"; -} - -i.icon.swimming.pool::before { - content: "\f5c5"; -} - -i.icon.synagogue::before { - content: "\f69b"; -} - -i.icon.sync::before { - content: "\f021"; -} - -i.icon.sync.alternate::before { - content: "\f2f1"; -} - -i.icon.syringe::before { - content: "\f48e"; -} - -i.icon.table::before { - content: "\f0ce"; -} - -i.icon.table.tennis::before { - content: "\f45d"; -} - -i.icon.tablet::before { - content: "\f10a"; -} - -i.icon.tablet.alternate::before { - content: "\f3fa"; -} - -i.icon.tablets::before { - content: "\f490"; -} - -i.icon.tachometer.alternate::before { - content: "\f3fd"; -} - -i.icon.tag::before { - content: "\f02b"; -} - -i.icon.tags::before { - content: "\f02c"; -} - -i.icon.tape::before { - content: "\f4db"; -} - -i.icon.tasks::before { - content: "\f0ae"; -} - -i.icon.taxi::before { - content: "\f1ba"; -} - -i.icon.teeth::before { - content: "\f62e"; -} - -i.icon.teeth.open::before { - content: "\f62f"; -} - -i.icon.temperature.high::before { - content: "\f769"; -} - -i.icon.temperature.low::before { - content: "\f76b"; -} - -i.icon.tenge::before { - content: "\f7d7"; -} - -i.icon.terminal::before { - content: "\f120"; -} - -i.icon.text.height::before { - content: "\f034"; -} - -i.icon.text.width::before { - content: "\f035"; -} - -i.icon.th::before { - content: "\f00a"; -} - -i.icon.th.large::before { - content: "\f009"; -} - -i.icon.th.list::before { - content: "\f00b"; -} - -i.icon.theater.masks::before { - content: "\f630"; -} - -i.icon.thermometer::before { - content: "\f491"; -} - -i.icon.thermometer.empty::before { - content: "\f2cb"; -} - -i.icon.thermometer.full::before { - content: "\f2c7"; -} - -i.icon.thermometer.half::before { - content: "\f2c9"; -} - -i.icon.thermometer.quarter::before { - content: "\f2ca"; -} - -i.icon.thermometer.three.quarters::before { - content: "\f2c8"; -} - -i.icon.thumbs.down::before { - content: "\f165"; -} - -i.icon.thumbs.up::before { - content: "\f164"; -} - -i.icon.thumbtack::before { - content: "\f08d"; -} - -i.icon.ticket.alternate::before { - content: "\f3ff"; -} - -i.icon.times::before { - content: "\f00d"; -} - -i.icon.times.circle::before { - content: "\f057"; -} - -i.icon.tint::before { - content: "\f043"; -} - -i.icon.tint.slash::before { - content: "\f5c7"; -} - -i.icon.tired::before { - content: "\f5c8"; -} - -i.icon.toggle.off::before { - content: "\f204"; -} - -i.icon.toggle.on::before { - content: "\f205"; -} - -i.icon.toilet::before { - content: "\f7d8"; -} - -i.icon.toilet.paper::before { - content: "\f71e"; -} - -i.icon.toilet.paper.slash::before { - content: "\e072"; -} - -i.icon.toolbox::before { - content: "\f552"; -} - -i.icon.tools::before { - content: "\f7d9"; -} - -i.icon.tooth::before { - content: "\f5c9"; -} - -i.icon.torah::before { - content: "\f6a0"; -} - -i.icon.torii.gate::before { - content: "\f6a1"; -} - -i.icon.tractor::before { - content: "\f722"; -} - -i.icon.trademark::before { - content: "\f25c"; -} - -i.icon.traffic.light::before { - content: "\f637"; -} - -i.icon.trailer::before { - content: "\e041"; -} - -i.icon.train::before { - content: "\f238"; -} - -i.icon.tram::before { - content: "\f7da"; -} - -i.icon.transgender::before { - content: "\f224"; -} - -i.icon.transgender.alternate::before { - content: "\f225"; -} - -i.icon.trash::before { - content: "\f1f8"; -} - -i.icon.trash.alternate::before { - content: "\f2ed"; -} - -i.icon.trash.restore::before { - content: "\f829"; -} - -i.icon.trash.restore.alternate::before { - content: "\f82a"; -} - -i.icon.tree::before { - content: "\f1bb"; -} - -i.icon.trophy::before { - content: "\f091"; -} - -i.icon.truck::before { - content: "\f0d1"; -} - -i.icon.truck.monster::before { - content: "\f63b"; -} - -i.icon.truck.moving::before { - content: "\f4df"; -} - -i.icon.truck.packing::before { - content: "\f4de"; -} - -i.icon.truck.pickup::before { - content: "\f63c"; -} - -i.icon.tshirt::before { - content: "\f553"; -} - -i.icon.tty::before { - content: "\f1e4"; -} - -i.icon.tv::before { - content: "\f26c"; -} - -i.icon.umbrella::before { - content: "\f0e9"; -} - -i.icon.umbrella.beach::before { - content: "\f5ca"; -} - -i.icon.underline::before { - content: "\f0cd"; -} - -i.icon.undo::before { - content: "\f0e2"; -} - -i.icon.undo.alternate::before { - content: "\f2ea"; -} - -i.icon.universal.access::before { - content: "\f29a"; -} - -i.icon.university::before { - content: "\f19c"; -} - -i.icon.unlink::before { - content: "\f127"; -} - -i.icon.unlock::before { - content: "\f09c"; -} - -i.icon.unlock.alternate::before { - content: "\f13e"; -} - -i.icon.upload::before { - content: "\f093"; -} - -i.icon.user::before { - content: "\f007"; -} - -i.icon.user.alternate::before { - content: "\f406"; -} - -i.icon.user.alternate.slash::before { - content: "\f4fa"; -} - -i.icon.user.astronaut::before { - content: "\f4fb"; -} - -i.icon.user.check::before { - content: "\f4fc"; -} - -i.icon.user.circle::before { - content: "\f2bd"; -} - -i.icon.user.clock::before { - content: "\f4fd"; -} - -i.icon.user.cog::before { - content: "\f4fe"; -} - -i.icon.user.edit::before { - content: "\f4ff"; -} - -i.icon.user.friends::before { - content: "\f500"; -} - -i.icon.user.graduate::before { - content: "\f501"; -} - -i.icon.user.injured::before { - content: "\f728"; -} - -i.icon.user.lock::before { - content: "\f502"; -} - -i.icon.user.md::before { - content: "\f0f0"; -} - -i.icon.user.minus::before { - content: "\f503"; -} - -i.icon.user.ninja::before { - content: "\f504"; -} - -i.icon.user.nurse::before { - content: "\f82f"; -} - -i.icon.user.plus::before { - content: "\f234"; -} - -i.icon.user.secret::before { - content: "\f21b"; -} - -i.icon.user.shield::before { - content: "\f505"; -} - -i.icon.user.slash::before { - content: "\f506"; -} - -i.icon.user.tag::before { - content: "\f507"; -} - -i.icon.user.tie::before { - content: "\f508"; -} - -i.icon.user.times::before { - content: "\f235"; -} - -i.icon.users::before { - content: "\f0c0"; -} - -i.icon.users.cog::before { - content: "\f509"; -} - -i.icon.users.slash::before { - content: "\e073"; -} - -i.icon.utensil.spoon::before { - content: "\f2e5"; -} - -i.icon.utensils::before { - content: "\f2e7"; -} - -i.icon.vector.square::before { - content: "\f5cb"; -} - -i.icon.venus::before { - content: "\f221"; -} - -i.icon.venus.double::before { - content: "\f226"; -} - -i.icon.venus.mars::before { - content: "\f228"; -} - -i.icon.vest::before { - content: "\e085"; -} - -i.icon.vest.patches::before { - content: "\e086"; -} - -i.icon.vial::before { - content: "\f492"; -} - -i.icon.vials::before { - content: "\f493"; -} - -i.icon.video::before { - content: "\f03d"; -} - -i.icon.video.slash::before { - content: "\f4e2"; -} - -i.icon.vihara::before { - content: "\f6a7"; -} - -i.icon.virus::before { - content: "\e074"; -} - -i.icon.virus.slash::before { - content: "\e075"; -} - -i.icon.viruses::before { - content: "\e076"; -} - -i.icon.voicemail::before { - content: "\f897"; -} - -i.icon.volleyball.ball::before { - content: "\f45f"; -} - -i.icon.volume.down::before { - content: "\f027"; -} - -i.icon.volume.mute::before { - content: "\f6a9"; -} - -i.icon.volume.off::before { - content: "\f026"; -} - -i.icon.volume.up::before { - content: "\f028"; -} - -i.icon.vote.yea::before { - content: "\f772"; -} - -i.icon.vr.cardboard::before { - content: "\f729"; -} - -i.icon.walking::before { - content: "\f554"; -} - -i.icon.wallet::before { - content: "\f555"; -} - -i.icon.warehouse::before { - content: "\f494"; -} - -i.icon.water::before { - content: "\f773"; -} - -i.icon.wave.square::before { - content: "\f83e"; -} - -i.icon.weight::before { - content: "\f496"; -} - -i.icon.weight.hanging::before { - content: "\f5cd"; -} - -i.icon.wheelchair::before { - content: "\f193"; -} - -i.icon.wifi::before { - content: "\f1eb"; -} - -i.icon.wind::before { - content: "\f72e"; -} - -i.icon.window.close::before { - content: "\f410"; -} - -i.icon.window.maximize::before { - content: "\f2d0"; -} - -i.icon.window.minimize::before { - content: "\f2d1"; -} - -i.icon.window.restore::before { - content: "\f2d2"; -} - -i.icon.wine.bottle::before { - content: "\f72f"; -} - -i.icon.wine.glass::before { - content: "\f4e3"; -} - -i.icon.wine.glass.alternate::before { - content: "\f5ce"; -} - -i.icon.won.sign::before { - content: "\f159"; -} - -i.icon.wrench::before { - content: "\f0ad"; -} - -i.icon.x.ray::before { - content: "\f497"; -} - -i.icon.yen.sign::before { - content: "\f157"; -} - -i.icon.yin.yang::before { - content: "\f6ad"; -} - -/* Aliases */ - -i.icon.add::before { - content: "\f067"; -} - -i.icon.add.circle::before { - content: "\f055"; -} - -i.icon.add.square::before { - content: "\f0fe"; -} - -i.icon.add.to.calendar::before { - content: "\f271"; -} - -i.icon.add.to.cart::before { - content: "\f217"; -} - -i.icon.add.user::before { - content: "\f234"; -} - -i.icon.alarm::before { - content: "\f0f3"; -} - -i.icon.alarm.mute::before { - content: "\f1f6"; -} - -i.icon.ald::before { - content: "\f2a2"; -} - -i.icon.als::before { - content: "\f2a2"; -} - -i.icon.announcement::before { - content: "\f0a1"; -} - -i.icon.area.chart::before { - content: "\f1fe"; -} - -i.icon.area.graph::before { - content: "\f1fe"; -} - -i.icon.arrow.down.cart::before { - content: "\f218"; -} - -i.icon.asexual::before { - content: "\f22d"; -} - -i.icon.asl::before { - content: "\f2a3"; -} - -i.icon.asl.interpreting::before { - content: "\f2a3"; -} - -i.icon.assistive.listening.devices::before { - content: "\f2a2"; -} - -i.icon.attach::before { - content: "\f0c6"; -} - -i.icon.attention::before { - content: "\f06a"; -} - -i.icon.balance::before { - content: "\f24e"; -} - -i.icon.bar::before { - content: "\f0fc"; -} - -i.icon.bathtub::before { - content: "\f2cd"; -} - -i.icon.battery.four::before { - content: "\f240"; -} - -i.icon.battery.high::before { - content: "\f241"; -} - -i.icon.battery.low::before { - content: "\f243"; -} - -i.icon.battery.medium::before { - content: "\f242"; -} - -i.icon.battery.one::before { - content: "\f243"; -} - -i.icon.battery.three::before { - content: "\f241"; -} - -i.icon.battery.two::before { - content: "\f242"; -} - -i.icon.battery.zero::before { - content: "\f244"; -} - -i.icon.birthday::before { - content: "\f1fd"; -} - -i.icon.block.layout::before { - content: "\f009"; -} - -i.icon.broken.chain::before { - content: "\f127"; -} - -i.icon.browser::before { - content: "\f022"; -} - -i.icon.call::before { - content: "\f095"; -} - -i.icon.call.square::before { - content: "\f098"; -} - -i.icon.cancel::before { - content: "\f00d"; -} - -i.icon.cart::before { - content: "\f07a"; -} - -i.icon.cc::before { - content: "\f20a"; -} - -i.icon.chain::before { - content: "\f0c1"; -} - -i.icon.chat::before { - content: "\f075"; -} - -i.icon.checked.calendar::before { - content: "\f274"; -} - -i.icon.checkmark::before { - content: "\f00c"; -} - -i.icon.checkmark.box::before { - content: "\f14a"; -} - -i.icon.chess.rock::before { - content: "\f447"; -} - -i.icon.circle.notched::before { - content: "\f1ce"; -} - -i.icon.circle.thin::before { - content: "\f111"; -} - -i.icon.close::before { - content: "\f00d"; -} - -i.icon.cloud.download::before { - content: "\f381"; -} - -i.icon.cloud.upload::before { - content: "\f382"; -} - -i.icon.cny::before { - content: "\f157"; -} - -i.icon.cocktail::before { - content: "\f000"; -} - -i.icon.commenting::before { - content: "\f27a"; -} - -i.icon.compose::before { - content: "\f303"; -} - -i.icon.computer::before { - content: "\f108"; -} - -i.icon.configure::before { - content: "\f0ad"; -} - -i.icon.content::before { - content: "\f0c9"; -} - -i.icon.conversation::before { - content: "\f086"; -} - -i.icon.credit.card.alternative::before { - content: "\f09d"; -} - -i.icon.currency::before { - content: "\f3d1"; -} - -i.icon.dashboard::before { - content: "\f3fd"; -} - -i.icon.deafness::before { - content: "\f2a4"; -} - -i.icon.delete::before { - content: "\f00d"; -} - -i.icon.delete.calendar::before { - content: "\f273"; -} - -i.icon.detective::before { - content: "\f21b"; -} - -i.icon.diamond::before { - content: "\f3a5"; -} - -i.icon.discussions::before { - content: "\f086"; -} - -i.icon.disk::before { - content: "\f0a0"; -} - -i.icon.doctor::before { - content: "\f0f0"; -} - -i.icon.dollar::before { - content: "\f155"; -} - -i.icon.dont::before { - content: "\f05e"; -} - -i.icon.drivers.license::before { - content: "\f2c2"; -} - -i.icon.dropdown::before { - content: "\f0d7"; -} - -i.icon.emergency::before { - content: "\f0f9"; -} - -i.icon.erase::before { - content: "\f12d"; -} - -i.icon.eur::before { - content: "\f153"; -} - -i.icon.euro::before { - content: "\f153"; -} - -i.icon.exchange::before { - content: "\f362"; -} - -i.icon.external::before { - content: "\f35d"; -} - -i.icon.external.share::before { - content: "\f14d"; -} - -i.icon.external.square::before { - content: "\f360"; -} - -i.icon.eyedropper::before { - content: "\f1fb"; -} - -i.icon.factory::before { - content: "\f275"; -} - -i.icon.favorite::before { - content: "\f005"; -} - -i.icon.feed::before { - content: "\f09e"; -} - -i.icon.female.homosexual::before { - content: "\f226"; -} - -i.icon.file.text::before { - content: "\f15c"; -} - -i.icon.find::before { - content: "\f1e5"; -} - -i.icon.first.aid::before { - content: "\f0fa"; -} - -i.icon.food::before { - content: "\f2e7"; -} - -i.icon.fork::before { - content: "\f126"; -} - -i.icon.game::before { - content: "\f11b"; -} - -i.icon.gay::before { - content: "\f227"; -} - -i.icon.gbp::before { - content: "\f154"; -} - -i.icon.grab::before { - content: "\f255"; -} - -i.icon.graduation::before { - content: "\f19d"; -} - -i.icon.grid.layout::before { - content: "\f00a"; -} - -i.icon.group::before { - content: "\f0c0"; -} - -i.icon.h::before { - content: "\f0fd"; -} - -i.icon.hamburger::before { - content: "\f0c9"; -} - -i.icon.hand.victory::before { - content: "\f25b"; -} - -i.icon.handicap::before { - content: "\f193"; -} - -i.icon.hard.of.hearing::before { - content: "\f2a4"; -} - -i.icon.header::before { - content: "\f1dc"; -} - -i.icon.heart.empty::before { - content: "\f004"; -} - -i.icon.help::before { - content: "\f128"; -} - -i.icon.help.circle::before { - content: "\f059"; -} - -i.icon.heterosexual::before { - content: "\f228"; -} - -i.icon.hide::before { - content: "\f070"; -} - -i.icon.hotel::before { - content: "\f236"; -} - -i.icon.hourglass.four::before { - content: "\f254"; -} - -i.icon.hourglass.full::before { - content: "\f254"; -} - -i.icon.hourglass.one::before { - content: "\f251"; -} - -i.icon.hourglass.three::before { - content: "\f253"; -} - -i.icon.hourglass.two::before { - content: "\f252"; -} - -i.icon.hourglass.zero::before { - content: "\f253"; -} - -i.icon.idea::before { - content: "\f0eb"; -} - -i.icon.ils::before { - content: "\f20b"; -} - -i.icon.inr::before { - content: "\f156"; -} - -i.icon.intergender::before { - content: "\f224"; -} - -i.icon.intersex::before { - content: "\f224"; -} - -i.icon.jpy::before { - content: "\f157"; -} - -i.icon.krw::before { - content: "\f159"; -} - -i.icon.lab::before { - content: "\f0c3"; -} - -i.icon.law::before { - content: "\f24e"; -} - -i.icon.legal::before { - content: "\f0e3"; -} - -i.icon.lesbian::before { - content: "\f226"; -} - -i.icon.level.down::before { - content: "\f3be"; -} - -i.icon.level.up::before { - content: "\f3bf"; -} - -i.icon.lightning::before { - content: "\f0e7"; -} - -i.icon.like::before { - content: "\f004"; -} - -i.icon.linegraph::before { - content: "\f201"; -} - -i.icon.linkify::before { - content: "\f0c1"; -} - -i.icon.lira::before { - content: "\f195"; -} - -i.icon.list.layout::before { - content: "\f00b"; -} - -i.icon.magnify::before { - content: "\f00e"; -} - -i.icon.mail::before { - content: "\f0e0"; -} - -i.icon.mail.forward::before { - content: "\f064"; -} - -i.icon.mail.square::before { - content: "\f199"; -} - -i.icon.male.homosexual::before { - content: "\f227"; -} - -i.icon.man::before { - content: "\f222"; -} - -i.icon.marker::before { - content: "\f041"; -} - -i.icon.mars.alternate::before { - content: "\f229"; -} - -i.icon.mars.horizontal::before { - content: "\f22b"; -} - -i.icon.mars.vertical::before { - content: "\f22a"; -} - -i.icon.meanpath::before { - content: "\f0c8"; -} - -i.icon.military::before { - content: "\f0fb"; -} - -i.icon.money::before { - content: "\f3d1"; -} - -i.icon.move::before { - content: "\f0b2"; -} - -i.icon.mute::before { - content: "\f131"; -} - -i.icon.non.binary.transgender::before { - content: "\f223"; -} - -i.icon.numbered.list::before { - content: "\f0cb"; -} - -i.icon.options::before { - content: "\f1de"; -} - -i.icon.ordered.list::before { - content: "\f0cb"; -} - -i.icon.other.gender::before { - content: "\f229"; -} - -i.icon.other.gender.horizontal::before { - content: "\f22b"; -} - -i.icon.other.gender.vertical::before { - content: "\f22a"; -} - -i.icon.payment::before { - content: "\f09d"; -} - -i.icon.pencil::before { - content: "\f303"; -} - -i.icon.pencil.square::before { - content: "\f14b"; -} - -i.icon.photo::before { - content: "\f030"; -} - -i.icon.picture::before { - content: "\f03e"; -} - -i.icon.pie.chart::before { - content: "\f200"; -} - -i.icon.pie.graph::before { - content: "\f200"; -} - -i.icon.pin::before { - content: "\f08d"; -} - -i.icon.plus.cart::before { - content: "\f217"; -} - -i.icon.point::before { - content: "\f041"; -} - -i.icon.pointing.down::before { - content: "\f0a7"; -} - -i.icon.pointing.left::before { - content: "\f0a5"; -} - -i.icon.pointing.right::before { - content: "\f0a4"; -} - -i.icon.pointing.up::before { - content: "\f0a6"; -} - -i.icon.pound::before { - content: "\f154"; -} - -i.icon.power::before { - content: "\f011"; -} - -i.icon.power.cord::before { - content: "\f1e6"; -} - -i.icon.privacy::before { - content: "\f084"; -} - -i.icon.protect::before { - content: "\f023"; -} - -i.icon.puzzle::before { - content: "\f12e"; -} - -i.icon.r.circle::before { - content: "\f25d"; -} - -i.icon.radio::before { - content: "\f192"; -} - -i.icon.rain::before { - content: "\f0e9"; -} - -i.icon.record::before { - content: "\f03d"; -} - -i.icon.refresh::before { - content: "\f021"; -} - -i.icon.remove::before { - content: "\f00d"; -} - -i.icon.remove.bookmark::before { - content: "\f02e"; -} - -i.icon.remove.circle::before { - content: "\f057"; -} - -i.icon.remove.from.calendar::before { - content: "\f272"; -} - -i.icon.remove.user::before { - content: "\f235"; -} - -i.icon.repeat::before { - content: "\f01e"; -} - -i.icon.resize.horizontal::before { - content: "\f337"; -} - -i.icon.resize.vertical::before { - content: "\f338"; -} - -i.icon.rmb::before { - content: "\f157"; -} - -i.icon.rouble::before { - content: "\f158"; -} - -i.icon.rub::before { - content: "\f158"; -} - -i.icon.ruble::before { - content: "\f158"; -} - -i.icon.rupee::before { - content: "\f156"; -} - -i.icon.s15::before { - content: "\f2cd"; -} - -i.icon.selected.radio::before { - content: "\f192"; -} - -i.icon.send::before { - content: "\f1d8"; -} - -i.icon.setting::before { - content: "\f013"; -} - -i.icon.settings::before { - content: "\f085"; -} - -i.icon.shekel::before { - content: "\f20b"; -} - -i.icon.sheqel::before { - content: "\f20b"; -} - -i.icon.shield::before { - content: "\f3ed"; -} - -i.icon.shipping::before { - content: "\f0d1"; -} - -i.icon.shop::before { - content: "\f07a"; -} - -i.icon.shuffle::before { - content: "\f074"; -} - -i.icon.shutdown::before { - content: "\f011"; -} - -i.icon.sidebar::before { - content: "\f0c9"; -} - -i.icon.signing::before { - content: "\f2a7"; -} - -i.icon.signup::before { - content: "\f044"; -} - -i.icon.sliders::before { - content: "\f1de"; -} - -i.icon.soccer::before { - content: "\f1e3"; -} - -i.icon.sort.alphabet.ascending::before { - content: "\f15d"; -} - -i.icon.sort.alphabet.descending::before { - content: "\f15e"; -} - -i.icon.sort.ascending::before { - content: "\f0de"; -} - -i.icon.sort.content.ascending::before { - content: "\f160"; -} - -i.icon.sort.content.descending::before { - content: "\f161"; -} - -i.icon.sort.descending::before { - content: "\f0dd"; -} - -i.icon.sort.numeric.ascending::before { - content: "\f162"; -} - -i.icon.sort.numeric.descending::before { - content: "\f163"; -} - -i.icon.sound::before { - content: "\f025"; -} - -i.icon.spoon::before { - content: "\f2e5"; -} - -i.icon.spy::before { - content: "\f21b"; -} - -i.icon.star.empty::before { - content: "\f005"; -} - -i.icon.star.half.empty::before { - content: "\f089"; -} - -i.icon.star.half.full::before { - content: "\f089"; -} - -i.icon.student::before { - content: "\f19d"; -} - -i.icon.talk::before { - content: "\f27a"; -} - -i.icon.target::before { - content: "\f140"; -} - -i.icon.teletype::before { - content: "\f1e4"; -} - -i.icon.television::before { - content: "\f26c"; -} - -i.icon.text.cursor::before { - content: "\f246"; -} - -i.icon.text.telephone::before { - content: "\f1e4"; -} - -i.icon.theme::before { - content: "\f043"; -} - -i.icon.thermometer::before { - content: "\f2c7"; -} - -i.icon.thumb.tack::before { - content: "\f08d"; -} - -i.icon.ticket::before { - content: "\f3ff"; -} - -i.icon.time::before { - content: "\f017"; -} - -i.icon.times.rectangle::before { - content: "\f410"; -} - -i.icon.tm::before { - content: "\f25c"; -} - -i.icon.toggle.down::before { - content: "\f150"; -} - -i.icon.toggle.left::before { - content: "\f191"; -} - -i.icon.toggle.right::before { - content: "\f152"; -} - -i.icon.toggle.up::before { - content: "\f151"; -} - -i.icon.translate::before { - content: "\f1ab"; -} - -i.icon.travel::before { - content: "\f0b1"; -} - -i.icon.treatment::before { - content: "\f0f1"; -} - -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.try::before { - content: "\f195"; -} - -i.icon.unhide::before { - content: "\f06e"; -} - -i.icon.unlinkify::before { - content: "\f127"; -} - -i.icon.unmute::before { - content: "\f130"; -} - -i.icon.unordered.list::before { - content: "\f0ca"; -} - -i.icon.usd::before { - content: "\f155"; -} - -i.icon.user.cancel::before { - content: "\f235"; -} - -i.icon.user.close::before { - content: "\f235"; -} - -i.icon.user.delete::before { - content: "\f235"; -} - -i.icon.user.doctor::before { - content: "\f0f0"; -} - -i.icon.user.x::before { - content: "\f235"; -} - -i.icon.vcard::before { - content: "\f2bb"; -} - -i.icon.video.camera::before { - content: "\f03d"; -} - -i.icon.video.play::before { - content: "\f144"; -} - -i.icon.volume.control.phone::before { - content: "\f2a0"; -} - -i.icon.wait::before { - content: "\f017"; -} - -i.icon.warning::before { - content: "\f12a"; -} - -i.icon.warning.circle::before { - content: "\f06a"; -} - -i.icon.warning.sign::before { - content: "\f071"; -} - -i.icon.wi.fi::before { - content: "\f1eb"; -} - -i.icon.winner::before { - content: "\f091"; -} - -i.icon.wizard::before { - content: "\f0d0"; -} - -i.icon.woman::before { - content: "\f221"; -} - -i.icon.won::before { - content: "\f159"; -} - -i.icon.world::before { - content: "\f0ac"; -} - -i.icon.write::before { - content: "\f303"; -} - -i.icon.write.square::before { - content: "\f14b"; -} - -i.icon.x::before { - content: "\f00d"; -} - -i.icon.yen::before { - content: "\f157"; -} - -i.icon.zip::before { - content: "\f187"; -} - -i.icon.zoom::before { - content: "\f00e"; -} - -/******************************* - Outline Icons - *******************************/ - -i.icon.outline { - font-family: "outline-icons"; -} - -/* Icons */ - -i.icon.address.book.outline::before { - content: "\f2b9"; -} - -i.icon.address.card.outline::before { - content: "\f2bb"; -} - -i.icon.angry.outline::before { - content: "\f556"; -} - -i.icon.arrow.alternate.circle.down.outline::before { - content: "\f358"; -} - -i.icon.arrow.alternate.circle.left.outline::before { - content: "\f359"; -} - -i.icon.arrow.alternate.circle.right.outline::before { - content: "\f35a"; -} - -i.icon.arrow.alternate.circle.up.outline::before { - content: "\f35b"; -} - -i.icon.bell.outline::before { - content: "\f0f3"; -} - -i.icon.bell.slash.outline::before { - content: "\f1f6"; -} - -i.icon.bookmark.outline::before { - content: "\f02e"; -} - -i.icon.building.outline::before { - content: "\f1ad"; -} - -i.icon.calendar.alternate.outline::before { - content: "\f073"; -} - -i.icon.calendar.check.outline::before { - content: "\f274"; -} - -i.icon.calendar.minus.outline::before { - content: "\f272"; -} - -i.icon.calendar.outline::before { - content: "\f133"; -} - -i.icon.calendar.plus.outline::before { - content: "\f271"; -} - -i.icon.calendar.times.outline::before { - content: "\f273"; -} - -i.icon.caret.square.down.outline::before { - content: "\f150"; -} - -i.icon.caret.square.left.outline::before { - content: "\f191"; -} - -i.icon.caret.square.right.outline::before { - content: "\f152"; -} - -i.icon.caret.square.up.outline::before { - content: "\f151"; -} - -i.icon.chart.bar.outline::before { - content: "\f080"; -} - -i.icon.check.circle.outline::before { - content: "\f058"; -} - -i.icon.check.square.outline::before { - content: "\f14a"; -} - -i.icon.circle.outline::before { - content: "\f111"; -} - -i.icon.clipboard.outline::before { - content: "\f328"; -} - -i.icon.clock.outline::before { - content: "\f017"; -} - -i.icon.clone.outline::before { - content: "\f24d"; -} - -i.icon.closed.captioning.outline::before { - content: "\f20a"; -} - -i.icon.comment.alternate.outline::before { - content: "\f27a"; -} - -i.icon.comment.dots.outline::before { - content: "\f4ad"; -} - -i.icon.comment.outline::before { - content: "\f075"; -} - -i.icon.comments.outline::before { - content: "\f086"; -} - -i.icon.compass.outline::before { - content: "\f14e"; -} - -i.icon.copy.outline::before { - content: "\f0c5"; -} - -i.icon.copyright.outline::before { - content: "\f1f9"; -} - -i.icon.credit.card.outline::before { - content: "\f09d"; -} - -i.icon.dizzy.outline::before { - content: "\f567"; -} - -i.icon.dot.circle.outline::before { - content: "\f192"; -} - -i.icon.edit.outline::before { - content: "\f044"; -} - -i.icon.envelope.open.outline::before { - content: "\f2b6"; -} - -i.icon.envelope.outline::before { - content: "\f0e0"; -} - -i.icon.eye.outline::before { - content: "\f06e"; -} - -i.icon.eye.slash.outline::before { - content: "\f070"; -} - -i.icon.file.alternate.outline::before { - content: "\f15c"; -} - -i.icon.file.archive.outline::before { - content: "\f1c6"; -} - -i.icon.file.audio.outline::before { - content: "\f1c7"; -} - -i.icon.file.code.outline::before { - content: "\f1c9"; -} - -i.icon.file.excel.outline::before { - content: "\f1c3"; -} - -i.icon.file.image.outline::before { - content: "\f1c5"; -} - -i.icon.file.outline::before { - content: "\f15b"; -} - -i.icon.file.pdf.outline::before { - content: "\f1c1"; -} - -i.icon.file.powerpoint.outline::before { - content: "\f1c4"; -} - -i.icon.file.video.outline::before { - content: "\f1c8"; -} - -i.icon.file.word.outline::before { - content: "\f1c2"; -} - -i.icon.flag.outline::before { - content: "\f024"; -} - -i.icon.flushed.outline::before { - content: "\f579"; -} - -i.icon.folder.open.outline::before { - content: "\f07c"; -} - -i.icon.folder.outline::before { - content: "\f07b"; -} - -i.icon.frown.open.outline::before { - content: "\f57a"; -} - -i.icon.frown.outline::before { - content: "\f119"; -} - -i.icon.futbol.outline::before { - content: "\f1e3"; -} - -i.icon.gem.outline::before { - content: "\f3a5"; -} - -i.icon.grimace.outline::before { - content: "\f57f"; -} - -i.icon.grin.alternate.outline::before { - content: "\f581"; -} - -i.icon.grin.beam.outline::before { - content: "\f582"; -} - -i.icon.grin.beam.sweat.outline::before { - content: "\f583"; -} - -i.icon.grin.hearts.outline::before { - content: "\f584"; -} - -i.icon.grin.outline::before { - content: "\f580"; -} - -i.icon.grin.squint.outline::before { - content: "\f585"; -} - -i.icon.grin.squint.tears.outline::before { - content: "\f586"; -} - -i.icon.grin.stars.outline::before { - content: "\f587"; -} - -i.icon.grin.tears.outline::before { - content: "\f588"; -} - -i.icon.grin.tongue.outline::before { - content: "\f589"; -} - -i.icon.grin.tongue.squint.outline::before { - content: "\f58a"; -} - -i.icon.grin.tongue.wink.outline::before { - content: "\f58b"; -} - -i.icon.grin.wink.outline::before { - content: "\f58c"; -} - -i.icon.hand.lizard.outline::before { - content: "\f258"; -} - -i.icon.hand.paper.outline::before { - content: "\f256"; -} - -i.icon.hand.peace.outline::before { - content: "\f25b"; -} - -i.icon.hand.point.down.outline::before { - content: "\f0a7"; -} - -i.icon.hand.point.left.outline::before { - content: "\f0a5"; -} - -i.icon.hand.point.right.outline::before { - content: "\f0a4"; -} - -i.icon.hand.point.up.outline::before { - content: "\f0a6"; -} - -i.icon.hand.pointer.outline::before { - content: "\f25a"; -} - -i.icon.hand.rock.outline::before { - content: "\f255"; -} - -i.icon.hand.scissors.outline::before { - content: "\f257"; -} - -i.icon.hand.spock.outline::before { - content: "\f259"; -} - -i.icon.handshake.outline::before { - content: "\f2b5"; -} - -i.icon.hdd.outline::before { - content: "\f0a0"; -} - -i.icon.heart.outline::before { - content: "\f004"; -} - -i.icon.hospital.outline::before { - content: "\f0f8"; -} - -i.icon.hourglass.outline::before { - content: "\f254"; -} - -i.icon.id.badge.outline::before { - content: "\f2c1"; -} - -i.icon.id.card.outline::before { - content: "\f2c2"; -} - -i.icon.image.outline::before { - content: "\f03e"; -} - -i.icon.images.outline::before { - content: "\f302"; -} - -i.icon.keyboard.outline::before { - content: "\f11c"; -} - -i.icon.kiss.beam.outline::before { - content: "\f597"; -} - -i.icon.kiss.outline::before { - content: "\f596"; -} - -i.icon.kiss.wink.heart.outline::before { - content: "\f598"; -} - -i.icon.laugh.beam.outline::before { - content: "\f59a"; -} - -i.icon.laugh.outline::before { - content: "\f599"; -} - -i.icon.laugh.squint.outline::before { - content: "\f59b"; -} - -i.icon.laugh.wink.outline::before { - content: "\f59c"; -} - -i.icon.lemon.outline::before { - content: "\f094"; -} - -i.icon.life.ring.outline::before { - content: "\f1cd"; -} - -i.icon.lightbulb.outline::before { - content: "\f0eb"; -} - -i.icon.list.alternate.outline::before { - content: "\f022"; -} - -i.icon.map.outline::before { - content: "\f279"; -} - -i.icon.meh.blank.outline::before { - content: "\f5a4"; -} - -i.icon.meh.outline::before { - content: "\f11a"; -} - -i.icon.meh.rolling.eyes.outline::before { - content: "\f5a5"; -} - -i.icon.minus.square.outline::before { - content: "\f146"; -} - -i.icon.money.bill.alternate.outline::before { - content: "\f3d1"; -} - -i.icon.moon.outline::before { - content: "\f186"; -} - -i.icon.newspaper.outline::before { - content: "\f1ea"; -} - -i.icon.object.group.outline::before { - content: "\f247"; -} - -i.icon.object.ungroup.outline::before { - content: "\f248"; -} - -i.icon.paper.plane.outline::before { - content: "\f1d8"; -} - -i.icon.pause.circle.outline::before { - content: "\f28b"; -} - -i.icon.play.circle.outline::before { - content: "\f144"; -} - -i.icon.plus.square.outline::before { - content: "\f0fe"; -} - -i.icon.question.circle.outline::before { - content: "\f059"; -} - -i.icon.registered.outline::before { - content: "\f25d"; -} - -i.icon.sad.cry.outline::before { - content: "\f5b3"; -} - -i.icon.sad.tear.outline::before { - content: "\f5b4"; -} - -i.icon.save.outline::before { - content: "\f0c7"; -} - -i.icon.share.square.outline::before { - content: "\f14d"; -} - -i.icon.smile.beam.outline::before { - content: "\f5b8"; -} - -i.icon.smile.outline::before { - content: "\f118"; -} - -i.icon.smile.wink.outline::before { - content: "\f4da"; -} - -i.icon.snowflake.outline::before { - content: "\f2dc"; -} - -i.icon.square.outline::before { - content: "\f0c8"; -} - -i.icon.star.half.outline::before { - content: "\f089"; -} - -i.icon.star.outline::before { - content: "\f005"; -} - -i.icon.sticky.note.outline::before { - content: "\f249"; -} - -i.icon.stop.circle.outline::before { - content: "\f28d"; -} - -i.icon.sun.outline::before { - content: "\f185"; -} - -i.icon.surprise.outline::before { - content: "\f5c2"; -} - -i.icon.thumbs.down.outline::before { - content: "\f165"; -} - -i.icon.thumbs.up.outline::before { - content: "\f164"; -} - -i.icon.times.circle.outline::before { - content: "\f057"; -} - -i.icon.tired.outline::before { - content: "\f5c8"; -} - -i.icon.trash.alternate.outline::before { - content: "\f2ed"; -} - -i.icon.user.circle.outline::before { - content: "\f2bd"; -} - -i.icon.user.outline::before { - content: "\f007"; -} - -i.icon.window.close.outline::before { - content: "\f410"; -} - -i.icon.window.maximize.outline::before { - content: "\f2d0"; -} - -i.icon.window.minimize.outline::before { - content: "\f2d1"; -} - -i.icon.window.restore.outline::before { - content: "\f2d2"; -} - -/* Aliases */ - -/******************************* - Brand Icons - *******************************/ - -/* Icons */ - -i.icon.\35 00px::before { - content: "\f26e"; - font-family: "brand-icons"; -} - -i.icon.accessible::before { - content: "\f368"; - font-family: "brand-icons"; -} - -i.icon.accusoft::before { - content: "\f369"; - font-family: "brand-icons"; -} - -i.icon.acquisitions.incorporated::before { - content: "\f6af"; - font-family: "brand-icons"; -} - -i.icon.adn::before { - content: "\f170"; - font-family: "brand-icons"; -} - -i.icon.adversal::before { - content: "\f36a"; - font-family: "brand-icons"; -} - -i.icon.affiliatetheme::before { - content: "\f36b"; - font-family: "brand-icons"; -} - -i.icon.airbnb::before { - content: "\f834"; - font-family: "brand-icons"; -} - -i.icon.algolia::before { - content: "\f36c"; - font-family: "brand-icons"; -} - -i.icon.alipay::before { - content: "\f642"; - font-family: "brand-icons"; -} - -i.icon.amazon::before { - content: "\f270"; - font-family: "brand-icons"; -} - -i.icon.amazon.pay::before { - content: "\f42c"; - font-family: "brand-icons"; -} - -i.icon.amilia::before { - content: "\f36d"; - font-family: "brand-icons"; -} - -i.icon.android::before { - content: "\f17b"; - font-family: "brand-icons"; -} - -i.icon.angellist::before { - content: "\f209"; - font-family: "brand-icons"; -} - -i.icon.angrycreative::before { - content: "\f36e"; - font-family: "brand-icons"; -} - -i.icon.angular::before { - content: "\f420"; - font-family: "brand-icons"; -} - -i.icon.app.store::before { - content: "\f36f"; - font-family: "brand-icons"; -} - -i.icon.app.store.ios::before { - content: "\f370"; - font-family: "brand-icons"; -} - -i.icon.apper::before { - content: "\f371"; - font-family: "brand-icons"; -} - -i.icon.apple::before { - content: "\f179"; - font-family: "brand-icons"; -} - -i.icon.apple.pay::before { - content: "\f415"; - font-family: "brand-icons"; -} - -i.icon.artstation::before { - content: "\f77a"; - font-family: "brand-icons"; -} - -i.icon.asymmetrik::before { - content: "\f372"; - font-family: "brand-icons"; -} - -i.icon.atlassian::before { - content: "\f77b"; - font-family: "brand-icons"; -} - -i.icon.audible::before { - content: "\f373"; - font-family: "brand-icons"; -} - -i.icon.autoprefixer::before { - content: "\f41c"; - font-family: "brand-icons"; -} - -i.icon.avianex::before { - content: "\f374"; - font-family: "brand-icons"; -} - -i.icon.aviato::before { - content: "\f421"; - font-family: "brand-icons"; -} - -i.icon.aws::before { - content: "\f375"; - font-family: "brand-icons"; -} - -i.icon.bandcamp::before { - content: "\f2d5"; - font-family: "brand-icons"; -} - -i.icon.battle.net::before { - content: "\f835"; - font-family: "brand-icons"; -} - -i.icon.behance::before { - content: "\f1b4"; - font-family: "brand-icons"; -} - -i.icon.behance.square::before { - content: "\f1b5"; - font-family: "brand-icons"; -} - -i.icon.bimobject::before { - content: "\f378"; - font-family: "brand-icons"; -} - -i.icon.bitbucket::before { - content: "\f171"; - font-family: "brand-icons"; -} - -i.icon.bitcoin::before { - content: "\f379"; - font-family: "brand-icons"; -} - -i.icon.bity::before { - content: "\f37a"; - font-family: "brand-icons"; -} - -i.icon.black.tie::before { - content: "\f27e"; - font-family: "brand-icons"; -} - -i.icon.blackberry::before { - content: "\f37b"; - font-family: "brand-icons"; -} - -i.icon.blogger::before { - content: "\f37c"; - font-family: "brand-icons"; -} - -i.icon.blogger.b::before { - content: "\f37d"; - font-family: "brand-icons"; -} - -i.icon.bluetooth::before { - content: "\f293"; - font-family: "brand-icons"; -} - -i.icon.bluetooth.b::before { - content: "\f294"; - font-family: "brand-icons"; -} - -i.icon.bootstrap::before { - content: "\f836"; - font-family: "brand-icons"; -} - -i.icon.btc::before { - content: "\f15a"; - font-family: "brand-icons"; -} - -i.icon.buffer::before { - content: "\f837"; - font-family: "brand-icons"; -} - -i.icon.buromobelexperte::before { - content: "\f37f"; - font-family: "brand-icons"; -} - -i.icon.buy.n.large::before { - content: "\f8a6"; - font-family: "brand-icons"; -} - -i.icon.buysellads::before { - content: "\f20d"; - font-family: "brand-icons"; -} - -i.icon.canadian.maple.leaf::before { - content: "\f785"; - font-family: "brand-icons"; -} - -i.icon.cc.amazon.pay::before { - content: "\f42d"; - font-family: "brand-icons"; -} - -i.icon.cc.amex::before { - content: "\f1f3"; - font-family: "brand-icons"; -} - -i.icon.cc.apple.pay::before { - content: "\f416"; - font-family: "brand-icons"; -} - -i.icon.cc.diners.club::before { - content: "\f24c"; - font-family: "brand-icons"; -} - -i.icon.cc.discover::before { - content: "\f1f2"; - font-family: "brand-icons"; -} - -i.icon.cc.jcb::before { - content: "\f24b"; - font-family: "brand-icons"; -} - -i.icon.cc.mastercard::before { - content: "\f1f1"; - font-family: "brand-icons"; -} - -i.icon.cc.paypal::before { - content: "\f1f4"; - font-family: "brand-icons"; -} - -i.icon.cc.stripe::before { - content: "\f1f5"; - font-family: "brand-icons"; -} - -i.icon.cc.visa::before { - content: "\f1f0"; - font-family: "brand-icons"; -} - -i.icon.centercode::before { - content: "\f380"; - font-family: "brand-icons"; -} - -i.icon.centos::before { - content: "\f789"; - font-family: "brand-icons"; -} - -i.icon.chrome::before { - content: "\f268"; - font-family: "brand-icons"; -} - -i.icon.chromecast::before { - content: "\f838"; - font-family: "brand-icons"; -} - -i.icon.cloudflare::before { - content: "\e07d"; - font-family: "brand-icons"; -} - -i.icon.cloudscale::before { - content: "\f383"; - font-family: "brand-icons"; -} - -i.icon.cloudsmith::before { - content: "\f384"; - font-family: "brand-icons"; -} - -i.icon.cloudversify::before { - content: "\f385"; - font-family: "brand-icons"; -} - -i.icon.codepen::before { - content: "\f1cb"; - font-family: "brand-icons"; -} - -i.icon.codiepie::before { - content: "\f284"; - font-family: "brand-icons"; -} - -i.icon.confluence::before { - content: "\f78d"; - font-family: "brand-icons"; -} - -i.icon.connectdevelop::before { - content: "\f20e"; - font-family: "brand-icons"; -} - -i.icon.contao::before { - content: "\f26d"; - font-family: "brand-icons"; -} - -i.icon.cotton.bureau::before { - content: "\f89e"; - font-family: "brand-icons"; -} - -i.icon.cpanel::before { - content: "\f388"; - font-family: "brand-icons"; -} - -i.icon.creative.commons::before { - content: "\f25e"; - font-family: "brand-icons"; -} - -i.icon.creative.commons.by::before { - content: "\f4e7"; - font-family: "brand-icons"; -} - -i.icon.creative.commons.nc::before { - content: "\f4e8"; - font-family: "brand-icons"; -} - -i.icon.creative.commons.nc.eu::before { - content: "\f4e9"; - font-family: "brand-icons"; -} - -i.icon.creative.commons.nc.jp::before { - content: "\f4ea"; - font-family: "brand-icons"; -} - -i.icon.creative.commons.nd::before { - content: "\f4eb"; - font-family: "brand-icons"; -} - -i.icon.creative.commons.pd::before { - content: "\f4ec"; - font-family: "brand-icons"; -} - -i.icon.creative.commons.pd.alternate::before { - content: "\f4ed"; - font-family: "brand-icons"; -} - -i.icon.creative.commons.remix::before { - content: "\f4ee"; - font-family: "brand-icons"; -} - -i.icon.creative.commons.sa::before { - content: "\f4ef"; - font-family: "brand-icons"; -} - -i.icon.creative.commons.sampling::before { - content: "\f4f0"; - font-family: "brand-icons"; -} - -i.icon.creative.commons.sampling.plus::before { - content: "\f4f1"; - font-family: "brand-icons"; -} - -i.icon.creative.commons.share::before { - content: "\f4f2"; - font-family: "brand-icons"; -} - -i.icon.creative.commons.zero::before { - content: "\f4f3"; - font-family: "brand-icons"; -} - -i.icon.critical.role::before { - content: "\f6c9"; - font-family: "brand-icons"; -} - -i.icon.css3::before { - content: "\f13c"; - font-family: "brand-icons"; -} - -i.icon.css3.alternate::before { - content: "\f38b"; - font-family: "brand-icons"; -} - -i.icon.cuttlefish::before { - content: "\f38c"; - font-family: "brand-icons"; -} - -i.icon.d.and.d::before { - content: "\f38d"; - font-family: "brand-icons"; -} - -i.icon.d.and.d.beyond::before { - content: "\f6ca"; - font-family: "brand-icons"; -} - -i.icon.dailymotion::before { - content: "\e052"; - font-family: "brand-icons"; -} - -i.icon.dashcube::before { - content: "\f210"; - font-family: "brand-icons"; -} - -i.icon.deezer::before { - content: "\e077"; - font-family: "brand-icons"; -} - -i.icon.delicious::before { - content: "\f1a5"; - font-family: "brand-icons"; -} - -i.icon.deploydog::before { - content: "\f38e"; - font-family: "brand-icons"; -} - -i.icon.deskpro::before { - content: "\f38f"; - font-family: "brand-icons"; -} - -i.icon.dev::before { - content: "\f6cc"; - font-family: "brand-icons"; -} - -i.icon.deviantart::before { - content: "\f1bd"; - font-family: "brand-icons"; -} - -i.icon.dhl::before { - content: "\f790"; - font-family: "brand-icons"; -} - -i.icon.diaspora::before { - content: "\f791"; - font-family: "brand-icons"; -} - -i.icon.digg::before { - content: "\f1a6"; - font-family: "brand-icons"; -} - -i.icon.digital.ocean::before { - content: "\f391"; - font-family: "brand-icons"; -} - -i.icon.discord::before { - content: "\f392"; - font-family: "brand-icons"; -} - -i.icon.discourse::before { - content: "\f393"; - font-family: "brand-icons"; -} - -i.icon.dochub::before { - content: "\f394"; - font-family: "brand-icons"; -} - -i.icon.docker::before { - content: "\f395"; - font-family: "brand-icons"; -} - -i.icon.draft2digital::before { - content: "\f396"; - font-family: "brand-icons"; -} - -i.icon.dribbble::before { - content: "\f17d"; - font-family: "brand-icons"; -} - -i.icon.dribbble.square::before { - content: "\f397"; - font-family: "brand-icons"; -} - -i.icon.dropbox::before { - content: "\f16b"; - font-family: "brand-icons"; -} - -i.icon.drupal::before { - content: "\f1a9"; - font-family: "brand-icons"; -} - -i.icon.dyalog::before { - content: "\f399"; - font-family: "brand-icons"; -} - -i.icon.earlybirds::before { - content: "\f39a"; - font-family: "brand-icons"; -} - -i.icon.ebay::before { - content: "\f4f4"; - font-family: "brand-icons"; -} - -i.icon.edge::before { - content: "\f282"; - font-family: "brand-icons"; -} - -i.icon.edge.legacy::before { - content: "\e078"; - font-family: "brand-icons"; -} - -i.icon.elementor::before { - content: "\f430"; - font-family: "brand-icons"; -} - -i.icon.ello::before { - content: "\f5f1"; - font-family: "brand-icons"; -} - -i.icon.ember::before { - content: "\f423"; - font-family: "brand-icons"; -} - -i.icon.empire::before { - content: "\f1d1"; - font-family: "brand-icons"; -} - -i.icon.envira::before { - content: "\f299"; - font-family: "brand-icons"; -} - -i.icon.erlang::before { - content: "\f39d"; - font-family: "brand-icons"; -} - -i.icon.ethereum::before { - content: "\f42e"; - font-family: "brand-icons"; -} - -i.icon.etsy::before { - content: "\f2d7"; - font-family: "brand-icons"; -} - -i.icon.evernote::before { - content: "\f839"; - font-family: "brand-icons"; -} - -i.icon.expeditedssl::before { - content: "\f23e"; - font-family: "brand-icons"; -} - -i.icon.facebook::before { - content: "\f09a"; - font-family: "brand-icons"; -} - -i.icon.facebook.f::before { - content: "\f39e"; - font-family: "brand-icons"; -} - -i.icon.facebook.messenger::before { - content: "\f39f"; - font-family: "brand-icons"; -} - -i.icon.facebook.square::before { - content: "\f082"; - font-family: "brand-icons"; -} - -i.icon.fantasy.flight.games::before { - content: "\f6dc"; - font-family: "brand-icons"; -} - -i.icon.fedex::before { - content: "\f797"; - font-family: "brand-icons"; -} - -i.icon.fedora::before { - content: "\f798"; - font-family: "brand-icons"; -} - -i.icon.figma::before { - content: "\f799"; - font-family: "brand-icons"; -} - -i.icon.firefox::before { - content: "\f269"; - font-family: "brand-icons"; -} - -i.icon.firefox.browser::before { - content: "\e007"; - font-family: "brand-icons"; -} - -i.icon.first.order::before { - content: "\f2b0"; - font-family: "brand-icons"; -} - -i.icon.first.order.alternate::before { - content: "\f50a"; - font-family: "brand-icons"; -} - -i.icon.firstdraft::before { - content: "\f3a1"; - font-family: "brand-icons"; -} - -i.icon.flickr::before { - content: "\f16e"; - font-family: "brand-icons"; -} - -i.icon.flipboard::before { - content: "\f44d"; - font-family: "brand-icons"; -} - -i.icon.fly::before { - content: "\f417"; - font-family: "brand-icons"; -} - -i.icon.font.awesome::before { - content: "\f2b4"; - font-family: "brand-icons"; -} - -i.icon.font.awesome.alternate::before { - content: "\f35c"; - font-family: "brand-icons"; -} - -i.icon.font.awesome.flag::before { - content: "\f425"; - font-family: "brand-icons"; -} - -i.icon.fonticons::before { - content: "\f280"; - font-family: "brand-icons"; -} - -i.icon.fonticons.fi::before { - content: "\f3a2"; - font-family: "brand-icons"; -} - -i.icon.fort.awesome::before { - content: "\f286"; - font-family: "brand-icons"; -} - -i.icon.fort.awesome.alternate::before { - content: "\f3a3"; - font-family: "brand-icons"; -} - -i.icon.forumbee::before { - content: "\f211"; - font-family: "brand-icons"; -} - -i.icon.foursquare::before { - content: "\f180"; - font-family: "brand-icons"; -} - -i.icon.free.code.camp::before { - content: "\f2c5"; - font-family: "brand-icons"; -} - -i.icon.freebsd::before { - content: "\f3a4"; - font-family: "brand-icons"; -} - -i.icon.fulcrum::before { - content: "\f50b"; - font-family: "brand-icons"; -} - -i.icon.galactic.republic::before { - content: "\f50c"; - font-family: "brand-icons"; -} - -i.icon.galactic.senate::before { - content: "\f50d"; - font-family: "brand-icons"; -} - -i.icon.get.pocket::before { - content: "\f265"; - font-family: "brand-icons"; -} - -i.icon.gg::before { - content: "\f260"; - font-family: "brand-icons"; -} - -i.icon.gg.circle::before { - content: "\f261"; - font-family: "brand-icons"; -} - -i.icon.git::before { - content: "\f1d3"; - font-family: "brand-icons"; -} - -i.icon.git.alternate::before { - content: "\f841"; - font-family: "brand-icons"; -} - -i.icon.git.square::before { - content: "\f1d2"; - font-family: "brand-icons"; -} - -i.icon.github::before { - content: "\f09b"; - font-family: "brand-icons"; -} - -i.icon.github.alternate::before { - content: "\f113"; - font-family: "brand-icons"; -} - -i.icon.github.square::before { - content: "\f092"; - font-family: "brand-icons"; -} - -i.icon.gitkraken::before { - content: "\f3a6"; - font-family: "brand-icons"; -} - -i.icon.gitlab::before { - content: "\f296"; - font-family: "brand-icons"; -} - -i.icon.gitter::before { - content: "\f426"; - font-family: "brand-icons"; -} - -i.icon.glide::before { - content: "\f2a5"; - font-family: "brand-icons"; -} - -i.icon.glide.g::before { - content: "\f2a6"; - font-family: "brand-icons"; -} - -i.icon.gofore::before { - content: "\f3a7"; - font-family: "brand-icons"; -} - -i.icon.goodreads::before { - content: "\f3a8"; - font-family: "brand-icons"; -} - -i.icon.goodreads.g::before { - content: "\f3a9"; - font-family: "brand-icons"; -} - -i.icon.google::before { - content: "\f1a0"; - font-family: "brand-icons"; -} - -i.icon.google.drive::before { - content: "\f3aa"; - font-family: "brand-icons"; -} - -i.icon.google.pay::before { - content: "\e079"; - font-family: "brand-icons"; -} - -i.icon.google.play::before { - content: "\f3ab"; - font-family: "brand-icons"; -} - -i.icon.google.plus::before { - content: "\f2b3"; - font-family: "brand-icons"; -} - -i.icon.google.plus.g::before { - content: "\f0d5"; - font-family: "brand-icons"; -} - -i.icon.google.plus.square::before { - content: "\f0d4"; - font-family: "brand-icons"; -} - -i.icon.google.wallet::before { - content: "\f1ee"; - font-family: "brand-icons"; -} - -i.icon.gratipay::before { - content: "\f184"; - font-family: "brand-icons"; -} - -i.icon.grav::before { - content: "\f2d6"; - font-family: "brand-icons"; -} - -i.icon.gripfire::before { - content: "\f3ac"; - font-family: "brand-icons"; -} - -i.icon.grunt::before { - content: "\f3ad"; - font-family: "brand-icons"; -} - -i.icon.guilded::before { - content: "\e07e"; - font-family: "brand-icons"; -} - -i.icon.gulp::before { - content: "\f3ae"; - font-family: "brand-icons"; -} - -i.icon.hacker.news::before { - content: "\f1d4"; - font-family: "brand-icons"; -} - -i.icon.hacker.news.square::before { - content: "\f3af"; - font-family: "brand-icons"; -} - -i.icon.hackerrank::before { - content: "\f5f7"; - font-family: "brand-icons"; -} - -i.icon.hips::before { - content: "\f452"; - font-family: "brand-icons"; -} - -i.icon.hire.a.helper::before { - content: "\f3b0"; - font-family: "brand-icons"; -} - -i.icon.hive::before { - content: "\e07f"; - font-family: "brand-icons"; -} - -i.icon.hooli::before { - content: "\f427"; - font-family: "brand-icons"; -} - -i.icon.hornbill::before { - content: "\f592"; - font-family: "brand-icons"; -} - -i.icon.hotjar::before { - content: "\f3b1"; - font-family: "brand-icons"; -} - -i.icon.houzz::before { - content: "\f27c"; - font-family: "brand-icons"; -} - -i.icon.html5::before { - content: "\f13b"; - font-family: "brand-icons"; -} - -i.icon.hubspot::before { - content: "\f3b2"; - font-family: "brand-icons"; -} - -i.icon.ideal::before { - content: "\e013"; - font-family: "brand-icons"; -} - -i.icon.imdb::before { - content: "\f2d8"; - font-family: "brand-icons"; -} - -i.icon.innosoft::before { - content: "\e080"; - font-family: "brand-icons"; -} - -i.icon.instagram::before { - content: "\f16d"; - font-family: "brand-icons"; -} - -i.icon.instagram.square::before { - content: "\e055"; - font-family: "brand-icons"; -} - -i.icon.instalod::before { - content: "\e081"; - font-family: "brand-icons"; -} - -i.icon.intercom::before { - content: "\f7af"; - font-family: "brand-icons"; -} - -i.icon.internet.explorer::before { - content: "\f26b"; - font-family: "brand-icons"; -} - -i.icon.invision::before { - content: "\f7b0"; - font-family: "brand-icons"; -} - -i.icon.ioxhost::before { - content: "\f208"; - font-family: "brand-icons"; -} - -i.icon.itch.io::before { - content: "\f83a"; - font-family: "brand-icons"; -} - -i.icon.itunes::before { - content: "\f3b4"; - font-family: "brand-icons"; -} - -i.icon.itunes.note::before { - content: "\f3b5"; - font-family: "brand-icons"; -} - -i.icon.java::before { - content: "\f4e4"; - font-family: "brand-icons"; -} - -i.icon.jedi.order::before { - content: "\f50e"; - font-family: "brand-icons"; -} - -i.icon.jenkins::before { - content: "\f3b6"; - font-family: "brand-icons"; -} - -i.icon.jira::before { - content: "\f7b1"; - font-family: "brand-icons"; -} - -i.icon.joget::before { - content: "\f3b7"; - font-family: "brand-icons"; -} - -i.icon.joomla::before { - content: "\f1aa"; - font-family: "brand-icons"; -} - -i.icon.js::before { - content: "\f3b8"; - font-family: "brand-icons"; -} - -i.icon.js.square::before { - content: "\f3b9"; - font-family: "brand-icons"; -} - -i.icon.jsfiddle::before { - content: "\f1cc"; - font-family: "brand-icons"; -} - -i.icon.kaggle::before { - content: "\f5fa"; - font-family: "brand-icons"; -} - -i.icon.keybase::before { - content: "\f4f5"; - font-family: "brand-icons"; -} - -i.icon.keycdn::before { - content: "\f3ba"; - font-family: "brand-icons"; -} - -i.icon.kickstarter::before { - content: "\f3bb"; - font-family: "brand-icons"; -} - -i.icon.kickstarter.k::before { - content: "\f3bc"; - font-family: "brand-icons"; -} - -i.icon.korvue::before { - content: "\f42f"; - font-family: "brand-icons"; -} - -i.icon.laravel::before { - content: "\f3bd"; - font-family: "brand-icons"; -} - -i.icon.lastfm::before { - content: "\f202"; - font-family: "brand-icons"; -} - -i.icon.lastfm.square::before { - content: "\f203"; - font-family: "brand-icons"; -} - -i.icon.leanpub::before { - content: "\f212"; - font-family: "brand-icons"; -} - -i.icon.lesscss::before { - content: "\f41d"; - font-family: "brand-icons"; -} - -i.icon.linechat::before { - content: "\f3c0"; - font-family: "brand-icons"; -} - -i.icon.linkedin::before { - content: "\f08c"; - font-family: "brand-icons"; -} - -i.icon.linode::before { - content: "\f2b8"; - font-family: "brand-icons"; -} - -i.icon.linux::before { - content: "\f17c"; - font-family: "brand-icons"; -} - -i.icon.lyft::before { - content: "\f3c3"; - font-family: "brand-icons"; -} - -i.icon.magento::before { - content: "\f3c4"; - font-family: "brand-icons"; -} - -i.icon.mailchimp::before { - content: "\f59e"; - font-family: "brand-icons"; -} - -i.icon.mandalorian::before { - content: "\f50f"; - font-family: "brand-icons"; -} - -i.icon.markdown::before { - content: "\f60f"; - font-family: "brand-icons"; -} - -i.icon.mastodon::before { - content: "\f4f6"; - font-family: "brand-icons"; -} - -i.icon.maxcdn::before { - content: "\f136"; - font-family: "brand-icons"; -} - -i.icon.mdb::before { - content: "\f8ca"; - font-family: "brand-icons"; -} - -i.icon.medapps::before { - content: "\f3c6"; - font-family: "brand-icons"; -} - -i.icon.medium::before { - content: "\f23a"; - font-family: "brand-icons"; -} - -i.icon.medium.m::before { - content: "\f3c7"; - font-family: "brand-icons"; -} - -i.icon.medrt::before { - content: "\f3c8"; - font-family: "brand-icons"; -} - -i.icon.meetup::before { - content: "\f2e0"; - font-family: "brand-icons"; -} - -i.icon.megaport::before { - content: "\f5a3"; - font-family: "brand-icons"; -} - -i.icon.mendeley::before { - content: "\f7b3"; - font-family: "brand-icons"; -} - -i.icon.microblog::before { - content: "\e01a"; - font-family: "brand-icons"; -} - -i.icon.microsoft::before { - content: "\f3ca"; - font-family: "brand-icons"; -} - -i.icon.mix::before { - content: "\f3cb"; - font-family: "brand-icons"; -} - -i.icon.mixcloud::before { - content: "\f289"; - font-family: "brand-icons"; -} - -i.icon.mixer::before { - content: "\e056"; - font-family: "brand-icons"; -} - -i.icon.mizuni::before { - content: "\f3cc"; - font-family: "brand-icons"; -} - -i.icon.modx::before { - content: "\f285"; - font-family: "brand-icons"; -} - -i.icon.monero::before { - content: "\f3d0"; - font-family: "brand-icons"; -} - -i.icon.napster::before { - content: "\f3d2"; - font-family: "brand-icons"; -} - -i.icon.neos::before { - content: "\f612"; - font-family: "brand-icons"; -} - -i.icon.nimblr::before { - content: "\f5a8"; - font-family: "brand-icons"; -} - -i.icon.node::before { - content: "\f419"; - font-family: "brand-icons"; -} - -i.icon.node.js::before { - content: "\f3d3"; - font-family: "brand-icons"; -} - -i.icon.npm::before { - content: "\f3d4"; - font-family: "brand-icons"; -} - -i.icon.ns8::before { - content: "\f3d5"; - font-family: "brand-icons"; -} - -i.icon.nutritionix::before { - content: "\f3d6"; - font-family: "brand-icons"; -} - -i.icon.octopus.deploy::before { - content: "\e082"; - font-family: "brand-icons"; -} - -i.icon.odnoklassniki::before { - content: "\f263"; - font-family: "brand-icons"; -} - -i.icon.odnoklassniki.square::before { - content: "\f264"; - font-family: "brand-icons"; -} - -i.icon.old.republic::before { - content: "\f510"; - font-family: "brand-icons"; -} - -i.icon.opencart::before { - content: "\f23d"; - font-family: "brand-icons"; -} - -i.icon.openid::before { - content: "\f19b"; - font-family: "brand-icons"; -} - -i.icon.opera::before { - content: "\f26a"; - font-family: "brand-icons"; -} - -i.icon.optin.monster::before { - content: "\f23c"; - font-family: "brand-icons"; -} - -i.icon.orcid::before { - content: "\f8d2"; - font-family: "brand-icons"; -} - -i.icon.osi::before { - content: "\f41a"; - font-family: "brand-icons"; -} - -i.icon.page4::before { - content: "\f3d7"; - font-family: "brand-icons"; -} - -i.icon.pagelines::before { - content: "\f18c"; - font-family: "brand-icons"; -} - -i.icon.palfed::before { - content: "\f3d8"; - font-family: "brand-icons"; -} - -i.icon.patreon::before { - content: "\f3d9"; - font-family: "brand-icons"; -} - -i.icon.paypal::before { - content: "\f1ed"; - font-family: "brand-icons"; -} - -i.icon.penny.arcade::before { - content: "\f704"; - font-family: "brand-icons"; -} - -i.icon.perbyte::before { - content: "\e083"; - font-family: "brand-icons"; -} - -i.icon.periscope::before { - content: "\f3da"; - font-family: "brand-icons"; -} - -i.icon.phabricator::before { - content: "\f3db"; - font-family: "brand-icons"; -} - -i.icon.phoenix.framework::before { - content: "\f3dc"; - font-family: "brand-icons"; -} - -i.icon.phoenix.squadron::before { - content: "\f511"; - font-family: "brand-icons"; -} - -i.icon.php::before { - content: "\f457"; - font-family: "brand-icons"; -} - -i.icon.pied.piper::before { - content: "\f2ae"; - font-family: "brand-icons"; -} - -i.icon.pied.piper.alternate::before { - content: "\f1a8"; - font-family: "brand-icons"; -} - -i.icon.pied.piper.hat::before { - content: "\f4e5"; - font-family: "brand-icons"; -} - -i.icon.pied.piper.pp::before { - content: "\f1a7"; - font-family: "brand-icons"; -} - -i.icon.pied.piper.square::before { - content: "\e01e"; - font-family: "brand-icons"; -} - -i.icon.pinterest::before { - content: "\f0d2"; - font-family: "brand-icons"; -} - -i.icon.pinterest.p::before { - content: "\f231"; - font-family: "brand-icons"; -} - -i.icon.pinterest.square::before { - content: "\f0d3"; - font-family: "brand-icons"; -} - -i.icon.playstation::before { - content: "\f3df"; - font-family: "brand-icons"; -} - -i.icon.product.hunt::before { - content: "\f288"; - font-family: "brand-icons"; -} - -i.icon.pushed::before { - content: "\f3e1"; - font-family: "brand-icons"; -} - -i.icon.python::before { - content: "\f3e2"; - font-family: "brand-icons"; -} - -i.icon.qq::before { - content: "\f1d6"; - font-family: "brand-icons"; -} - -i.icon.quinscape::before { - content: "\f459"; - font-family: "brand-icons"; -} - -i.icon.quora::before { - content: "\f2c4"; - font-family: "brand-icons"; -} - -i.icon.r.project::before { - content: "\f4f7"; - font-family: "brand-icons"; -} - -i.icon.raspberry.pi::before { - content: "\f7bb"; - font-family: "brand-icons"; -} - -i.icon.ravelry::before { - content: "\f2d9"; - font-family: "brand-icons"; -} - -i.icon.react::before { - content: "\f41b"; - font-family: "brand-icons"; -} - -i.icon.reacteurope::before { - content: "\f75d"; - font-family: "brand-icons"; -} - -i.icon.readme::before { - content: "\f4d5"; - font-family: "brand-icons"; -} - -i.icon.rebel::before { - content: "\f1d0"; - font-family: "brand-icons"; -} - -i.icon.reddit::before { - content: "\f1a1"; - font-family: "brand-icons"; -} - -i.icon.reddit.alien::before { - content: "\f281"; - font-family: "brand-icons"; -} - -i.icon.reddit.square::before { - content: "\f1a2"; - font-family: "brand-icons"; -} - -i.icon.redhat::before { - content: "\f7bc"; - font-family: "brand-icons"; -} - -i.icon.redriver::before { - content: "\f3e3"; - font-family: "brand-icons"; -} - -i.icon.redyeti::before { - content: "\f69d"; - font-family: "brand-icons"; -} - -i.icon.renren::before { - content: "\f18b"; - font-family: "brand-icons"; -} - -i.icon.replyd::before { - content: "\f3e6"; - font-family: "brand-icons"; -} - -i.icon.researchgate::before { - content: "\f4f8"; - font-family: "brand-icons"; -} - -i.icon.resolving::before { - content: "\f3e7"; - font-family: "brand-icons"; -} - -i.icon.rev::before { - content: "\f5b2"; - font-family: "brand-icons"; -} - -i.icon.rocketchat::before { - content: "\f3e8"; - font-family: "brand-icons"; -} - -i.icon.rockrms::before { - content: "\f3e9"; - font-family: "brand-icons"; -} - -i.icon.rust::before { - content: "\e07a"; - font-family: "brand-icons"; -} - -i.icon.safari::before { - content: "\f267"; - font-family: "brand-icons"; -} - -i.icon.salesforce::before { - content: "\f83b"; - font-family: "brand-icons"; -} - -i.icon.sass::before { - content: "\f41e"; - font-family: "brand-icons"; -} - -i.icon.schlix::before { - content: "\f3ea"; - font-family: "brand-icons"; -} - -i.icon.scribd::before { - content: "\f28a"; - font-family: "brand-icons"; -} - -i.icon.searchengin::before { - content: "\f3eb"; - font-family: "brand-icons"; -} - -i.icon.sellcast::before { - content: "\f2da"; - font-family: "brand-icons"; -} - -i.icon.sellsy::before { - content: "\f213"; - font-family: "brand-icons"; -} - -i.icon.servicestack::before { - content: "\f3ec"; - font-family: "brand-icons"; -} - -i.icon.shirtsinbulk::before { - content: "\f214"; - font-family: "brand-icons"; -} - -i.icon.shopify::before { - content: "\e057"; - font-family: "brand-icons"; -} - -i.icon.shopware::before { - content: "\f5b5"; - font-family: "brand-icons"; -} - -i.icon.simplybuilt::before { - content: "\f215"; - font-family: "brand-icons"; -} - -i.icon.sistrix::before { - content: "\f3ee"; - font-family: "brand-icons"; -} - -i.icon.sith::before { - content: "\f512"; - font-family: "brand-icons"; -} - -i.icon.sketch::before { - content: "\f7c6"; - font-family: "brand-icons"; -} - -i.icon.skyatlas::before { - content: "\f216"; - font-family: "brand-icons"; -} - -i.icon.skype::before { - content: "\f17e"; - font-family: "brand-icons"; -} - -i.icon.slack::before { - content: "\f198"; - font-family: "brand-icons"; -} - -i.icon.slack.hash::before { - content: "\f3ef"; - font-family: "brand-icons"; -} - -i.icon.slideshare::before { - content: "\f1e7"; - font-family: "brand-icons"; -} - -i.icon.snapchat::before { - content: "\f2ab"; - font-family: "brand-icons"; -} - -i.icon.snapchat.ghost::before { - content: "\f2ac"; - font-family: "brand-icons"; -} - -i.icon.snapchat.square::before { - content: "\f2ad"; - font-family: "brand-icons"; -} - -i.icon.soundcloud::before { - content: "\f1be"; - font-family: "brand-icons"; -} - -i.icon.sourcetree::before { - content: "\f7d3"; - font-family: "brand-icons"; -} - -i.icon.speakap::before { - content: "\f3f3"; - font-family: "brand-icons"; -} - -i.icon.speaker.deck::before { - content: "\f83c"; - font-family: "brand-icons"; -} - -i.icon.spotify::before { - content: "\f1bc"; - font-family: "brand-icons"; -} - -i.icon.squarespace::before { - content: "\f5be"; - font-family: "brand-icons"; -} - -i.icon.stack.exchange::before { - content: "\f18d"; - font-family: "brand-icons"; -} - -i.icon.stack.overflow::before { - content: "\f16c"; - font-family: "brand-icons"; -} - -i.icon.stackpath::before { - content: "\f842"; - font-family: "brand-icons"; -} - -i.icon.staylinked::before { - content: "\f3f5"; - font-family: "brand-icons"; -} - -i.icon.steam::before { - content: "\f1b6"; - font-family: "brand-icons"; -} - -i.icon.steam.square::before { - content: "\f1b7"; - font-family: "brand-icons"; -} - -i.icon.steam.symbol::before { - content: "\f3f6"; - font-family: "brand-icons"; -} - -i.icon.sticker.mule::before { - content: "\f3f7"; - font-family: "brand-icons"; -} - -i.icon.strava::before { - content: "\f428"; - font-family: "brand-icons"; -} - -i.icon.stripe::before { - content: "\f429"; - font-family: "brand-icons"; -} - -i.icon.stripe.s::before { - content: "\f42a"; - font-family: "brand-icons"; -} - -i.icon.studiovinari::before { - content: "\f3f8"; - font-family: "brand-icons"; -} - -i.icon.stumbleupon::before { - content: "\f1a4"; - font-family: "brand-icons"; -} - -i.icon.stumbleupon.circle::before { - content: "\f1a3"; - font-family: "brand-icons"; -} - -i.icon.superpowers::before { - content: "\f2dd"; - font-family: "brand-icons"; -} - -i.icon.supple::before { - content: "\f3f9"; - font-family: "brand-icons"; -} - -i.icon.suse::before { - content: "\f7d6"; - font-family: "brand-icons"; -} - -i.icon.swift::before { - content: "\f8e1"; - font-family: "brand-icons"; -} - -i.icon.symfony::before { - content: "\f83d"; - font-family: "brand-icons"; -} - -i.icon.teamspeak::before { - content: "\f4f9"; - font-family: "brand-icons"; -} - -i.icon.telegram::before { - content: "\f2c6"; - font-family: "brand-icons"; -} - -i.icon.telegram.plane::before { - content: "\f3fe"; - font-family: "brand-icons"; -} - -i.icon.tencent.weibo::before { - content: "\f1d5"; - font-family: "brand-icons"; -} - -i.icon.themeco::before { - content: "\f5c6"; - font-family: "brand-icons"; -} - -i.icon.themeisle::before { - content: "\f2b2"; - font-family: "brand-icons"; -} - -i.icon.think.peaks::before { - content: "\f731"; - font-family: "brand-icons"; -} - -i.icon.tiktok::before { - content: "\e07b"; - font-family: "brand-icons"; -} - -i.icon.trade.federation::before { - content: "\f513"; - font-family: "brand-icons"; -} - -i.icon.trello::before { - content: "\f181"; - font-family: "brand-icons"; -} - -i.icon.tumblr::before { - content: "\f173"; - font-family: "brand-icons"; -} - -i.icon.tumblr.square::before { - content: "\f174"; - font-family: "brand-icons"; -} - -i.icon.twitch::before { - content: "\f1e8"; - font-family: "brand-icons"; -} - -i.icon.twitter::before { - content: "\f099"; - font-family: "brand-icons"; -} - -i.icon.twitter.square::before { - content: "\f081"; - font-family: "brand-icons"; -} - -i.icon.typo3::before { - content: "\f42b"; - font-family: "brand-icons"; -} - -i.icon.uber::before { - content: "\f402"; - font-family: "brand-icons"; -} - -i.icon.ubuntu::before { - content: "\f7df"; - font-family: "brand-icons"; -} - -i.icon.uikit::before { - content: "\f403"; - font-family: "brand-icons"; -} - -i.icon.umbraco::before { - content: "\f8e8"; - font-family: "brand-icons"; -} - -i.icon.uncharted::before { - content: "\e084"; - font-family: "brand-icons"; -} - -i.icon.uniregistry::before { - content: "\f404"; - font-family: "brand-icons"; -} - -i.icon.unity::before { - content: "\e049"; - font-family: "brand-icons"; -} - -i.icon.unsplash::before { - content: "\e07c"; - font-family: "brand-icons"; -} - -i.icon.untappd::before { - content: "\f405"; - font-family: "brand-icons"; -} - -i.icon.ups::before { - content: "\f7e0"; - font-family: "brand-icons"; -} - -i.icon.usb::before { - content: "\f287"; - font-family: "brand-icons"; -} - -i.icon.usps::before { - content: "\f7e1"; - font-family: "brand-icons"; -} - -i.icon.ussunnah::before { - content: "\f407"; - font-family: "brand-icons"; -} - -i.icon.vaadin::before { - content: "\f408"; - font-family: "brand-icons"; -} - -i.icon.viacoin::before { - content: "\f237"; - font-family: "brand-icons"; -} - -i.icon.viadeo::before { - content: "\f2a9"; - font-family: "brand-icons"; -} - -i.icon.viadeo.square::before { - content: "\f2aa"; - font-family: "brand-icons"; -} - -i.icon.viber::before { - content: "\f409"; - font-family: "brand-icons"; -} - -i.icon.vimeo::before { - content: "\f40a"; - font-family: "brand-icons"; -} - -i.icon.vimeo.square::before { - content: "\f194"; - font-family: "brand-icons"; -} - -i.icon.vimeo.v::before { - content: "\f27d"; - font-family: "brand-icons"; -} - -i.icon.vine::before { - content: "\f1ca"; - font-family: "brand-icons"; -} - -i.icon.vk::before { - content: "\f189"; - font-family: "brand-icons"; -} - -i.icon.vnv::before { - content: "\f40b"; - font-family: "brand-icons"; -} - -i.icon.vuejs::before { - content: "\f41f"; - font-family: "brand-icons"; -} - -i.icon.watchman.monitoring::before { - content: "\e087"; - font-family: "brand-icons"; -} - -i.icon.waze::before { - content: "\f83f"; - font-family: "brand-icons"; -} - -i.icon.weebly::before { - content: "\f5cc"; - font-family: "brand-icons"; -} - -i.icon.weibo::before { - content: "\f18a"; - font-family: "brand-icons"; -} - -i.icon.weixin::before { - content: "\f1d7"; - font-family: "brand-icons"; -} - -i.icon.whatsapp::before { - content: "\f232"; - font-family: "brand-icons"; -} - -i.icon.whatsapp.square::before { - content: "\f40c"; - font-family: "brand-icons"; -} - -i.icon.whmcs::before { - content: "\f40d"; - font-family: "brand-icons"; -} - -i.icon.wikipedia.w::before { - content: "\f266"; - font-family: "brand-icons"; -} - -i.icon.windows::before { - content: "\f17a"; - font-family: "brand-icons"; -} - -i.icon.wix::before { - content: "\f5cf"; - font-family: "brand-icons"; -} - -i.icon.wizards.of.the.coast::before { - content: "\f730"; - font-family: "brand-icons"; -} - -i.icon.wodu::before { - content: "\e088"; - font-family: "brand-icons"; -} - -i.icon.wolf.pack.battalion::before { - content: "\f514"; - font-family: "brand-icons"; -} - -i.icon.wordpress::before { - content: "\f19a"; - font-family: "brand-icons"; -} - -i.icon.wordpress.simple::before { - content: "\f411"; - font-family: "brand-icons"; -} - -i.icon.wpbeginner::before { - content: "\f297"; - font-family: "brand-icons"; -} - -i.icon.wpexplorer::before { - content: "\f2de"; - font-family: "brand-icons"; -} - -i.icon.wpforms::before { - content: "\f298"; - font-family: "brand-icons"; -} - -i.icon.wpressr::before { - content: "\f3e4"; - font-family: "brand-icons"; -} - -i.icon.xbox::before { - content: "\f412"; - font-family: "brand-icons"; -} - -i.icon.xing::before { - content: "\f168"; - font-family: "brand-icons"; -} - -i.icon.xing.square::before { - content: "\f169"; - font-family: "brand-icons"; -} - -i.icon.y.combinator::before { - content: "\f23b"; - font-family: "brand-icons"; -} - -i.icon.yahoo::before { - content: "\f19e"; - font-family: "brand-icons"; -} - -i.icon.yammer::before { - content: "\f840"; - font-family: "brand-icons"; -} - -i.icon.yandex::before { - content: "\f413"; - font-family: "brand-icons"; -} - -i.icon.yandex.international::before { - content: "\f414"; - font-family: "brand-icons"; -} - -i.icon.yarn::before { - content: "\f7e3"; - font-family: "brand-icons"; -} - -i.icon.yelp::before { - content: "\f1e9"; - font-family: "brand-icons"; -} - -i.icon.yoast::before { - content: "\f2b1"; - font-family: "brand-icons"; -} - -i.icon.youtube::before { - content: "\f167"; - font-family: "brand-icons"; -} - -i.icon.youtube.square::before { - content: "\f431"; - font-family: "brand-icons"; -} - -i.icon.zhihu::before { - content: "\f63f"; - font-family: "brand-icons"; -} - -/* Aliases */ - -i.icon.american.express::before { - content: "\f1f3"; - font-family: "brand-icons"; -} - -i.icon.american.express.card::before { - content: "\f1f3"; - font-family: "brand-icons"; -} - -i.icon.amex::before { - content: "\f1f3"; - font-family: "brand-icons"; -} - -i.icon.bitbucket.square::before { - content: "\f171"; - font-family: "brand-icons"; -} - -i.icon.bluetooth.alternative::before { - content: "\f294"; - font-family: "brand-icons"; -} - -i.icon.credit.card.amazon.pay::before { - content: "\f42d"; - font-family: "brand-icons"; -} - -i.icon.credit.card.american.express::before { - content: "\f1f3"; - font-family: "brand-icons"; -} - -i.icon.credit.card.diners.club::before { - content: "\f24c"; - font-family: "brand-icons"; -} - -i.icon.credit.card.discover::before { - content: "\f1f2"; - font-family: "brand-icons"; -} - -i.icon.credit.card.jcb::before { - content: "\f24b"; - font-family: "brand-icons"; -} - -i.icon.credit.card.mastercard::before { - content: "\f1f1"; - font-family: "brand-icons"; -} - -i.icon.credit.card.paypal::before { - content: "\f1f4"; - font-family: "brand-icons"; -} - -i.icon.credit.card.stripe::before { - content: "\f1f5"; - font-family: "brand-icons"; -} - -i.icon.credit.card.visa::before { - content: "\f1f0"; - font-family: "brand-icons"; -} - -i.icon.diners.club::before { - content: "\f24c"; - font-family: "brand-icons"; -} - -i.icon.diners.club.card::before { - content: "\f24c"; - font-family: "brand-icons"; -} - -i.icon.discover::before { - content: "\f1f2"; - font-family: "brand-icons"; -} - -i.icon.discover.card::before { - content: "\f1f2"; - font-family: "brand-icons"; -} - -i.icon.disk.outline::before { - content: "\f369"; - font-family: "brand-icons"; -} - -i.icon.dribble::before { - content: "\f17d"; - font-family: "brand-icons"; -} - -i.icon.eercast::before { - content: "\f2da"; - font-family: "brand-icons"; -} - -i.icon.envira.gallery::before { - content: "\f299"; - font-family: "brand-icons"; -} - -i.icon.fa::before { - content: "\f2b4"; - font-family: "brand-icons"; -} - -i.icon.facebook.official::before { - content: "\f082"; - font-family: "brand-icons"; -} - -i.icon.five.hundred.pixels::before { - content: "\f26e"; - font-family: "brand-icons"; -} - -i.icon.gittip::before { - content: "\f184"; - font-family: "brand-icons"; -} - -i.icon.google.plus.circle::before { - content: "\f2b3"; - font-family: "brand-icons"; -} - -i.icon.google.plus.official::before { - content: "\f2b3"; - font-family: "brand-icons"; -} - -i.icon.japan.credit.bureau::before { - content: "\f24b"; - font-family: "brand-icons"; -} - -i.icon.japan.credit.bureau.card::before { - content: "\f24b"; - font-family: "brand-icons"; -} - -i.icon.jcb::before { - content: "\f24b"; - font-family: "brand-icons"; -} - -i.icon.linkedin.square::before { - content: "\f08c"; - font-family: "brand-icons"; -} - -i.icon.mastercard::before { - content: "\f1f1"; - font-family: "brand-icons"; -} - -i.icon.mastercard.card::before { - content: "\f1f1"; - font-family: "brand-icons"; -} - -i.icon.microsoft.edge::before { - content: "\f282"; - font-family: "brand-icons"; -} - -i.icon.ms.edge::before { - content: "\f282"; - font-family: "brand-icons"; -} - -i.icon.new.pied.piper::before { - content: "\f2ae"; - font-family: "brand-icons"; -} - -i.icon.optinmonster::before { - content: "\f23c"; - font-family: "brand-icons"; -} - -i.icon.paypal.card::before { - content: "\f1f4"; - font-family: "brand-icons"; -} - -i.icon.pied.piper.hat::before { - content: "\f2ae"; - font-family: "brand-icons"; -} - -i.icon.pocket::before { - content: "\f265"; - font-family: "brand-icons"; -} - -i.icon.stripe.card::before { - content: "\f1f5"; - font-family: "brand-icons"; -} - -i.icon.theme.isle::before { - content: "\f2b2"; - font-family: "brand-icons"; -} - -i.icon.visa::before { - content: "\f1f0"; - font-family: "brand-icons"; -} - -i.icon.visa.card::before { - content: "\f1f0"; - font-family: "brand-icons"; -} - -i.icon.wechat::before { - content: "\f1d7"; - font-family: "brand-icons"; -} - -i.icon.wikipedia::before { - content: "\f266"; - font-family: "brand-icons"; -} - -i.icon.wordpress.beginner::before { - content: "\f297"; - font-family: "brand-icons"; -} - -i.icon.wordpress.forms::before { - content: "\f298"; - font-family: "brand-icons"; -} - -i.icon.yc::before { - content: "\f23b"; - font-family: "brand-icons"; -} - -i.icon.ycombinator::before { - content: "\f23b"; - font-family: "brand-icons"; -} - -i.icon.youtube.play::before { - content: "\f167"; - font-family: "brand-icons"; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Image - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Image -*******************************/ - -.ui.image { - position: relative; - display: inline-block; - vertical-align: middle; - max-width: 100%; - background-color: transparent; -} - -img.ui.image { - display: block; -} - -.ui.image svg, -.ui.image img { - display: block; - max-width: 100%; - height: auto; -} - -/******************************* - States -*******************************/ - -.ui.hidden.images, -.ui.ui.hidden.image { - display: none; -} - -.ui.hidden.transition.images, -.ui.hidden.transition.image { - display: block; - visibility: hidden; -} - -.ui.images > .hidden.transition { - display: inline-block; - visibility: hidden; -} - -.ui.disabled.images, -.ui.disabled.image { - cursor: default; - opacity: 0.45; -} - -/******************************* - Variations -*******************************/ - -/* -------------- - Inline - --------------- */ - -.ui.inline.image, -.ui.inline.image svg, -.ui.inline.image img { - display: inline-block; -} - -/* ------------------ - Vertical Aligned - ------------------- */ - -.ui.top.aligned.image, -.ui.top.aligned.image svg, -.ui.top.aligned.image img { - display: inline-block; - vertical-align: top; -} - -.ui.middle.aligned.image, -.ui.middle.aligned.image svg, -.ui.middle.aligned.image img { - display: inline-block; - vertical-align: middle; -} - -.ui.bottom.aligned.image, -.ui.bottom.aligned.image svg, -.ui.bottom.aligned.image img { - display: inline-block; - vertical-align: bottom; -} - -.ui.top.aligned.images .image, -.ui.images .ui.top.aligned.image { - align-self: flex-start; -} - -.ui.middle.aligned.images .image, -.ui.images .ui.middle.aligned.image { - align-self: center; -} - -.ui.bottom.aligned.images .image, -.ui.images .ui.bottom.aligned.image { - align-self: flex-end; -} - -/* -------------- - Rounded - --------------- */ - -.ui.rounded.images .image, -.ui.rounded.image, -.ui.rounded.images .image > *, -.ui.rounded.image > * { - border-radius: 0.3125em; -} - -/* -------------- - Bordered - --------------- */ - -.ui.bordered.images .image, -.ui.bordered.images img, -.ui.bordered.images svg, -.ui.bordered.image img, -.ui.bordered.image svg, -img.ui.bordered.image { - border: 1px solid rgba(0, 0, 0, 0.1); -} - -/* -------------- - Circular - --------------- */ - -.ui.circular.images, -.ui.circular.image { - overflow: hidden; -} - -.ui.circular.images .image, -.ui.circular.image, -.ui.circular.images .image > *, -.ui.circular.image > * { - border-radius: 500rem; -} - -/* -------------- - Fluid - --------------- */ - -.ui.fluid.images, -.ui.fluid.image, -.ui.fluid.images img, -.ui.fluid.images svg, -.ui.fluid.image svg, -.ui.fluid.image img { - display: block; - width: 100%; - height: auto; -} - -/* -------------- - Avatar - --------------- */ - -.ui.avatar.images .image, -.ui.avatar.images img, -.ui.avatar.images svg, -.ui.avatar.image img, -.ui.avatar.image svg, -.ui.avatar.image { - margin-right: 0.25em; - display: inline-block; - width: 2em; - height: 2em; - border-radius: 500rem; -} - -/* ------------------- - Spaced - -------------------- */ - -.ui.spaced.image { - display: inline-block !important; - margin-left: 0.5em; - margin-right: 0.5em; -} - -.ui[class*="left spaced"].image { - margin-left: 0.5em; - margin-right: 0; -} - -.ui[class*="right spaced"].image { - margin-left: 0; - margin-right: 0.5em; -} - -/* ------------------- - 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-right: 0; - margin-bottom: 1em; - margin-left: 1em; -} - -.ui.floated.images:last-child, -.ui.floated.image:last-child { - margin-bottom: 0; -} - -.ui.centered.image { - display: block; - margin-left: auto; - margin-right: auto; -} - -.ui.centered.images { - display: flex; - flex-flow: row wrap; - align-items: stretch; - justify-content: center; -} - -/* -------------- - Sizes ---------------- */ - -.ui.medium.images .image, -.ui.medium.images img, -.ui.medium.images svg, -.ui.medium.image { - width: 300px; - height: auto; - font-size: 1rem; -} - -.ui.mini.images .image, -.ui.mini.images img, -.ui.mini.images svg, -.ui.mini.image { - width: 35px; - height: auto; - font-size: 0.78571429rem; -} - -.ui.tiny.images .image, -.ui.tiny.images img, -.ui.tiny.images svg, -.ui.tiny.image { - width: 80px; - height: auto; - font-size: 0.85714286rem; -} - -.ui.small.images .image, -.ui.small.images img, -.ui.small.images svg, -.ui.small.image { - width: 150px; - height: auto; - font-size: 0.92857143rem; -} - -.ui.large.images .image, -.ui.large.images img, -.ui.large.images svg, -.ui.large.image { - width: 450px; - height: auto; - font-size: 1.14285714rem; -} - -.ui.big.images .image, -.ui.big.images img, -.ui.big.images svg, -.ui.big.image { - width: 600px; - height: auto; - font-size: 1.28571429rem; -} - -.ui.huge.images .image, -.ui.huge.images img, -.ui.huge.images svg, -.ui.huge.image { - width: 800px; - height: auto; - font-size: 1.42857143rem; -} - -.ui.massive.images .image, -.ui.massive.images img, -.ui.massive.images svg, -.ui.massive.image { - width: 960px; - height: auto; - font-size: 1.71428571rem; -} - -/******************************* - Groups - *******************************/ - -.ui.images { - font-size: 0; - margin: 0 -0.25rem; -} - -.ui.images .image, -.ui.images > img, -.ui.images > svg { - display: inline-block; - margin: 0 0.25rem 0.5rem; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Input - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Standard -*******************************/ - -/* -------------------- - Inputs ---------------------- */ - -.ui.input { - position: relative; - font-weight: normal; - font-style: normal; - display: inline-flex; - color: rgba(0, 0, 0, 0.87); -} - -.ui.input > input { - margin: 0; - max-width: 100%; - flex: 1 0 auto; - outline: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - text-align: left; - line-height: 1.21428571em; - font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - background: #fff; - border: 1px solid rgba(34, 36, 38, 0.15); - color: rgba(0, 0, 0, 0.87); - border-radius: 0.28571429rem; - transition: box-shadow 0.1s ease, border-color 0.1s ease; - box-shadow: none; -} - -.ui.input > input:not([type="color"]) { - padding: 0.67857143em 1em; -} - -.ui.input > input::-webkit-calendar-picker-indicator { - padding: 0; - opacity: 0.5; - -webkit-transition: opacity 0.3s ease; - transition: opacity 0.3s ease; - cursor: pointer; -} - -/* -------------------- - Placeholder ---------------------- */ - -/* browsers require these rules separate */ - -.ui.input > input:-ms-input-placeholder { - color: rgba(191, 191, 191, 0.87); -} - -.ui.input > input::-ms-input-placeholder { - color: rgba(191, 191, 191, 0.87); -} - -.ui.input > input::placeholder { - color: rgba(191, 191, 191, 0.87); -} - -.ui.input > input::-moz-placeholder { - opacity: 1; -} - -.ui.input > input:-ms-input-placeholder { - color: rgba(191, 191, 191, 0.87); -} - -/******************************* - States -*******************************/ - -/* -------------------- - Disabled - --------------------- */ - -.ui.disabled.input, -.ui.input:not(.disabled) input[disabled] { - opacity: 0.45; -} - -.ui.disabled.input > input, -.ui.input:not(.disabled) input[disabled] { - pointer-events: none; -} - -/* -------------------- - Active ---------------------- */ - -.ui.input > input:active, -.ui.input.down input { - border-color: rgba(0, 0, 0, 0.3); - background: #fafafa; - color: rgba(0, 0, 0, 0.87); - box-shadow: none; -} - -/* -------------------- - Loading - --------------------- */ - -.ui.ui.loading.input > i.icon::before { - position: absolute; - content: ""; - top: 50%; - left: 50%; - margin: -0.64285714em 0 0 -0.64285714em; - width: 1.28571429em; - height: 1.28571429em; - border-radius: 500rem; - border: 0.2em solid rgba(0, 0, 0, 0.1); -} - -.ui.ui.loading.input > i.icon::after { - position: absolute; - content: ""; - top: 50%; - left: 50%; - margin: -0.64285714em 0 0 -0.64285714em; - width: 1.28571429em; - height: 1.28571429em; - animation: loader 0.6s infinite linear; - border: 0.2em solid #767676; - border-radius: 500rem; - box-shadow: 0 0 0 1px transparent; -} - -/* -------------------- - Focus ---------------------- */ - -.ui.input.focus > input, -.ui.input > input:focus { - border-color: #85b7d9; - background: #fff; - color: rgba(0, 0, 0, 0.8); - box-shadow: none; -} - -.ui.input.focus > input:-ms-input-placeholder, -.ui.input > input:focus:-ms-input-placeholder { - color: rgba(115, 115, 115, 0.87); -} - -.ui.input.focus > input::-ms-input-placeholder, -.ui.input > input:focus::-ms-input-placeholder { - color: rgba(115, 115, 115, 0.87); -} - -.ui.input.focus > input::placeholder, -.ui.input > input:focus::placeholder { - color: rgba(115, 115, 115, 0.87); -} - -.ui.input.focus > input:-ms-input-placeholder, -.ui.input > input:focus:-ms-input-placeholder { - color: rgba(115, 115, 115, 0.87); -} - -/* -------------------- - States - --------------------- */ - -.ui.input.error > input { - background-color: #fff6f6; - border-color: #e0b4b4; - color: #9f3a38; - box-shadow: none; -} - -/* Placeholder */ - -.ui.input.error > input:-ms-input-placeholder { - color: #e7bdbc; -} - -.ui.input.error > input::-ms-input-placeholder { - color: #e7bdbc; -} - -.ui.input.error > input::placeholder { - color: #e7bdbc; -} - -.ui.input.error > input:-ms-input-placeholder { - color: #e7bdbc !important; -} - -/* Focused Placeholder */ - -.ui.input.error > input:focus:-ms-input-placeholder { - color: #da9796; -} - -.ui.input.error > input:focus::-ms-input-placeholder { - color: #da9796; -} - -.ui.input.error > input:focus::placeholder { - color: #da9796; -} - -.ui.input.error > input:focus:-ms-input-placeholder { - color: #da9796 !important; -} - -.ui.input.info > input { - background-color: #f8ffff; - border-color: #a9d5de; - color: #276f86; - box-shadow: none; -} - -/* Placeholder */ - -.ui.input.info > input:-ms-input-placeholder { - color: #98cfe1; -} - -.ui.input.info > input::-ms-input-placeholder { - color: #98cfe1; -} - -.ui.input.info > input::placeholder { - color: #98cfe1; -} - -.ui.input.info > input:-ms-input-placeholder { - color: #98cfe1 !important; -} - -/* Focused Placeholder */ - -.ui.input.info > input:focus:-ms-input-placeholder { - color: #70bdd6; -} - -.ui.input.info > input:focus::-ms-input-placeholder { - color: #70bdd6; -} - -.ui.input.info > input:focus::placeholder { - color: #70bdd6; -} - -.ui.input.info > input:focus:-ms-input-placeholder { - color: #70bdd6 !important; -} - -.ui.input.success > input { - background-color: #fcfff5; - border-color: #a3c293; - color: #2c662d; - box-shadow: none; -} - -/* Placeholder */ - -.ui.input.success > input:-ms-input-placeholder { - color: #8fcf90; -} - -.ui.input.success > input::-ms-input-placeholder { - color: #8fcf90; -} - -.ui.input.success > input::placeholder { - color: #8fcf90; -} - -.ui.input.success > input:-ms-input-placeholder { - color: #8fcf90 !important; -} - -/* Focused Placeholder */ - -.ui.input.success > input:focus:-ms-input-placeholder { - color: #6cbf6d; -} - -.ui.input.success > input:focus::-ms-input-placeholder { - color: #6cbf6d; -} - -.ui.input.success > input:focus::placeholder { - color: #6cbf6d; -} - -.ui.input.success > input:focus:-ms-input-placeholder { - color: #6cbf6d !important; -} - -.ui.input.warning > input { - background-color: #fffaf3; - border-color: #c9ba9b; - color: #573a08; - box-shadow: none; -} - -/* Placeholder */ - -.ui.input.warning > input:-ms-input-placeholder { - color: #edad3e; -} - -.ui.input.warning > input::-ms-input-placeholder { - color: #edad3e; -} - -.ui.input.warning > input::placeholder { - color: #edad3e; -} - -.ui.input.warning > input:-ms-input-placeholder { - color: #edad3e !important; -} - -/* Focused Placeholder */ - -.ui.input.warning > input:focus:-ms-input-placeholder { - color: #e39715; -} - -.ui.input.warning > input:focus::-ms-input-placeholder { - color: #e39715; -} - -.ui.input.warning > input:focus::placeholder { - color: #e39715; -} - -.ui.input.warning > input:focus:-ms-input-placeholder { - color: #e39715 !important; -} - -/******************************* - Variations -*******************************/ - -/* -------------------- - Transparent - --------------------- */ - -.ui.transparent.input > textarea, -.ui.transparent.input > input { - border-color: transparent !important; - background-color: transparent !important; - padding: 0; - box-shadow: none !important; - border-radius: 0 !important; -} - -.field .ui.transparent.input > textarea { - padding: 0.67857143em 1em; -} - -/* Transparent Icon */ - -:not(.field) > .ui.transparent.icon.input > i.icon { - width: 1.1em; -} - -:not(.field) > .ui.ui.ui.transparent.icon.input > input { - padding-left: 0; - padding-right: 2em; -} - -:not(.field) > .ui.ui.ui.transparent[class*="left icon"].input > input { - padding-left: 2em; - padding-right: 0; -} - -/* Transparent Inverted */ - -.ui.transparent.inverted.input { - color: #fff; -} - -.ui.ui.transparent.inverted.input > textarea, -.ui.ui.transparent.inverted.input > input { - color: inherit; -} - -.ui.transparent.inverted.input > input:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.5); -} - -.ui.transparent.inverted.input > input::-ms-input-placeholder { - color: rgba(255, 255, 255, 0.5); -} - -.ui.transparent.inverted.input > input::placeholder { - color: rgba(255, 255, 255, 0.5); -} - -.ui.transparent.inverted.input > input:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.5); -} - -/* -------------------- - Icon - --------------------- */ - -.ui.icon.input > i.icon { - cursor: default; - position: absolute; - line-height: 1; - text-align: center; - top: 0; - right: 0; - margin: 0; - height: 100%; - width: 2.67142857em; - opacity: 0.5; - border-radius: 0 0.28571429rem 0.28571429rem 0; - transition: opacity 0.3s ease; -} - -.ui.icon.input > i.icon:not(.link) { - pointer-events: none; -} - -.ui.ui.ui.ui.icon.input:not(.corner) > textarea, -.ui.ui.ui.ui.icon.input:not(.corner) > input { - padding-right: 2.67142857em; -} - -.ui.icon.input > i.icon::before, -.ui.icon.input > i.icon::after { - left: 0; - position: absolute; - text-align: center; - top: 50%; - width: 100%; - margin-top: -0.5em; -} - -.ui.icon.input > i.link.icon { - cursor: pointer; -} - -.ui.icon.input > i.circular.icon { - top: 0.35em; - right: 0.5em; -} - -/* Left Icon Input */ - -.ui[class*="left icon"].input > i.icon { - right: auto; - left: 1px; - border-radius: 0.28571429rem 0 0 0.28571429rem; -} - -.ui[class*="left icon"].input > i.circular.icon { - right: auto; - left: 0.5em; -} - -.ui.ui.ui.ui[class*="left icon"]:not([class*="left corner"]).input > textarea, -.ui.ui.ui.ui[class*="left icon"]:not([class*="left corner"]).input > input { - padding-left: 2.67142857em; -} - -.ui.ui.ui.ui[class*="left icon"]:not(.corner).input > textarea, -.ui.ui.ui.ui[class*="left icon"]:not(.corner).input > input { - padding-right: 1em; -} - -/* Focus */ - -.ui.input > input:focus::-webkit-calendar-picker-indicator, -.ui.icon.input > textarea:focus ~ i.icon, -.ui.icon.input > input:focus ~ i.icon { - opacity: 1; -} - -/* -------------------- - Labeled - --------------------- */ - -/* Adjacent Label */ - -.ui.labeled.input > .label { - flex: 0 0 auto; - margin: 0; - font-size: 1em; -} - -.ui.labeled.input > .label:not(.corner) { - padding-top: 0.78571429em; - padding-bottom: 0.78571429em; -} - -/* Regular Label on Left */ - -.ui.labeled.input:not([class*="corner labeled"]) .label:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left-color: transparent; -} - -.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus { - border-left-color: #85b7d9; -} - -/* Regular Label on Right */ - -.ui[class*="right labeled"].input > input { - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - border-right-color: transparent !important; -} - -.ui[class*="right labeled"].input > input + .label { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.ui[class*="right labeled"].input > input:focus { - border-right-color: #85b7d9 !important; -} - -/* Corner Label */ - -.ui.labeled.input .corner.label { - top: 1px; - right: 1px; - font-size: 0.64285714em; - border-radius: 0 0.28571429rem 0 0; -} - -/* Spacing with corner label */ - -.ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown, -.ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > textarea, -.ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > input { - padding-right: 2.5em; -} - -.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .ui.dropdown, -.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > textarea, -.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input { - padding-right: 3.25em; -} - -.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > i.icon { - margin-right: 1.25em; -} - -/* Left Labeled */ - -.ui[class*="left icon"].input > .ui.dropdown:first-child, -.ui[class*="left icon"].input > i.icon + .ui.dropdown, -.ui[class*="left corner labeled"].input > .ui.dropdown, -.ui[class*="left corner labeled"].input > textarea, -.ui[class*="left corner labeled"].input > input { - padding-left: 2.5em; -} - -.ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > .ui.dropdown, -.ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > textarea, -.ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > input { - padding-right: 3.25em; -} - -.ui.ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown, -.ui.ui[class*="left corner labeled"][class*="left icon"].input > textarea, -.ui.ui[class*="left corner labeled"][class*="left icon"].input > input { - padding-left: 4em; -} - -.ui[class*="left corner labeled"].icon.input > i.icon { - margin-left: 1.25em; -} - -.ui[class*="left corner labeled"].icon:not([class*="left icon"]).input > input { - padding-right: 2.5em; -} - -.ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > input { - padding-right: 5em; -} - -.ui[class*="left icon"].input > .ui.dropdown > .search, -.ui[class*="left corner labeled"].input > .ui.dropdown > .search { - padding-left: 2.5em; -} - -.ui[class*="left icon"].input > .ui.dropdown > .menu, -.ui[class*="left corner labeled"].input > .ui.dropdown > .menu { - padding-left: 1.25em; -} - -.ui[class*="left icon"].input > .ui.dropdown > .menu > .item, -.ui[class*="left corner labeled"].input > .ui.dropdown > .menu > .item { - padding-left: 2.5em; - margin-left: -1.25em; -} - -.ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown > .search { - padding-left: 4em; -} - -.ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown > .menu > .item { - padding-left: 4em; -} - -.ui.icon.input:not([class*="left icon"]) > .ui.dropdown > .search, -.ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown > .search { - padding-right: 5.75em; -} - -.ui.icon.input:not([class*="left icon"]) > .ui.dropdown > .remove.icon, -.ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown > .remove.icon, -.ui.icon.input:not([class*="left icon"]) > .ui.dropdown > .dropdown.icon, -.ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown > .dropdown.icon { - padding-right: 2.5em; -} - -@supports selector(:has(.f)) { - .ui.icon.input:not([class*="left icon"]) > .ui.dropdown > .dropdown.icon { - padding-right: initial; - } - - .ui.icon.input:not([class*="left icon"]):not(:has(.ui.dropdown ~ input)) > .ui.dropdown > .dropdown.icon { - padding-right: 2.5em; - } -} - -.ui.ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown > .search { - padding-right: 7.25em; -} - -.ui.ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown > .remove.icon, -.ui.ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown > .dropdown.icon { - padding-right: 4em; -} - -.ui.icon.input > .ui.visible.dropdown ~ i.icon, -.ui.icon.input > .ui.active.dropdown ~ i.icon, -.ui[class*="corner labeled"].input > .ui.visible.dropdown ~ .ui.corner.label, -.ui[class*="corner labeled"].input > .ui.active.dropdown ~ .ui.corner.label { - z-index: 10; -} - -.ui.icon.input > textarea ~ i.icon { - height: 3em; -} - -:not(.field) > .ui.transparent.icon.input > textarea ~ i.icon { - height: 1.3em; -} - -/* Corner Label Position */ - -.ui.input > .ui.corner.label { - top: 1px; - right: 1px; -} - -.ui.input > .ui.left.corner.label { - right: auto; - left: 1px; -} - -/* Labeled and action input states */ - -.ui.form .field.error > .ui.action.input > .ui.button, -.ui.form .field.error > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, -.ui.action.input.error > .ui.button, -.ui.labeled.input.error:not([class*="corner labeled"]) > .ui.label { - border-top: 1px solid #e0b4b4; - border-bottom: 1px solid #e0b4b4; -} - -.ui.form .field.error > .ui[class*="left action"].input > .ui.button, -.ui.form .field.error > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, -.ui[class*="left action"].input.error > .ui.button, -.ui.labeled.input.error:not(.right):not([class*="corner labeled"]) > .ui.label { - border-left: 1px solid #e0b4b4; -} - -.ui.form .field.error > .ui.action.input:not([class*="left action"]) > input + .ui.button, -.ui.form .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, -.ui.action.input.error:not([class*="left action"]) > input + .ui.button, -.ui.right.labeled.input.error:not([class*="corner labeled"]) > input + .ui.label { - border-right: 1px solid #e0b4b4; -} - -.ui.form .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, -.ui.right.labeled.input.error:not([class*="corner labeled"]) > .ui.label:first-child { - border-left: 1px solid #e0b4b4; -} - -.ui.form .field.info > .ui.action.input > .ui.button, -.ui.form .field.info > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, -.ui.action.input.info > .ui.button, -.ui.labeled.input.info:not([class*="corner labeled"]) > .ui.label { - border-top: 1px solid #a9d5de; - border-bottom: 1px solid #a9d5de; -} - -.ui.form .field.info > .ui[class*="left action"].input > .ui.button, -.ui.form .field.info > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, -.ui[class*="left action"].input.info > .ui.button, -.ui.labeled.input.info:not(.right):not([class*="corner labeled"]) > .ui.label { - border-left: 1px solid #a9d5de; -} - -.ui.form .field.info > .ui.action.input:not([class*="left action"]) > input + .ui.button, -.ui.form .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, -.ui.action.input.info:not([class*="left action"]) > input + .ui.button, -.ui.right.labeled.input.info:not([class*="corner labeled"]) > input + .ui.label { - border-right: 1px solid #a9d5de; -} - -.ui.form .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, -.ui.right.labeled.input.info:not([class*="corner labeled"]) > .ui.label:first-child { - border-left: 1px solid #a9d5de; -} - -.ui.form .field.success > .ui.action.input > .ui.button, -.ui.form .field.success > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, -.ui.action.input.success > .ui.button, -.ui.labeled.input.success:not([class*="corner labeled"]) > .ui.label { - border-top: 1px solid #a3c293; - border-bottom: 1px solid #a3c293; -} - -.ui.form .field.success > .ui[class*="left action"].input > .ui.button, -.ui.form .field.success > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, -.ui[class*="left action"].input.success > .ui.button, -.ui.labeled.input.success:not(.right):not([class*="corner labeled"]) > .ui.label { - border-left: 1px solid #a3c293; -} - -.ui.form .field.success > .ui.action.input:not([class*="left action"]) > input + .ui.button, -.ui.form .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, -.ui.action.input.success:not([class*="left action"]) > input + .ui.button, -.ui.right.labeled.input.success:not([class*="corner labeled"]) > input + .ui.label { - border-right: 1px solid #a3c293; -} - -.ui.form .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, -.ui.right.labeled.input.success:not([class*="corner labeled"]) > .ui.label:first-child { - border-left: 1px solid #a3c293; -} - -.ui.form .field.warning > .ui.action.input > .ui.button, -.ui.form .field.warning > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, -.ui.action.input.warning > .ui.button, -.ui.labeled.input.warning:not([class*="corner labeled"]) > .ui.label { - border-top: 1px solid #c9ba9b; - border-bottom: 1px solid #c9ba9b; -} - -.ui.form .field.warning > .ui[class*="left action"].input > .ui.button, -.ui.form .field.warning > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, -.ui[class*="left action"].input.warning > .ui.button, -.ui.labeled.input.warning:not(.right):not([class*="corner labeled"]) > .ui.label { - border-left: 1px solid #c9ba9b; -} - -.ui.form .field.warning > .ui.action.input:not([class*="left action"]) > input + .ui.button, -.ui.form .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, -.ui.action.input.warning:not([class*="left action"]) > input + .ui.button, -.ui.right.labeled.input.warning:not([class*="corner labeled"]) > input + .ui.label { - border-right: 1px solid #c9ba9b; -} - -.ui.form .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, -.ui.right.labeled.input.warning:not([class*="corner labeled"]) > .ui.label:first-child { - border-left: 1px solid #c9ba9b; -} - -/* -------------------- - Action - --------------------- */ - -.ui.action.input > .button, -.ui.action.input > .buttons { - display: flex; - align-items: center; - flex: 0 0 auto; -} - -.ui.action.input > .button, -.ui.action.input > .buttons > .button { - padding-top: 0.78571429em; - padding-bottom: 0.78571429em; - margin: 0; -} - -/* Input when ui Left */ - -.ui[class*="left action"].input > input { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left-color: transparent; -} - -/* Input when ui Right */ - -.ui.action.input:not([class*="left action"]) > input { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right-color: transparent; -} - -/* Button and Dropdown */ - -.ui.action.input > .dropdown:first-child, -.ui.action.input > .button:first-child, -.ui.action.input > .buttons:first-child > .button { - border-radius: 0.28571429rem 0 0 0.28571429rem; -} - -.ui.action.input > .dropdown:not(:first-child), -.ui.action.input > .button:not(:first-child), -.ui.action.input > .buttons:not(:first-child) > .button { - border-radius: 0; -} - -.ui.action.input > .dropdown:last-child, -.ui.action.input > .button:last-child, -.ui.action.input > .buttons:last-child > .button { - border-radius: 0 0.28571429rem 0.28571429rem 0; -} - -/* Input Focus */ - -.ui.action.input:not([class*="left action"]) > input:focus { - border-right-color: #85b7d9; -} - -.ui.ui[class*="left action"].input > input:focus { - border-left-color: #85b7d9; -} - -/* -------------------- - Inverted - --------------------- */ - -/* Standard */ - -.ui.inverted.input > input { - border: none; -} - -/* -------------------- - Fluid - --------------------- */ - -.ui.fluid.input { - display: flex; -} - -.ui.fluid.input > input { - width: 0 !important; -} - -/* -------------------- - File - --------------------- */ - -/* width hack for chrome/edge */ - -.ui.file.input { - width: 100%; -} - -.ui.file.input input[type="file"] { - width: 0; -} - -.ui.form .field > input[type="file"], -.ui.file.input:not(.action) input[type="file"] { - padding: 0; -} - -.ui.action.file.input input[type="file"]::-webkit-file-upload-button { - display: none; -} - -.ui.form .field input[type="file"]::-webkit-file-upload-button, -.ui.file.input input[type="file"]::-webkit-file-upload-button { - border: none; - cursor: pointer; - padding: 0.67857143em 1em; - margin-right: 1em; - background: #e0e1e2; - font-weight: bold; - color: rgba(0, 0, 0, 0.6); -} - -.ui.form .field input[type="file"]::-webkit-file-upload-button:hover, -.ui.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #cacbcd; - color: rgba(0, 0, 0, 0.6); -} - -.ui.action.file.input input[type="file"]::-ms-browse { - display: none; -} - -.ui.form .field input[type="file"]::-ms-browse, -.ui.file.input input[type="file"]::-ms-browse { - border: none; - cursor: pointer; - padding: 0.67857143em 1em; - margin: 0; - background: #e0e1e2; - font-weight: bold; - color: rgba(0, 0, 0, 0.6); -} - -.ui.form .field input[type="file"]::-ms-browse:hover, -.ui.file.input input[type="file"]::-ms-browse:hover { - background: #cacbcd; - color: rgba(0, 0, 0, 0.6); -} - -/* IE needs additional styling for input field :S */ - -@media all and (-ms-high-contrast: none) { - .ui.file.input > input[type="file"], - input[type="file"].ui.file.input { - padding: 0 !important; - } -} - -.ui.action.file.input input[type="file"]::-webkit-file-upload-button { - display: none; -} - -.ui.action.file.input input[type="file"]::file-selector-button { - display: none; -} - -.ui.form .field input[type="file"]::-webkit-file-upload-button, -.ui.file.input input[type="file"]::-webkit-file-upload-button { - border: none; - cursor: pointer; - padding: 0.67857143em 1em; - margin-right: 1em; - background: #e0e1e2; - font-weight: bold; - color: rgba(0, 0, 0, 0.6); -} - -.ui.form .field input[type="file"]::file-selector-button, -.ui.file.input input[type="file"]::file-selector-button { - border: none; - cursor: pointer; - padding: 0.67857143em 1em; - margin-right: 1em; - background: #e0e1e2; - font-weight: bold; - color: rgba(0, 0, 0, 0.6); -} - -.ui.form .field input[type="file"]::-webkit-file-upload-button:hover, -.ui.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #cacbcd; - color: rgba(0, 0, 0, 0.6); -} - -.ui.form .field input[type="file"]::file-selector-button:hover, -.ui.file.input input[type="file"]::file-selector-button:hover { - background: #cacbcd; - color: rgba(0, 0, 0, 0.6); -} - -input[type="file"].ui.invisible.file.input, -.ui.invisible.file.input input[type="file"] { - left: -99999px; - position: absolute; -} - -input[type="file"].ui.file.input:focus + label.ui.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.button:not(.basic):not(.tertiary) { - background: #cacbcd; - color: rgba(0, 0, 0, 0.8); -} - -input[type="file"].ui.file.input:focus + label.ui.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.button:not(.basic):not(.tertiary).inverted { - background: #fff; -} - -/* this is related to existing buttons, so the button color variable is used here! */ - -input[type="file"].ui.file.input:focus + label.ui.primary.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.primary.button:not(.basic):not(.tertiary) { - background-color: #1678c2; - color: #fff; -} - -input[type="file"].ui.file.input:focus + label.ui.primary.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.primary.button:not(.basic):not(.tertiary).inverted { - background-color: #21b8ff; -} - -input[type="file"].ui.file.input:focus + label.ui.secondary.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.secondary.button:not(.basic):not(.tertiary) { - background-color: #27292a; - color: #fff; -} - -input[type="file"].ui.file.input:focus + label.ui.secondary.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.secondary.button:not(.basic):not(.tertiary).inverted { - background-color: #6e6e6e; -} - -input[type="file"].ui.file.input:focus + label.ui.red.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.red.button:not(.basic):not(.tertiary) { - background-color: #d01919; - color: #fff; -} - -input[type="file"].ui.file.input:focus + label.ui.red.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.red.button:not(.basic):not(.tertiary).inverted { - background-color: #ff392b; -} - -input[type="file"].ui.file.input:focus + label.ui.orange.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.orange.button:not(.basic):not(.tertiary) { - background-color: #f26202; - color: #fff; -} - -input[type="file"].ui.file.input:focus + label.ui.orange.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.orange.button:not(.basic):not(.tertiary).inverted { - background-color: #e76b00; -} - -input[type="file"].ui.file.input:focus + label.ui.yellow.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.yellow.button:not(.basic):not(.tertiary) { - background-color: #eaae00; - color: #fff; -} - -input[type="file"].ui.file.input:focus + label.ui.yellow.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.yellow.button:not(.basic):not(.tertiary).inverted { - background-color: #ebcd00; -} - -input[type="file"].ui.file.input:focus + label.ui.olive.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.olive.button:not(.basic):not(.tertiary) { - background-color: #a7bd0d; - color: #fff; -} - -input[type="file"].ui.file.input:focus + label.ui.olive.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.olive.button:not(.basic):not(.tertiary).inverted { - background-color: #d2e745; -} - -input[type="file"].ui.file.input:focus + label.ui.green.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.green.button:not(.basic):not(.tertiary) { - background-color: #16ab39; - color: #fff; -} - -input[type="file"].ui.file.input:focus + label.ui.green.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.green.button:not(.basic):not(.tertiary).inverted { - background-color: #1ea92e; -} - -input[type="file"].ui.file.input:focus + label.ui.teal.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.teal.button:not(.basic):not(.tertiary) { - background-color: #009c95; - color: #fff; -} - -input[type="file"].ui.file.input:focus + label.ui.teal.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.teal.button:not(.basic):not(.tertiary).inverted { - background-color: #3affff; -} - -input[type="file"].ui.file.input:focus + label.ui.blue.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.blue.button:not(.basic):not(.tertiary) { - background-color: #1678c2; - color: #fff; -} - -input[type="file"].ui.file.input:focus + label.ui.blue.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.blue.button:not(.basic):not(.tertiary).inverted { - background-color: #21b8ff; -} - -input[type="file"].ui.file.input:focus + label.ui.violet.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.violet.button:not(.basic):not(.tertiary) { - background-color: #5829bb; - color: #fff; -} - -input[type="file"].ui.file.input:focus + label.ui.violet.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.violet.button:not(.basic):not(.tertiary).inverted { - background-color: #745aff; -} - -input[type="file"].ui.file.input:focus + label.ui.purple.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.purple.button:not(.basic):not(.tertiary) { - background-color: #9627ba; - color: #fff; -} - -input[type="file"].ui.file.input:focus + label.ui.purple.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.purple.button:not(.basic):not(.tertiary).inverted { - background-color: #cf40ff; -} - -input[type="file"].ui.file.input:focus + label.ui.pink.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.pink.button:not(.basic):not(.tertiary) { - background-color: #e61a8d; - color: #fff; -} - -input[type="file"].ui.file.input:focus + label.ui.pink.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.pink.button:not(.basic):not(.tertiary).inverted { - background-color: #ff5bd1; -} - -input[type="file"].ui.file.input:focus + label.ui.brown.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.brown.button:not(.basic):not(.tertiary) { - background-color: #975b33; - color: #fff; -} - -input[type="file"].ui.file.input:focus + label.ui.brown.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.brown.button:not(.basic):not(.tertiary).inverted { - background-color: #b0620f; -} - -input[type="file"].ui.file.input:focus + label.ui.grey.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.grey.button:not(.basic):not(.tertiary) { - background-color: #838383; - color: #fff; -} - -input[type="file"].ui.file.input:focus + label.ui.grey.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.grey.button:not(.basic):not(.tertiary).inverted { - background-color: #c2c4c5; -} - -input[type="file"].ui.file.input:focus + label.ui.black.button:not(.basic):not(.tertiary), -.ui.file.input input[type="file"]:focus + label.ui.black.button:not(.basic):not(.tertiary) { - background-color: #27292a; - color: #fff; -} - -input[type="file"].ui.file.input:focus + label.ui.black.button:not(.basic):not(.tertiary).inverted, -.ui.file.input input[type="file"]:focus + label.ui.black.button:not(.basic):not(.tertiary).inverted { - background-color: #000000; -} - -input[type="file"].ui.primary.file.input::-webkit-file-upload-button, -.ui.primary.file.input input[type="file"]::-webkit-file-upload-button { - background: #2185d0; - color: #fff; -} - -input[type="file"].ui.primary.file.input::-webkit-file-upload-button:hover, -.ui.primary.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #1678c2; -} - -input[type="file"].ui.primary.file.input::-ms-browse, -.ui.primary.file.input input[type="file"]::-ms-browse { - background: #2185d0; - color: #fff; -} - -input[type="file"].ui.primary.file.input::-ms-browse:hover, -.ui.primary.file.input input[type="file"]::-ms-browse:hover { - background: #1678c2; -} - -input[type="file"].ui.primary.file.input::-webkit-file-upload-button, -.ui.primary.file.input input[type="file"]::-webkit-file-upload-button { - background: #2185d0; - color: #fff; -} - -input[type="file"].ui.primary.file.input::file-selector-button, -.ui.primary.file.input input[type="file"]::file-selector-button { - background: #2185d0; - color: #fff; -} - -input[type="file"].ui.primary.file.input::-webkit-file-upload-button:hover, -.ui.primary.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #1678c2; -} - -input[type="file"].ui.primary.file.input::file-selector-button:hover, -.ui.primary.file.input input[type="file"]::file-selector-button:hover { - background: #1678c2; -} - -input[type="file"].ui.secondary.file.input::-webkit-file-upload-button, -.ui.secondary.file.input input[type="file"]::-webkit-file-upload-button { - background: #1b1c1d; - color: #fff; -} - -input[type="file"].ui.secondary.file.input::-webkit-file-upload-button:hover, -.ui.secondary.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #27292a; -} - -input[type="file"].ui.secondary.file.input::-ms-browse, -.ui.secondary.file.input input[type="file"]::-ms-browse { - background: #1b1c1d; - color: #fff; -} - -input[type="file"].ui.secondary.file.input::-ms-browse:hover, -.ui.secondary.file.input input[type="file"]::-ms-browse:hover { - background: #27292a; -} - -input[type="file"].ui.secondary.file.input::-webkit-file-upload-button, -.ui.secondary.file.input input[type="file"]::-webkit-file-upload-button { - background: #1b1c1d; - color: #fff; -} - -input[type="file"].ui.secondary.file.input::file-selector-button, -.ui.secondary.file.input input[type="file"]::file-selector-button { - background: #1b1c1d; - color: #fff; -} - -input[type="file"].ui.secondary.file.input::-webkit-file-upload-button:hover, -.ui.secondary.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #27292a; -} - -input[type="file"].ui.secondary.file.input::file-selector-button:hover, -.ui.secondary.file.input input[type="file"]::file-selector-button:hover { - background: #27292a; -} - -input[type="file"].ui.red.file.input::-webkit-file-upload-button, -.ui.red.file.input input[type="file"]::-webkit-file-upload-button { - background: #db2828; - color: #fff; -} - -input[type="file"].ui.red.file.input::-webkit-file-upload-button:hover, -.ui.red.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #d01919; -} - -input[type="file"].ui.red.file.input::-ms-browse, -.ui.red.file.input input[type="file"]::-ms-browse { - background: #db2828; - color: #fff; -} - -input[type="file"].ui.red.file.input::-ms-browse:hover, -.ui.red.file.input input[type="file"]::-ms-browse:hover { - background: #d01919; -} - -input[type="file"].ui.red.file.input::-webkit-file-upload-button, -.ui.red.file.input input[type="file"]::-webkit-file-upload-button { - background: #db2828; - color: #fff; -} - -input[type="file"].ui.red.file.input::file-selector-button, -.ui.red.file.input input[type="file"]::file-selector-button { - background: #db2828; - color: #fff; -} - -input[type="file"].ui.red.file.input::-webkit-file-upload-button:hover, -.ui.red.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #d01919; -} - -input[type="file"].ui.red.file.input::file-selector-button:hover, -.ui.red.file.input input[type="file"]::file-selector-button:hover { - background: #d01919; -} - -input[type="file"].ui.orange.file.input::-webkit-file-upload-button, -.ui.orange.file.input input[type="file"]::-webkit-file-upload-button { - background: #f2711c; - color: #fff; -} - -input[type="file"].ui.orange.file.input::-webkit-file-upload-button:hover, -.ui.orange.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #f26202; -} - -input[type="file"].ui.orange.file.input::-ms-browse, -.ui.orange.file.input input[type="file"]::-ms-browse { - background: #f2711c; - color: #fff; -} - -input[type="file"].ui.orange.file.input::-ms-browse:hover, -.ui.orange.file.input input[type="file"]::-ms-browse:hover { - background: #f26202; -} - -input[type="file"].ui.orange.file.input::-webkit-file-upload-button, -.ui.orange.file.input input[type="file"]::-webkit-file-upload-button { - background: #f2711c; - color: #fff; -} - -input[type="file"].ui.orange.file.input::file-selector-button, -.ui.orange.file.input input[type="file"]::file-selector-button { - background: #f2711c; - color: #fff; -} - -input[type="file"].ui.orange.file.input::-webkit-file-upload-button:hover, -.ui.orange.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #f26202; -} - -input[type="file"].ui.orange.file.input::file-selector-button:hover, -.ui.orange.file.input input[type="file"]::file-selector-button:hover { - background: #f26202; -} - -input[type="file"].ui.yellow.file.input::-webkit-file-upload-button, -.ui.yellow.file.input input[type="file"]::-webkit-file-upload-button { - background: #fbbd08; - color: #fff; -} - -input[type="file"].ui.yellow.file.input::-webkit-file-upload-button:hover, -.ui.yellow.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #eaae00; -} - -input[type="file"].ui.yellow.file.input::-ms-browse, -.ui.yellow.file.input input[type="file"]::-ms-browse { - background: #fbbd08; - color: #fff; -} - -input[type="file"].ui.yellow.file.input::-ms-browse:hover, -.ui.yellow.file.input input[type="file"]::-ms-browse:hover { - background: #eaae00; -} - -input[type="file"].ui.yellow.file.input::-webkit-file-upload-button, -.ui.yellow.file.input input[type="file"]::-webkit-file-upload-button { - background: #fbbd08; - color: #fff; -} - -input[type="file"].ui.yellow.file.input::file-selector-button, -.ui.yellow.file.input input[type="file"]::file-selector-button { - background: #fbbd08; - color: #fff; -} - -input[type="file"].ui.yellow.file.input::-webkit-file-upload-button:hover, -.ui.yellow.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #eaae00; -} - -input[type="file"].ui.yellow.file.input::file-selector-button:hover, -.ui.yellow.file.input input[type="file"]::file-selector-button:hover { - background: #eaae00; -} - -input[type="file"].ui.olive.file.input::-webkit-file-upload-button, -.ui.olive.file.input input[type="file"]::-webkit-file-upload-button { - background: #b5cc18; - color: #fff; -} - -input[type="file"].ui.olive.file.input::-webkit-file-upload-button:hover, -.ui.olive.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #a7bd0d; -} - -input[type="file"].ui.olive.file.input::-ms-browse, -.ui.olive.file.input input[type="file"]::-ms-browse { - background: #b5cc18; - color: #fff; -} - -input[type="file"].ui.olive.file.input::-ms-browse:hover, -.ui.olive.file.input input[type="file"]::-ms-browse:hover { - background: #a7bd0d; -} - -input[type="file"].ui.olive.file.input::-webkit-file-upload-button, -.ui.olive.file.input input[type="file"]::-webkit-file-upload-button { - background: #b5cc18; - color: #fff; -} - -input[type="file"].ui.olive.file.input::file-selector-button, -.ui.olive.file.input input[type="file"]::file-selector-button { - background: #b5cc18; - color: #fff; -} - -input[type="file"].ui.olive.file.input::-webkit-file-upload-button:hover, -.ui.olive.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #a7bd0d; -} - -input[type="file"].ui.olive.file.input::file-selector-button:hover, -.ui.olive.file.input input[type="file"]::file-selector-button:hover { - background: #a7bd0d; -} - -input[type="file"].ui.green.file.input::-webkit-file-upload-button, -.ui.green.file.input input[type="file"]::-webkit-file-upload-button { - background: #21ba45; - color: #fff; -} - -input[type="file"].ui.green.file.input::-webkit-file-upload-button:hover, -.ui.green.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #16ab39; -} - -input[type="file"].ui.green.file.input::-ms-browse, -.ui.green.file.input input[type="file"]::-ms-browse { - background: #21ba45; - color: #fff; -} - -input[type="file"].ui.green.file.input::-ms-browse:hover, -.ui.green.file.input input[type="file"]::-ms-browse:hover { - background: #16ab39; -} - -input[type="file"].ui.green.file.input::-webkit-file-upload-button, -.ui.green.file.input input[type="file"]::-webkit-file-upload-button { - background: #21ba45; - color: #fff; -} - -input[type="file"].ui.green.file.input::file-selector-button, -.ui.green.file.input input[type="file"]::file-selector-button { - background: #21ba45; - color: #fff; -} - -input[type="file"].ui.green.file.input::-webkit-file-upload-button:hover, -.ui.green.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #16ab39; -} - -input[type="file"].ui.green.file.input::file-selector-button:hover, -.ui.green.file.input input[type="file"]::file-selector-button:hover { - background: #16ab39; -} - -input[type="file"].ui.teal.file.input::-webkit-file-upload-button, -.ui.teal.file.input input[type="file"]::-webkit-file-upload-button { - background: #00b5ad; - color: #fff; -} - -input[type="file"].ui.teal.file.input::-webkit-file-upload-button:hover, -.ui.teal.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #009c95; -} - -input[type="file"].ui.teal.file.input::-ms-browse, -.ui.teal.file.input input[type="file"]::-ms-browse { - background: #00b5ad; - color: #fff; -} - -input[type="file"].ui.teal.file.input::-ms-browse:hover, -.ui.teal.file.input input[type="file"]::-ms-browse:hover { - background: #009c95; -} - -input[type="file"].ui.teal.file.input::-webkit-file-upload-button, -.ui.teal.file.input input[type="file"]::-webkit-file-upload-button { - background: #00b5ad; - color: #fff; -} - -input[type="file"].ui.teal.file.input::file-selector-button, -.ui.teal.file.input input[type="file"]::file-selector-button { - background: #00b5ad; - color: #fff; -} - -input[type="file"].ui.teal.file.input::-webkit-file-upload-button:hover, -.ui.teal.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #009c95; -} - -input[type="file"].ui.teal.file.input::file-selector-button:hover, -.ui.teal.file.input input[type="file"]::file-selector-button:hover { - background: #009c95; -} - -input[type="file"].ui.blue.file.input::-webkit-file-upload-button, -.ui.blue.file.input input[type="file"]::-webkit-file-upload-button { - background: #2185d0; - color: #fff; -} - -input[type="file"].ui.blue.file.input::-webkit-file-upload-button:hover, -.ui.blue.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #1678c2; -} - -input[type="file"].ui.blue.file.input::-ms-browse, -.ui.blue.file.input input[type="file"]::-ms-browse { - background: #2185d0; - color: #fff; -} - -input[type="file"].ui.blue.file.input::-ms-browse:hover, -.ui.blue.file.input input[type="file"]::-ms-browse:hover { - background: #1678c2; -} - -input[type="file"].ui.blue.file.input::-webkit-file-upload-button, -.ui.blue.file.input input[type="file"]::-webkit-file-upload-button { - background: #2185d0; - color: #fff; -} - -input[type="file"].ui.blue.file.input::file-selector-button, -.ui.blue.file.input input[type="file"]::file-selector-button { - background: #2185d0; - color: #fff; -} - -input[type="file"].ui.blue.file.input::-webkit-file-upload-button:hover, -.ui.blue.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #1678c2; -} - -input[type="file"].ui.blue.file.input::file-selector-button:hover, -.ui.blue.file.input input[type="file"]::file-selector-button:hover { - background: #1678c2; -} - -input[type="file"].ui.violet.file.input::-webkit-file-upload-button, -.ui.violet.file.input input[type="file"]::-webkit-file-upload-button { - background: #6435c9; - color: #fff; -} - -input[type="file"].ui.violet.file.input::-webkit-file-upload-button:hover, -.ui.violet.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #5829bb; -} - -input[type="file"].ui.violet.file.input::-ms-browse, -.ui.violet.file.input input[type="file"]::-ms-browse { - background: #6435c9; - color: #fff; -} - -input[type="file"].ui.violet.file.input::-ms-browse:hover, -.ui.violet.file.input input[type="file"]::-ms-browse:hover { - background: #5829bb; -} - -input[type="file"].ui.violet.file.input::-webkit-file-upload-button, -.ui.violet.file.input input[type="file"]::-webkit-file-upload-button { - background: #6435c9; - color: #fff; -} - -input[type="file"].ui.violet.file.input::file-selector-button, -.ui.violet.file.input input[type="file"]::file-selector-button { - background: #6435c9; - color: #fff; -} - -input[type="file"].ui.violet.file.input::-webkit-file-upload-button:hover, -.ui.violet.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #5829bb; -} - -input[type="file"].ui.violet.file.input::file-selector-button:hover, -.ui.violet.file.input input[type="file"]::file-selector-button:hover { - background: #5829bb; -} - -input[type="file"].ui.purple.file.input::-webkit-file-upload-button, -.ui.purple.file.input input[type="file"]::-webkit-file-upload-button { - background: #a333c8; - color: #fff; -} - -input[type="file"].ui.purple.file.input::-webkit-file-upload-button:hover, -.ui.purple.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #9627ba; -} - -input[type="file"].ui.purple.file.input::-ms-browse, -.ui.purple.file.input input[type="file"]::-ms-browse { - background: #a333c8; - color: #fff; -} - -input[type="file"].ui.purple.file.input::-ms-browse:hover, -.ui.purple.file.input input[type="file"]::-ms-browse:hover { - background: #9627ba; -} - -input[type="file"].ui.purple.file.input::-webkit-file-upload-button, -.ui.purple.file.input input[type="file"]::-webkit-file-upload-button { - background: #a333c8; - color: #fff; -} - -input[type="file"].ui.purple.file.input::file-selector-button, -.ui.purple.file.input input[type="file"]::file-selector-button { - background: #a333c8; - color: #fff; -} - -input[type="file"].ui.purple.file.input::-webkit-file-upload-button:hover, -.ui.purple.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #9627ba; -} - -input[type="file"].ui.purple.file.input::file-selector-button:hover, -.ui.purple.file.input input[type="file"]::file-selector-button:hover { - background: #9627ba; -} - -input[type="file"].ui.pink.file.input::-webkit-file-upload-button, -.ui.pink.file.input input[type="file"]::-webkit-file-upload-button { - background: #e03997; - color: #fff; -} - -input[type="file"].ui.pink.file.input::-webkit-file-upload-button:hover, -.ui.pink.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #e61a8d; -} - -input[type="file"].ui.pink.file.input::-ms-browse, -.ui.pink.file.input input[type="file"]::-ms-browse { - background: #e03997; - color: #fff; -} - -input[type="file"].ui.pink.file.input::-ms-browse:hover, -.ui.pink.file.input input[type="file"]::-ms-browse:hover { - background: #e61a8d; -} - -input[type="file"].ui.pink.file.input::-webkit-file-upload-button, -.ui.pink.file.input input[type="file"]::-webkit-file-upload-button { - background: #e03997; - color: #fff; -} - -input[type="file"].ui.pink.file.input::file-selector-button, -.ui.pink.file.input input[type="file"]::file-selector-button { - background: #e03997; - color: #fff; -} - -input[type="file"].ui.pink.file.input::-webkit-file-upload-button:hover, -.ui.pink.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #e61a8d; -} - -input[type="file"].ui.pink.file.input::file-selector-button:hover, -.ui.pink.file.input input[type="file"]::file-selector-button:hover { - background: #e61a8d; -} - -input[type="file"].ui.brown.file.input::-webkit-file-upload-button, -.ui.brown.file.input input[type="file"]::-webkit-file-upload-button { - background: #a5673f; - color: #fff; -} - -input[type="file"].ui.brown.file.input::-webkit-file-upload-button:hover, -.ui.brown.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #975b33; -} - -input[type="file"].ui.brown.file.input::-ms-browse, -.ui.brown.file.input input[type="file"]::-ms-browse { - background: #a5673f; - color: #fff; -} - -input[type="file"].ui.brown.file.input::-ms-browse:hover, -.ui.brown.file.input input[type="file"]::-ms-browse:hover { - background: #975b33; -} - -input[type="file"].ui.brown.file.input::-webkit-file-upload-button, -.ui.brown.file.input input[type="file"]::-webkit-file-upload-button { - background: #a5673f; - color: #fff; -} - -input[type="file"].ui.brown.file.input::file-selector-button, -.ui.brown.file.input input[type="file"]::file-selector-button { - background: #a5673f; - color: #fff; -} - -input[type="file"].ui.brown.file.input::-webkit-file-upload-button:hover, -.ui.brown.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #975b33; -} - -input[type="file"].ui.brown.file.input::file-selector-button:hover, -.ui.brown.file.input input[type="file"]::file-selector-button:hover { - background: #975b33; -} - -input[type="file"].ui.grey.file.input::-webkit-file-upload-button, -.ui.grey.file.input input[type="file"]::-webkit-file-upload-button { - background: #767676; - color: #fff; -} - -input[type="file"].ui.grey.file.input::-webkit-file-upload-button:hover, -.ui.grey.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #838383; -} - -input[type="file"].ui.grey.file.input::-ms-browse, -.ui.grey.file.input input[type="file"]::-ms-browse { - background: #767676; - color: #fff; -} - -input[type="file"].ui.grey.file.input::-ms-browse:hover, -.ui.grey.file.input input[type="file"]::-ms-browse:hover { - background: #838383; -} - -input[type="file"].ui.grey.file.input::-webkit-file-upload-button, -.ui.grey.file.input input[type="file"]::-webkit-file-upload-button { - background: #767676; - color: #fff; -} - -input[type="file"].ui.grey.file.input::file-selector-button, -.ui.grey.file.input input[type="file"]::file-selector-button { - background: #767676; - color: #fff; -} - -input[type="file"].ui.grey.file.input::-webkit-file-upload-button:hover, -.ui.grey.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #838383; -} - -input[type="file"].ui.grey.file.input::file-selector-button:hover, -.ui.grey.file.input input[type="file"]::file-selector-button:hover { - background: #838383; -} - -input[type="file"].ui.black.file.input::-webkit-file-upload-button, -.ui.black.file.input input[type="file"]::-webkit-file-upload-button { - background: #1b1c1d; - color: #fff; -} - -input[type="file"].ui.black.file.input::-webkit-file-upload-button:hover, -.ui.black.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #27292a; -} - -input[type="file"].ui.black.file.input::-ms-browse, -.ui.black.file.input input[type="file"]::-ms-browse { - background: #1b1c1d; - color: #fff; -} - -input[type="file"].ui.black.file.input::-ms-browse:hover, -.ui.black.file.input input[type="file"]::-ms-browse:hover { - background: #27292a; -} - -input[type="file"].ui.black.file.input::-webkit-file-upload-button, -.ui.black.file.input input[type="file"]::-webkit-file-upload-button { - background: #1b1c1d; - color: #fff; -} - -input[type="file"].ui.black.file.input::file-selector-button, -.ui.black.file.input input[type="file"]::file-selector-button { - background: #1b1c1d; - color: #fff; -} - -input[type="file"].ui.black.file.input::-webkit-file-upload-button:hover, -.ui.black.file.input input[type="file"]::-webkit-file-upload-button:hover { - background: #27292a; -} - -input[type="file"].ui.black.file.input::file-selector-button:hover, -.ui.black.file.input input[type="file"]::file-selector-button:hover { - background: #27292a; -} - -/* -------------------- - Size ---------------------- */ - -.ui.input { - font-size: 1em; -} - -.ui.mini.input { - font-size: 0.78571429em; -} - -.ui.tiny.input { - font-size: 0.85714286em; -} - -.ui.small.input { - font-size: 0.92857143em; -} - -.ui.large.input { - font-size: 1.14285714em; -} - -.ui.big.input { - font-size: 1.28571429em; -} - -.ui.huge.input { - font-size: 1.42857143em; -} - -.ui.massive.input { - font-size: 1.71428571em; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Label - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Label -*******************************/ - -.ui.label { - display: inline-block; - line-height: 1; - vertical-align: baseline; - margin: 0 0.14285714em; - background-color: #e8e8e8; - background-image: none; - padding: 0.5833em 0.833em; - color: rgba(0, 0, 0, 0.6); - text-transform: none; - font-weight: bold; - border: 0 solid transparent; - border-radius: 0.28571429rem; - transition: background 0.1s ease; -} - -.ui.label:first-child { - margin-left: 0; -} - -.ui.label:last-child { - margin-right: 0; -} - -/* Link */ - -a.ui.label { - cursor: pointer; -} - -/* Inside Link */ - -.ui.label > a { - cursor: pointer; - color: inherit; - opacity: 0.5; - transition: 0.1s opacity ease; -} - -.ui.label > a:hover { - opacity: 1; -} - -/* Image */ - -.ui.label > img { - width: auto !important; - vertical-align: middle; - height: 2.1666em; -} - -/* Icon */ - -.ui.ui[class*="left icon"].label > .icon, -.ui.label > .icon { - width: auto; - margin: 0 0.75em 0 0; -} - -/* Detail */ - -.ui.label > .detail { - display: inline-block; - vertical-align: top; - font-weight: bold; - margin-left: 1em; - opacity: 0.8; -} - -.ui.label > .detail .icon { - margin: 0 0.25em 0 0; -} - -/* Removable label */ - -.ui.label > .close.icon, -.ui.label > .delete.icon { - cursor: pointer; - font-size: 0.92857143em; - opacity: 0.5; - transition: background 0.1s ease; -} - -.ui.label > .close.icon:hover, -.ui.label > .delete.icon:hover { - opacity: 1; -} - -/* Backward compatible positioning */ - -.ui.label[class*="left icon"] > .close.icon, -.ui.label[class*="left icon"] > .delete.icon { - margin: 0 0.5em 0 0; -} - -.ui.label[class*="left icon"] > .close.icon.right, -.ui.label[class*="left icon"] > .delete.icon.right { - margin: 0 0 0 0.5em; -} - -.ui.label:not(.icon) > .close.icon, -.ui.label:not(.icon) > .delete.icon { - margin: 0 0 0 0.5em; -} - -/* Label for only an icon */ - -.ui.icon.label > .icon { - margin: 0 auto; -} - -/* Right Side Icon */ - -.ui[class*="right icon"].label > .icon { - margin: 0 0 0 0.75em; -} - -/* ------------------- - Group --------------------- */ - -.ui.labels > .label { - margin: 0 0.5em 0.5em 0; -} - -/* ------------------- - Coupling --------------------- */ - -.ui.header > .ui.label { - margin-top: -0.29165em; -} - -/* Remove border radius on attached segment */ - -.ui.attached.segment > .ui.top.left.attached.label, -.ui.bottom.attached.segment > .ui.top.left.attached.label { - border-top-left-radius: 0; -} - -.ui.attached.segment > .ui.top.right.attached.label, -.ui.bottom.attached.segment > .ui.top.right.attached.label { - border-top-right-radius: 0; -} - -.ui.top.attached.segment > .ui.bottom.left.attached.label { - border-bottom-left-radius: 0; -} - -.ui.top.attached.segment > .ui.bottom.right.attached.label { - border-bottom-right-radius: 0; -} - -/* Padding on next content after a label */ - -.ui.top.attached.label ~ .ui.bottom.attached.label + :not(.attached), -.ui.top.attached.label + :not(.attached) { - margin-top: 2rem !important; -} - -.ui.bottom.attached.label ~ :last-child:not(.attached) { - margin-top: 0; - margin-bottom: 2rem !important; -} - -.ui.segment:not(.basic) > .ui.top.attached.label { - margin-top: -1px; -} - -.ui.segment:not(.basic) > .ui.bottom.attached.label { - margin-bottom: -1px; -} - -.ui.segment:not(.basic) > .ui.attached.label:not(.right) { - margin-left: -1px; -} - -.ui.segment:not(.basic) > .ui.right.attached.label { - margin-right: -1px; -} - -.ui.segment:not(.basic) > .ui.attached.label:not(.left):not(.right) { - width: calc(100% + 2px); -} - -/******************************* - Types -*******************************/ - -.ui.image.label { - width: auto; - margin-top: 0; - margin-bottom: 0; - max-width: 9999px; - vertical-align: baseline; - text-transform: none; - background: #e8e8e8; - padding: 0.5833em 0.833em 0.5833em 0.5em; - border-radius: 0.28571429rem; - box-shadow: none; -} - -.ui.image.label.attached:not(.basic) { - padding: 0.5833em 0.833em 0.5833em 0.5em; -} - -.ui.image.label img { - display: inline-block; - vertical-align: top; - height: 2.1666em; - margin: -0.5833em 0.5em -0.5833em -0.5em; - border-radius: 0.28571429rem 0 0 0.28571429rem; -} - -.ui.image.label .detail { - background: rgba(0, 0, 0, 0.1); - margin: -0.5833em -0.833em -0.5833em 0.5em; - padding: 0.5833em 0.833em; - border-radius: 0 0.28571429rem 0.28571429rem 0; -} - -.ui.bottom.attached.image.label:not(.right) > img, -.ui.top.right.attached.image.label > img { - border-top-left-radius: 0; -} - -.ui.top.attached.image.label:not(.right) > img, -.ui.bottom.right.attached.image.label > img { - border-bottom-left-radius: 0; -} - -/* ------------------- - Tag - -------------------- */ - -.ui.tag.labels .label, -.ui.tag.label { - margin-left: 1em; - position: relative; - padding-left: 1.5em; - padding-right: 1.5em; - border-radius: 0 0.28571429rem 0.28571429rem 0; - transition: none; -} - -.ui.tag.labels .label::before, -.ui.tag.label::before { - position: absolute; - transform: translateY(-50%) translateX(50%) rotate(-45deg); - top: 50%; - right: 100%; - content: ""; - background-color: inherit; - background-image: none; - width: 1.56em; - height: 1.56em; - transition: none; -} - -.ui.tag.labels .label::after, -.ui.tag.label::after { - position: absolute; - content: ""; - top: 50%; - left: -0.25em; - margin-top: -0.25em; - background-color: #fff; - width: 0.5em; - height: 0.5em; - box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); - border-radius: 500rem; -} - -.ui.basic.tag.labels .label::before, -.ui.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - right: calc(100% + 1px); -} - -.ui.basic.tag.labels .label::after, -.ui.basic.tag.label::after { - box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.8); -} - -/* ------------------- - Corner Label - -------------------- */ - -.ui.corner.label { - position: absolute; - top: 0; - right: 0; - margin: 0; - padding: 0; - text-align: center; - border-color: #e8e8e8; - width: 4em; - height: 4em; - z-index: 1; - transition: border-color 0.1s ease; -} - -/* Icon Label */ - -.ui.corner.label { - background-color: transparent !important; -} - -.ui.corner.label::after { - position: absolute; - content: ""; - right: 0; - top: 0; - z-index: -1; - width: 0; - height: 0; - background-color: transparent; - border-top: 0 solid transparent; - border-right: 4em solid transparent; - border-bottom: 4em solid transparent; - border-left: 0 solid transparent; - border-right-color: inherit; - transition: border-color 0.1s ease; -} - -.ui.corner.label .icon { - cursor: inherit; - position: absolute; - top: 0.64285714em; - left: auto; - right: 0.57142857em; - font-size: 1.14285714em; - margin: 0; -} - -/* Left Corner */ - -.ui.left.corner.label, -.ui.left.corner.label::after { - right: auto; - left: 0; -} - -.ui.left.corner.label::after { - border-top: 4em solid transparent; - border-right: 4em solid transparent; - border-bottom: 0 solid transparent; - border-left: 0 solid transparent; - border-top-color: inherit; -} - -.ui.left.corner.label .icon { - left: 0.57142857em; - right: auto; -} - -/* Segment */ - -.ui.segment > .ui.corner.label { - top: -1px; - right: -1px; -} - -.ui.segment > .ui.left.corner.label { - right: auto; - left: -1px; -} - -/* ------------------- - Ribbon - -------------------- */ - -.ui.ribbon.label { - position: relative; - margin: 0; - min-width: max-content; - border-radius: 0 0.28571429rem 0.28571429rem 0; - border-color: rgba(0, 0, 0, 0.15); -} - -.ui.ribbon.label::after { - position: absolute; - content: ""; - top: 100%; - left: 0; - background-color: transparent; - border-style: solid; - border-width: 0 1.2em 1.2em 0; - border-color: transparent; - border-right-color: inherit; - width: 0; - height: 0; -} - -/* Positioning */ - -.ui.ribbon.label { - left: calc(-1rem - 1.2em); - margin-right: -1.2em; - padding-left: calc(1rem + 1.2em); - padding-right: 1.2em; -} - -.ui[class*="right ribbon"].label { - left: calc(100% + 1rem + 1.2em); - padding-left: 1.2em; - padding-right: calc(1rem + 1.2em); -} - -.ui.basic.ribbon.label { - padding-top: calc(0.5833em - 1px); - padding-bottom: calc(0.5833em - 1px); -} - -.ui.basic.ribbon.label:not([class*="right ribbon"]) { - padding-left: calc(1rem + 1.2em - 1px); - padding-right: calc(1.2em - 1px); -} - -.ui.basic[class*="right ribbon"].label { - padding-left: calc(1.2em - 1px); - padding-right: calc(1rem + 1.2em - 1px); -} - -.ui.basic.ribbon.label::after { - top: calc(100% + 1px); -} - -.ui.basic.ribbon.label:not([class*="right ribbon"])::after { - left: -1px; -} - -.ui.basic[class*="right ribbon"].label::after { - right: -1px; -} - -/* Right Ribbon */ - -.ui[class*="right ribbon"].label { - text-align: left; - transform: translateX(-100%); - border-radius: 0.28571429rem 0 0 0.28571429rem; -} - -.ui[class*="right ribbon"].label::after { - left: auto; - right: 0; - border-style: solid; - border-width: 1.2em 1.2em 0 0; - border-color: transparent; - border-top-color: inherit; -} - -.ui.ui.center.ribbon.label { - top: calc(50% - 1em); - z-index: 1; -} - -.ui.bottom.ribbon.label::after { - bottom: 100%; - top: auto; - border-width: 1.2em 1.2em 0 0; -} - -.ui.bottom[class*="right ribbon"].label::after { - border-width: 1.2em 0 0 1.2em; - border-color: transparent; - border-left-color: inherit; -} - -/* Inside Image */ - -.ui.image > .ribbon.label, -.ui.card .image > .ribbon.label { - position: absolute; - top: 1rem; -} - -.ui.card .image > .ui.ribbon.label, -.ui.image > .ui.ribbon.label { - left: calc(0.05rem - 1.2em); -} - -.ui.card .image > .ui[class*="right ribbon"].label, -.ui.image > .ui[class*="right ribbon"].label { - left: calc(100% + -0.05rem + 1.2em); - padding-left: 0.833em; -} - -.ui.card .image > .ui.bottom.ribbon.label, -.ui.image > .ui.bottom.ribbon.label { - bottom: 1rem; - top: auto; -} - -/* Inside Table */ - -.ui.table td > .ui.ribbon.label { - left: calc(-1em - 1.2em); -} - -.ui.table td > .ui[class*="right ribbon"].label { - left: calc(100% + 1em + 1.2em); - padding-left: 0.833em; -} - -/* ------------------- - Attached - -------------------- */ - -.ui[class*="top attached"].label, -.ui.attached.label { - width: 100%; - position: absolute; - margin: 0; - top: 0; - left: 0; - padding: 0.75em 1em; - border-radius: 0.21428571rem 0.21428571rem 0 0; -} - -.ui[class*="bottom attached"].label { - top: auto; - bottom: 0; - border-radius: 0 0 0.21428571rem 0.21428571rem; -} - -.ui[class*="top left attached"].label { - width: auto; - margin-top: 0; - border-radius: 0.21428571rem 0 0.28571429rem 0; -} - -.ui[class*="top right attached"].label { - width: auto; - left: auto; - right: 0; - border-radius: 0 0.21428571rem 0 0.28571429rem; -} - -.ui[class*="bottom left attached"].label { - width: auto; - top: auto; - bottom: 0; - border-radius: 0 0.28571429rem 0 0.21428571rem; -} - -.ui[class*="bottom right attached"].label { - top: auto; - bottom: 0; - left: auto; - right: 0; - width: auto; - border-radius: 0.28571429rem 0 0.21428571rem 0; -} - -/******************************* - States -*******************************/ - -/* ------------------- - Disabled --------------------- */ - -.ui.disabled.labels .label, -.ui.label.disabled { - opacity: 0.45; - pointer-events: none; -} - -/* ------------------- - Hover --------------------- */ - -.ui.labels a.label:hover, -a.ui.label:hover { - background-color: #e0e0e0; - border-color: #e0e0e0; - background-image: none; - color: rgba(0, 0, 0, 0.8); -} - -.ui.labels a.label:hover::before, -a.ui.label:hover::before { - color: rgba(0, 0, 0, 0.8); -} - -/* ------------------- - Active --------------------- */ - -.ui.active.label { - background-color: #d0d0d0; - border-color: #d0d0d0; - background-image: none; - color: rgba(0, 0, 0, 0.95); -} - -.ui.active.label::before { - background-color: #d0d0d0; - background-image: none; - color: rgba(0, 0, 0, 0.95); -} - -/* ------------------- - Active Hover --------------------- */ - -.ui.labels a.active.label:hover, -a.ui.active.label:hover { - background-color: #c8c8c8; - border-color: #c8c8c8; - background-image: none; - color: rgba(0, 0, 0, 0.95); -} - -.ui.labels a.active.label:hover::before, -a.ui.active.label:hover::before { - background-color: #c8c8c8; - background-image: none; - color: rgba(0, 0, 0, 0.95); -} - -/* ------------------- - Visible --------------------- */ - -.ui.labels.visible .label, -.ui.label.visible:not(.dropdown) { - display: inline-block !important; -} - -/* ------------------- - Hidden --------------------- */ - -.ui.labels.hidden .label, -.ui.label.hidden { - display: none !important; -} - -/******************************* - Variations -*******************************/ - -/* ------------------- - Basic - -------------------- */ - -.ui.basic.labels .label, -.ui.basic.label { - background: none #fff; - border: 1px solid rgba(34, 36, 38, 0.15); - color: rgba(0, 0, 0, 0.87); - box-shadow: none; - padding-top: calc(0.5833em - 1px); - padding-bottom: calc(0.5833em - 1px); - padding-right: calc(0.833em - 1px); -} - -.ui.basic.labels:not(.tag):not(.image):not(.ribbon) .label, -.ui.basic.label:not(.tag):not(.image):not(.ribbon) { - padding-left: calc(0.833em - 1px); -} - -.ui.basic.image.label { - padding-left: calc(0.5em - 1px); -} - -/* Link */ - -.ui.basic.labels a.label:hover, -a.ui.basic.label:hover { - text-decoration: none; - background: none #fff; - color: #1e70bf; - box-shadow: none; -} - -/* Pointing */ - -.ui.basic.pointing.label::before { - border-color: inherit; -} - -/* ------------------- - Fluid - -------------------- */ - -.ui.label.fluid, -.ui.fluid.labels > .label { - width: 100%; - box-sizing: border-box; -} - -.ui.centered.labels .label, -.ui.centered.label { - text-align: center; -} - -/* ------------------- - Inverted - -------------------- */ - -.ui.inverted.labels .label, -.ui.inverted.label { - color: rgba(255, 255, 255, 0.9); - background-color: #b5b5b5; -} - -.ui.inverted.corner.label { - border-color: #b5b5b5; -} - -.ui.inverted.corner.label:hover { - border-color: #e8e8e8; - transition: none; -} - -.ui.inverted.basic.labels .label, -.ui.inverted.basic.label, -.ui.inverted.basic.label:hover { - border-color: rgba(255, 255, 255, 0.5); - background: #1b1c1d; -} - -.ui.inverted.basic.label:hover { - color: #4183c4; -} - -/* ------------------- - Colors --------------------- */ - -.ui.primary.labels .label, -.ui.ui.ui.primary.label { - background-color: #2185d0; - border-color: #2185d0; - color: rgba(255, 255, 255, 0.9); -} - -/* Link */ - -.ui.primary.labels a.label:hover, -a.ui.ui.ui.primary.label:hover { - background-color: #1678c2; - border-color: #1678c2; - color: #fff; -} - -/* Ribbon */ - -.ui.ui.ui.primary.ribbon.label { - border-color: #1a69a4; -} - -/* Basic */ - -.ui.basic.labels .primary.label, -.ui.ui.ui.basic.primary.label { - background: none #fff; - border-color: #2185d0; - color: #2185d0; -} - -.ui.basic.labels a.primary.label:hover, -a.ui.ui.ui.basic.primary.label:hover { - background: none #fff; - border-color: #1678c2; - color: #1678c2; -} - -/* Inverted */ - -.ui.inverted.labels .primary.label, -.ui.ui.ui.inverted.primary.label { - background-color: #54c8ff; - border-color: #54c8ff; - color: #1b1c1d; -} - -/* Inverted Link */ - -.ui.inverted.labels a.primary.label:hover, -a.ui.ui.ui.inverted.primary.label:hover { - background-color: #21b8ff; - border-color: #21b8ff; - color: #1b1c1d; -} - -/* Inverted Ribbon */ - -.ui.ui.ui.inverted.primary.ribbon.label { - border-color: #21b8ff; -} - -/* Inverted Basic */ - -.ui.inverted.basic.labels .primary.label, -.ui.ui.ui.inverted.basic.primary.label { - background-color: #1b1c1d; - border-color: #54c8ff; - color: #54c8ff; -} - -.ui.inverted.basic.labels a.primary.label:hover, -a.ui.ui.ui.inverted.basic.primary.label:hover { - border-color: #21b8ff; - background-color: #1b1c1d; - color: #21b8ff; -} - -/* Inverted Basic Tags */ - -.ui.inverted.basic.tag.labels .primary.label, -.ui.ui.ui.inverted.primary.basic.tag.label { - border: 1px solid #54c8ff; -} - -.ui.inverted.basic.tag.labels .primary.label::before, -.ui.ui.ui.inverted.primary.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - background-color: #1b1c1d; - right: calc(100% + 1px); -} - -.ui.secondary.labels .label, -.ui.ui.ui.secondary.label { - background-color: #1b1c1d; - border-color: #1b1c1d; - color: rgba(255, 255, 255, 0.9); -} - -/* Link */ - -.ui.secondary.labels a.label:hover, -a.ui.ui.ui.secondary.label:hover { - background-color: #27292a; - border-color: #27292a; - color: #fff; -} - -/* Ribbon */ - -.ui.ui.ui.secondary.ribbon.label { - border-color: #020203; -} - -/* Basic */ - -.ui.basic.labels .secondary.label, -.ui.ui.ui.basic.secondary.label { - background: none #fff; - border-color: #1b1c1d; - color: #1b1c1d; -} - -.ui.basic.labels a.secondary.label:hover, -a.ui.ui.ui.basic.secondary.label:hover { - background: none #fff; - border-color: #27292a; - color: #27292a; -} - -/* Inverted */ - -.ui.inverted.labels .secondary.label, -.ui.ui.ui.inverted.secondary.label { - background-color: #545454; - border-color: #545454; - color: #1b1c1d; -} - -/* Inverted Link */ - -.ui.inverted.labels a.secondary.label:hover, -a.ui.ui.ui.inverted.secondary.label:hover { - background-color: #6e6e6e; - border-color: #6e6e6e; - color: #1b1c1d; -} - -/* Inverted Ribbon */ - -.ui.ui.ui.inverted.secondary.ribbon.label { - border-color: #3b3b3b; -} - -/* Inverted Basic */ - -.ui.inverted.basic.labels .secondary.label, -.ui.ui.ui.inverted.basic.secondary.label { - background-color: #1b1c1d; - border-color: #545454; - color: #545454; -} - -.ui.inverted.basic.labels a.secondary.label:hover, -a.ui.ui.ui.inverted.basic.secondary.label:hover { - border-color: #6e6e6e; - background-color: #1b1c1d; - color: #6e6e6e; -} - -/* Inverted Basic Tags */ - -.ui.inverted.basic.tag.labels .secondary.label, -.ui.ui.ui.inverted.secondary.basic.tag.label { - border: 1px solid #545454; -} - -.ui.inverted.basic.tag.labels .secondary.label::before, -.ui.ui.ui.inverted.secondary.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - background-color: #1b1c1d; - right: calc(100% + 1px); -} - -.ui.red.labels .label, -.ui.ui.ui.red.label { - background-color: #db2828; - border-color: #db2828; - color: #fff; -} - -/* Link */ - -.ui.red.labels a.label:hover, -a.ui.ui.ui.red.label:hover { - background-color: #d01919; - border-color: #d01919; - color: #fff; -} - -/* Ribbon */ - -.ui.ui.ui.red.ribbon.label { - border-color: #b21e1e; -} - -/* Basic */ - -.ui.basic.labels .red.label, -.ui.ui.ui.basic.red.label { - background: none #fff; - border-color: #db2828; - color: #db2828; -} - -.ui.basic.labels a.red.label:hover, -a.ui.ui.ui.basic.red.label:hover { - background: none #fff; - border-color: #d01919; - color: #d01919; -} - -/* Inverted */ - -.ui.inverted.labels .red.label, -.ui.ui.ui.inverted.red.label { - background-color: #ff695e; - border-color: #ff695e; - color: #1b1c1d; -} - -/* Inverted Link */ - -.ui.inverted.labels a.red.label:hover, -a.ui.ui.ui.inverted.red.label:hover { - background-color: #ff392b; - border-color: #ff392b; - color: #1b1c1d; -} - -/* Inverted Ribbon */ - -.ui.ui.ui.inverted.red.ribbon.label { - border-color: #ff392b; -} - -/* Inverted Basic */ - -.ui.inverted.basic.labels .red.label, -.ui.ui.ui.inverted.basic.red.label { - background-color: #1b1c1d; - border-color: #ff695e; - color: #ff695e; -} - -.ui.inverted.basic.labels a.red.label:hover, -a.ui.ui.ui.inverted.basic.red.label:hover { - border-color: #ff392b; - background-color: #1b1c1d; - color: #ff392b; -} - -/* Inverted Basic Tags */ - -.ui.inverted.basic.tag.labels .red.label, -.ui.ui.ui.inverted.red.basic.tag.label { - border: 1px solid #ff695e; -} - -.ui.inverted.basic.tag.labels .red.label::before, -.ui.ui.ui.inverted.red.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - background-color: #1b1c1d; - right: calc(100% + 1px); -} - -.ui.orange.labels .label, -.ui.ui.ui.orange.label { - background-color: #f2711c; - border-color: #f2711c; - color: #fff; -} - -/* Link */ - -.ui.orange.labels a.label:hover, -a.ui.ui.ui.orange.label:hover { - background-color: #f26202; - border-color: #f26202; - color: #fff; -} - -/* Ribbon */ - -.ui.ui.ui.orange.ribbon.label { - border-color: #cf590c; -} - -/* Basic */ - -.ui.basic.labels .orange.label, -.ui.ui.ui.basic.orange.label { - background: none #fff; - border-color: #f2711c; - color: #f2711c; -} - -.ui.basic.labels a.orange.label:hover, -a.ui.ui.ui.basic.orange.label:hover { - background: none #fff; - border-color: #f26202; - color: #f26202; -} - -/* Inverted */ - -.ui.inverted.labels .orange.label, -.ui.ui.ui.inverted.orange.label { - background-color: #ff851b; - border-color: #ff851b; - color: #1b1c1d; -} - -/* Inverted Link */ - -.ui.inverted.labels a.orange.label:hover, -a.ui.ui.ui.inverted.orange.label:hover { - background-color: #e76b00; - border-color: #e76b00; - color: #1b1c1d; -} - -/* Inverted Ribbon */ - -.ui.ui.ui.inverted.orange.ribbon.label { - border-color: #e76b00; -} - -/* Inverted Basic */ - -.ui.inverted.basic.labels .orange.label, -.ui.ui.ui.inverted.basic.orange.label { - background-color: #1b1c1d; - border-color: #ff851b; - color: #ff851b; -} - -.ui.inverted.basic.labels a.orange.label:hover, -a.ui.ui.ui.inverted.basic.orange.label:hover { - border-color: #e76b00; - background-color: #1b1c1d; - color: #e76b00; -} - -/* Inverted Basic Tags */ - -.ui.inverted.basic.tag.labels .orange.label, -.ui.ui.ui.inverted.orange.basic.tag.label { - border: 1px solid #ff851b; -} - -.ui.inverted.basic.tag.labels .orange.label::before, -.ui.ui.ui.inverted.orange.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - background-color: #1b1c1d; - right: calc(100% + 1px); -} - -.ui.yellow.labels .label, -.ui.ui.ui.yellow.label { - background-color: #fbbd08; - border-color: #fbbd08; - color: #fff; -} - -/* Link */ - -.ui.yellow.labels a.label:hover, -a.ui.ui.ui.yellow.label:hover { - background-color: #eaae00; - border-color: #eaae00; - color: #fff; -} - -/* Ribbon */ - -.ui.ui.ui.yellow.ribbon.label { - border-color: #cd9903; -} - -/* Basic */ - -.ui.basic.labels .yellow.label, -.ui.ui.ui.basic.yellow.label { - background: none #fff; - border-color: #fbbd08; - color: #fbbd08; -} - -.ui.basic.labels a.yellow.label:hover, -a.ui.ui.ui.basic.yellow.label:hover { - background: none #fff; - border-color: #eaae00; - color: #eaae00; -} - -/* Inverted */ - -.ui.inverted.labels .yellow.label, -.ui.ui.ui.inverted.yellow.label { - background-color: #ffe21f; - border-color: #ffe21f; - color: #1b1c1d; -} - -/* Inverted Link */ - -.ui.inverted.labels a.yellow.label:hover, -a.ui.ui.ui.inverted.yellow.label:hover { - background-color: #ebcd00; - border-color: #ebcd00; - color: #1b1c1d; -} - -/* Inverted Ribbon */ - -.ui.ui.ui.inverted.yellow.ribbon.label { - border-color: #ebcd00; -} - -/* Inverted Basic */ - -.ui.inverted.basic.labels .yellow.label, -.ui.ui.ui.inverted.basic.yellow.label { - background-color: #1b1c1d; - border-color: #ffe21f; - color: #ffe21f; -} - -.ui.inverted.basic.labels a.yellow.label:hover, -a.ui.ui.ui.inverted.basic.yellow.label:hover { - border-color: #ebcd00; - background-color: #1b1c1d; - color: #ebcd00; -} - -/* Inverted Basic Tags */ - -.ui.inverted.basic.tag.labels .yellow.label, -.ui.ui.ui.inverted.yellow.basic.tag.label { - border: 1px solid #ffe21f; -} - -.ui.inverted.basic.tag.labels .yellow.label::before, -.ui.ui.ui.inverted.yellow.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - background-color: #1b1c1d; - right: calc(100% + 1px); -} - -.ui.olive.labels .label, -.ui.ui.ui.olive.label { - background-color: #b5cc18; - border-color: #b5cc18; - color: #fff; -} - -/* Link */ - -.ui.olive.labels a.label:hover, -a.ui.ui.ui.olive.label:hover { - background-color: #a7bd0d; - border-color: #a7bd0d; - color: #fff; -} - -/* Ribbon */ - -.ui.ui.ui.olive.ribbon.label { - border-color: #8d9e13; -} - -/* Basic */ - -.ui.basic.labels .olive.label, -.ui.ui.ui.basic.olive.label { - background: none #fff; - border-color: #b5cc18; - color: #b5cc18; -} - -.ui.basic.labels a.olive.label:hover, -a.ui.ui.ui.basic.olive.label:hover { - background: none #fff; - border-color: #a7bd0d; - color: #a7bd0d; -} - -/* Inverted */ - -.ui.inverted.labels .olive.label, -.ui.ui.ui.inverted.olive.label { - background-color: #d9e778; - border-color: #d9e778; - color: #1b1c1d; -} - -/* Inverted Link */ - -.ui.inverted.labels a.olive.label:hover, -a.ui.ui.ui.inverted.olive.label:hover { - background-color: #d2e745; - border-color: #d2e745; - color: #1b1c1d; -} - -/* Inverted Ribbon */ - -.ui.ui.ui.inverted.olive.ribbon.label { - border-color: #cddf4d; -} - -/* Inverted Basic */ - -.ui.inverted.basic.labels .olive.label, -.ui.ui.ui.inverted.basic.olive.label { - background-color: #1b1c1d; - border-color: #d9e778; - color: #d9e778; -} - -.ui.inverted.basic.labels a.olive.label:hover, -a.ui.ui.ui.inverted.basic.olive.label:hover { - border-color: #d2e745; - background-color: #1b1c1d; - color: #d2e745; -} - -/* Inverted Basic Tags */ - -.ui.inverted.basic.tag.labels .olive.label, -.ui.ui.ui.inverted.olive.basic.tag.label { - border: 1px solid #d9e778; -} - -.ui.inverted.basic.tag.labels .olive.label::before, -.ui.ui.ui.inverted.olive.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - background-color: #1b1c1d; - right: calc(100% + 1px); -} - -.ui.green.labels .label, -.ui.ui.ui.green.label { - background-color: #21ba45; - border-color: #21ba45; - color: #fff; -} - -/* Link */ - -.ui.green.labels a.label:hover, -a.ui.ui.ui.green.label:hover { - background-color: #16ab39; - border-color: #16ab39; - color: #fff; -} - -/* Ribbon */ - -.ui.ui.ui.green.ribbon.label { - border-color: #198f35; -} - -/* Basic */ - -.ui.basic.labels .green.label, -.ui.ui.ui.basic.green.label { - background: none #fff; - border-color: #21ba45; - color: #21ba45; -} - -.ui.basic.labels a.green.label:hover, -a.ui.ui.ui.basic.green.label:hover { - background: none #fff; - border-color: #16ab39; - color: #16ab39; -} - -/* Inverted */ - -.ui.inverted.labels .green.label, -.ui.ui.ui.inverted.green.label { - background-color: #2ecc40; - border-color: #2ecc40; - color: #1b1c1d; -} - -/* Inverted Link */ - -.ui.inverted.labels a.green.label:hover, -a.ui.ui.ui.inverted.green.label:hover { - background-color: #1ea92e; - border-color: #1ea92e; - color: #1b1c1d; -} - -/* Inverted Ribbon */ - -.ui.ui.ui.inverted.green.ribbon.label { - border-color: #25a233; -} - -/* Inverted Basic */ - -.ui.inverted.basic.labels .green.label, -.ui.ui.ui.inverted.basic.green.label { - background-color: #1b1c1d; - border-color: #2ecc40; - color: #2ecc40; -} - -.ui.inverted.basic.labels a.green.label:hover, -a.ui.ui.ui.inverted.basic.green.label:hover { - border-color: #1ea92e; - background-color: #1b1c1d; - color: #1ea92e; -} - -/* Inverted Basic Tags */ - -.ui.inverted.basic.tag.labels .green.label, -.ui.ui.ui.inverted.green.basic.tag.label { - border: 1px solid #2ecc40; -} - -.ui.inverted.basic.tag.labels .green.label::before, -.ui.ui.ui.inverted.green.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - background-color: #1b1c1d; - right: calc(100% + 1px); -} - -.ui.teal.labels .label, -.ui.ui.ui.teal.label { - background-color: #00b5ad; - border-color: #00b5ad; - color: #fff; -} - -/* Link */ - -.ui.teal.labels a.label:hover, -a.ui.ui.ui.teal.label:hover { - background-color: #009c95; - border-color: #009c95; - color: #fff; -} - -/* Ribbon */ - -.ui.ui.ui.teal.ribbon.label { - border-color: #00827c; -} - -/* Basic */ - -.ui.basic.labels .teal.label, -.ui.ui.ui.basic.teal.label { - background: none #fff; - border-color: #00b5ad; - color: #00b5ad; -} - -.ui.basic.labels a.teal.label:hover, -a.ui.ui.ui.basic.teal.label:hover { - background: none #fff; - border-color: #009c95; - color: #009c95; -} - -/* Inverted */ - -.ui.inverted.labels .teal.label, -.ui.ui.ui.inverted.teal.label { - background-color: #6dffff; - border-color: #6dffff; - color: #1b1c1d; -} - -/* Inverted Link */ - -.ui.inverted.labels a.teal.label:hover, -a.ui.ui.ui.inverted.teal.label:hover { - background-color: #3affff; - border-color: #3affff; - color: #1b1c1d; -} - -/* Inverted Ribbon */ - -.ui.ui.ui.inverted.teal.ribbon.label { - border-color: #3affff; -} - -/* Inverted Basic */ - -.ui.inverted.basic.labels .teal.label, -.ui.ui.ui.inverted.basic.teal.label { - background-color: #1b1c1d; - border-color: #6dffff; - color: #6dffff; -} - -.ui.inverted.basic.labels a.teal.label:hover, -a.ui.ui.ui.inverted.basic.teal.label:hover { - border-color: #3affff; - background-color: #1b1c1d; - color: #3affff; -} - -/* Inverted Basic Tags */ - -.ui.inverted.basic.tag.labels .teal.label, -.ui.ui.ui.inverted.teal.basic.tag.label { - border: 1px solid #6dffff; -} - -.ui.inverted.basic.tag.labels .teal.label::before, -.ui.ui.ui.inverted.teal.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - background-color: #1b1c1d; - right: calc(100% + 1px); -} - -.ui.blue.labels .label, -.ui.ui.ui.blue.label { - background-color: #2185d0; - border-color: #2185d0; - color: #fff; -} - -/* Link */ - -.ui.blue.labels a.label:hover, -a.ui.ui.ui.blue.label:hover { - background-color: #1678c2; - border-color: #1678c2; - color: #fff; -} - -/* Ribbon */ - -.ui.ui.ui.blue.ribbon.label { - border-color: #1a69a4; -} - -/* Basic */ - -.ui.basic.labels .blue.label, -.ui.ui.ui.basic.blue.label { - background: none #fff; - border-color: #2185d0; - color: #2185d0; -} - -.ui.basic.labels a.blue.label:hover, -a.ui.ui.ui.basic.blue.label:hover { - background: none #fff; - border-color: #1678c2; - color: #1678c2; -} - -/* Inverted */ - -.ui.inverted.labels .blue.label, -.ui.ui.ui.inverted.blue.label { - background-color: #54c8ff; - border-color: #54c8ff; - color: #1b1c1d; -} - -/* Inverted Link */ - -.ui.inverted.labels a.blue.label:hover, -a.ui.ui.ui.inverted.blue.label:hover { - background-color: #21b8ff; - border-color: #21b8ff; - color: #1b1c1d; -} - -/* Inverted Ribbon */ - -.ui.ui.ui.inverted.blue.ribbon.label { - border-color: #21b8ff; -} - -/* Inverted Basic */ - -.ui.inverted.basic.labels .blue.label, -.ui.ui.ui.inverted.basic.blue.label { - background-color: #1b1c1d; - border-color: #54c8ff; - color: #54c8ff; -} - -.ui.inverted.basic.labels a.blue.label:hover, -a.ui.ui.ui.inverted.basic.blue.label:hover { - border-color: #21b8ff; - background-color: #1b1c1d; - color: #21b8ff; -} - -/* Inverted Basic Tags */ - -.ui.inverted.basic.tag.labels .blue.label, -.ui.ui.ui.inverted.blue.basic.tag.label { - border: 1px solid #54c8ff; -} - -.ui.inverted.basic.tag.labels .blue.label::before, -.ui.ui.ui.inverted.blue.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - background-color: #1b1c1d; - right: calc(100% + 1px); -} - -.ui.violet.labels .label, -.ui.ui.ui.violet.label { - background-color: #6435c9; - border-color: #6435c9; - color: #fff; -} - -/* Link */ - -.ui.violet.labels a.label:hover, -a.ui.ui.ui.violet.label:hover { - background-color: #5829bb; - border-color: #5829bb; - color: #fff; -} - -/* Ribbon */ - -.ui.ui.ui.violet.ribbon.label { - border-color: #502aa1; -} - -/* Basic */ - -.ui.basic.labels .violet.label, -.ui.ui.ui.basic.violet.label { - background: none #fff; - border-color: #6435c9; - color: #6435c9; -} - -.ui.basic.labels a.violet.label:hover, -a.ui.ui.ui.basic.violet.label:hover { - background: none #fff; - border-color: #5829bb; - color: #5829bb; -} - -/* Inverted */ - -.ui.inverted.labels .violet.label, -.ui.ui.ui.inverted.violet.label { - background-color: #a291fb; - border-color: #a291fb; - color: #1b1c1d; -} - -/* Inverted Link */ - -.ui.inverted.labels a.violet.label:hover, -a.ui.ui.ui.inverted.violet.label:hover { - background-color: #745aff; - border-color: #745aff; - color: #1b1c1d; -} - -/* Inverted Ribbon */ - -.ui.ui.ui.inverted.violet.ribbon.label { - border-color: #7860f9; -} - -/* Inverted Basic */ - -.ui.inverted.basic.labels .violet.label, -.ui.ui.ui.inverted.basic.violet.label { - background-color: #1b1c1d; - border-color: #a291fb; - color: #a291fb; -} - -.ui.inverted.basic.labels a.violet.label:hover, -a.ui.ui.ui.inverted.basic.violet.label:hover { - border-color: #745aff; - background-color: #1b1c1d; - color: #745aff; -} - -/* Inverted Basic Tags */ - -.ui.inverted.basic.tag.labels .violet.label, -.ui.ui.ui.inverted.violet.basic.tag.label { - border: 1px solid #a291fb; -} - -.ui.inverted.basic.tag.labels .violet.label::before, -.ui.ui.ui.inverted.violet.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - background-color: #1b1c1d; - right: calc(100% + 1px); -} - -.ui.purple.labels .label, -.ui.ui.ui.purple.label { - background-color: #a333c8; - border-color: #a333c8; - color: #fff; -} - -/* Link */ - -.ui.purple.labels a.label:hover, -a.ui.ui.ui.purple.label:hover { - background-color: #9627ba; - border-color: #9627ba; - color: #fff; -} - -/* Ribbon */ - -.ui.ui.ui.purple.ribbon.label { - border-color: #82299f; -} - -/* Basic */ - -.ui.basic.labels .purple.label, -.ui.ui.ui.basic.purple.label { - background: none #fff; - border-color: #a333c8; - color: #a333c8; -} - -.ui.basic.labels a.purple.label:hover, -a.ui.ui.ui.basic.purple.label:hover { - background: none #fff; - border-color: #9627ba; - color: #9627ba; -} - -/* Inverted */ - -.ui.inverted.labels .purple.label, -.ui.ui.ui.inverted.purple.label { - background-color: #dc73ff; - border-color: #dc73ff; - color: #1b1c1d; -} - -/* Inverted Link */ - -.ui.inverted.labels a.purple.label:hover, -a.ui.ui.ui.inverted.purple.label:hover { - background-color: #cf40ff; - border-color: #cf40ff; - color: #1b1c1d; -} - -/* Inverted Ribbon */ - -.ui.ui.ui.inverted.purple.ribbon.label { - border-color: #cf40ff; -} - -/* Inverted Basic */ - -.ui.inverted.basic.labels .purple.label, -.ui.ui.ui.inverted.basic.purple.label { - background-color: #1b1c1d; - border-color: #dc73ff; - color: #dc73ff; -} - -.ui.inverted.basic.labels a.purple.label:hover, -a.ui.ui.ui.inverted.basic.purple.label:hover { - border-color: #cf40ff; - background-color: #1b1c1d; - color: #cf40ff; -} - -/* Inverted Basic Tags */ - -.ui.inverted.basic.tag.labels .purple.label, -.ui.ui.ui.inverted.purple.basic.tag.label { - border: 1px solid #dc73ff; -} - -.ui.inverted.basic.tag.labels .purple.label::before, -.ui.ui.ui.inverted.purple.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - background-color: #1b1c1d; - right: calc(100% + 1px); -} - -.ui.pink.labels .label, -.ui.ui.ui.pink.label { - background-color: #e03997; - border-color: #e03997; - color: #fff; -} - -/* Link */ - -.ui.pink.labels a.label:hover, -a.ui.ui.ui.pink.label:hover { - background-color: #e61a8d; - border-color: #e61a8d; - color: #fff; -} - -/* Ribbon */ - -.ui.ui.ui.pink.ribbon.label { - border-color: #c71f7e; -} - -/* Basic */ - -.ui.basic.labels .pink.label, -.ui.ui.ui.basic.pink.label { - background: none #fff; - border-color: #e03997; - color: #e03997; -} - -.ui.basic.labels a.pink.label:hover, -a.ui.ui.ui.basic.pink.label:hover { - background: none #fff; - border-color: #e61a8d; - color: #e61a8d; -} - -/* Inverted */ - -.ui.inverted.labels .pink.label, -.ui.ui.ui.inverted.pink.label { - background-color: #ff8edf; - border-color: #ff8edf; - color: #1b1c1d; -} - -/* Inverted Link */ - -.ui.inverted.labels a.pink.label:hover, -a.ui.ui.ui.inverted.pink.label:hover { - background-color: #ff5bd1; - border-color: #ff5bd1; - color: #1b1c1d; -} - -/* Inverted Ribbon */ - -.ui.ui.ui.inverted.pink.ribbon.label { - border-color: #ff5bd1; -} - -/* Inverted Basic */ - -.ui.inverted.basic.labels .pink.label, -.ui.ui.ui.inverted.basic.pink.label { - background-color: #1b1c1d; - border-color: #ff8edf; - color: #ff8edf; -} - -.ui.inverted.basic.labels a.pink.label:hover, -a.ui.ui.ui.inverted.basic.pink.label:hover { - border-color: #ff5bd1; - background-color: #1b1c1d; - color: #ff5bd1; -} - -/* Inverted Basic Tags */ - -.ui.inverted.basic.tag.labels .pink.label, -.ui.ui.ui.inverted.pink.basic.tag.label { - border: 1px solid #ff8edf; -} - -.ui.inverted.basic.tag.labels .pink.label::before, -.ui.ui.ui.inverted.pink.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - background-color: #1b1c1d; - right: calc(100% + 1px); -} - -.ui.brown.labels .label, -.ui.ui.ui.brown.label { - background-color: #a5673f; - border-color: #a5673f; - color: #fff; -} - -/* Link */ - -.ui.brown.labels a.label:hover, -a.ui.ui.ui.brown.label:hover { - background-color: #975b33; - border-color: #975b33; - color: #fff; -} - -/* Ribbon */ - -.ui.ui.ui.brown.ribbon.label { - border-color: #805031; -} - -/* Basic */ - -.ui.basic.labels .brown.label, -.ui.ui.ui.basic.brown.label { - background: none #fff; - border-color: #a5673f; - color: #a5673f; -} - -.ui.basic.labels a.brown.label:hover, -a.ui.ui.ui.basic.brown.label:hover { - background: none #fff; - border-color: #975b33; - color: #975b33; -} - -/* Inverted */ - -.ui.inverted.labels .brown.label, -.ui.ui.ui.inverted.brown.label { - background-color: #d67c1c; - border-color: #d67c1c; - color: #1b1c1d; -} - -/* Inverted Link */ - -.ui.inverted.labels a.brown.label:hover, -a.ui.ui.ui.inverted.brown.label:hover { - background-color: #b0620f; - border-color: #b0620f; - color: #1b1c1d; -} - -/* Inverted Ribbon */ - -.ui.ui.ui.inverted.brown.ribbon.label { - border-color: #a96216; -} - -/* Inverted Basic */ - -.ui.inverted.basic.labels .brown.label, -.ui.ui.ui.inverted.basic.brown.label { - background-color: #1b1c1d; - border-color: #d67c1c; - color: #d67c1c; -} - -.ui.inverted.basic.labels a.brown.label:hover, -a.ui.ui.ui.inverted.basic.brown.label:hover { - border-color: #b0620f; - background-color: #1b1c1d; - color: #b0620f; -} - -/* Inverted Basic Tags */ - -.ui.inverted.basic.tag.labels .brown.label, -.ui.ui.ui.inverted.brown.basic.tag.label { - border: 1px solid #d67c1c; -} - -.ui.inverted.basic.tag.labels .brown.label::before, -.ui.ui.ui.inverted.brown.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - background-color: #1b1c1d; - right: calc(100% + 1px); -} - -.ui.grey.labels .label, -.ui.ui.ui.grey.label { - background-color: #767676; - border-color: #767676; - color: #fff; -} - -/* Link */ - -.ui.grey.labels a.label:hover, -a.ui.ui.ui.grey.label:hover { - background-color: #838383; - border-color: #838383; - color: #fff; -} - -/* Ribbon */ - -.ui.ui.ui.grey.ribbon.label { - border-color: #5d5d5d; -} - -/* Basic */ - -.ui.basic.labels .grey.label, -.ui.ui.ui.basic.grey.label { - background: none #fff; - border-color: #767676; - color: #767676; -} - -.ui.basic.labels a.grey.label:hover, -a.ui.ui.ui.basic.grey.label:hover { - background: none #fff; - border-color: #838383; - color: #838383; -} - -/* Inverted */ - -.ui.inverted.labels .grey.label, -.ui.ui.ui.inverted.grey.label { - background-color: #dcddde; - border-color: #dcddde; - color: #1b1c1d; -} - -/* Inverted Link */ - -.ui.inverted.labels a.grey.label:hover, -a.ui.ui.ui.inverted.grey.label:hover { - background-color: #c2c4c5; - border-color: #c2c4c5; - color: #fff; -} - -/* Inverted Ribbon */ - -.ui.ui.ui.inverted.grey.ribbon.label { - border-color: #e9eaea; -} - -/* Inverted Basic */ - -.ui.inverted.basic.labels .grey.label, -.ui.ui.ui.inverted.basic.grey.label { - background-color: #1b1c1d; - border-color: #dcddde; - color: rgba(255, 255, 255, 0.9); -} - -.ui.inverted.basic.labels a.grey.label:hover, -a.ui.ui.ui.inverted.basic.grey.label:hover { - border-color: #c2c4c5; - background-color: #1b1c1d; -} - -/* Inverted Basic Tags */ - -.ui.inverted.basic.tag.labels .grey.label, -.ui.ui.ui.inverted.grey.basic.tag.label { - border: 1px solid #dcddde; -} - -.ui.inverted.basic.tag.labels .grey.label::before, -.ui.ui.ui.inverted.grey.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - background-color: #1b1c1d; - right: calc(100% + 1px); -} - -.ui.black.labels .label, -.ui.ui.ui.black.label { - background-color: #1b1c1d; - border-color: #1b1c1d; - color: #fff; -} - -/* Link */ - -.ui.black.labels a.label:hover, -a.ui.ui.ui.black.label:hover { - background-color: #27292a; - border-color: #27292a; - color: #fff; -} - -/* Ribbon */ - -.ui.ui.ui.black.ribbon.label { - border-color: #020203; -} - -/* Basic */ - -.ui.basic.labels .black.label, -.ui.ui.ui.basic.black.label { - background: none #fff; - border-color: #1b1c1d; - color: #1b1c1d; -} - -.ui.basic.labels a.black.label:hover, -a.ui.ui.ui.basic.black.label:hover { - background: none #fff; - border-color: #27292a; - color: #27292a; -} - -/* Inverted */ - -.ui.inverted.labels .black.label, -.ui.ui.ui.inverted.black.label { - background-color: #545454; - border-color: #545454; - color: #1b1c1d; -} - -/* Inverted Link */ - -.ui.inverted.labels a.black.label:hover, -a.ui.ui.ui.inverted.black.label:hover { - background-color: #000000; - border-color: #000000; - color: #fff; -} - -/* Inverted Ribbon */ - -.ui.ui.ui.inverted.black.ribbon.label { - border-color: #616161; -} - -/* Inverted Basic */ - -.ui.inverted.basic.labels .black.label, -.ui.ui.ui.inverted.basic.black.label { - background-color: #1b1c1d; - border-color: #545454; - color: rgba(255, 255, 255, 0.9); -} - -.ui.inverted.basic.labels a.black.label:hover, -a.ui.ui.ui.inverted.basic.black.label:hover { - border-color: #000000; - background-color: #1b1c1d; -} - -/* Inverted Basic Tags */ - -.ui.inverted.basic.tag.labels .black.label, -.ui.ui.ui.inverted.black.basic.tag.label { - border: 1px solid #545454; -} - -.ui.inverted.basic.tag.labels .black.label::before, -.ui.ui.ui.inverted.black.basic.tag.label::before { - border-color: inherit; - border-width: 1px 0 0 1px; - border-style: inherit; - background-color: #1b1c1d; - right: calc(100% + 1px); -} - -/* ------------------- - Horizontal --------------------- */ - -.ui.horizontal.labels .label, -.ui.horizontal.label { - margin: 0 0.5em 0 0; - padding: 0.4em 0.833em; - min-width: 3em; - text-align: center; -} - -/* ------------------- - Circular - -------------------- */ - -.ui.circular.labels .label, -.ui.circular.label { - min-width: 2em; - min-height: 2em; - padding: 0.5em !important; - line-height: 1em; - text-align: center; - border-radius: 500rem; -} - -.ui.empty.circular.labels .label, -.ui.empty.circular.label { - min-width: 0; - min-height: 0; - overflow: hidden; - width: 0.5em; - height: 0.5em; - vertical-align: baseline; -} - -/* ------------------- - Pointing - -------------------- */ - -.ui.pointing.label { - position: relative; -} - -.ui.attached.pointing.label { - position: absolute; -} - -.ui.pointing.label::before { - background-color: inherit; - background-image: inherit; - border-width: 0; - border-style: solid; - border-color: inherit; -} - -/* Arrow */ - -.ui.pointing.label::before { - position: absolute; - content: ""; - transform: rotate(45deg); - background-image: none; - z-index: 2; - width: 0.6666em; - height: 0.6666em; - transition: none; -} - -/* --- Above --- */ - -.ui.pointing.label, -.ui[class*="pointing above"].label { - margin-top: 1em; -} - -.ui.pointing.label::before, -.ui[class*="pointing above"].label::before { - border-width: 1px 0 0 1px; - transform: translateX(-50%) translateY(-50%) rotate(45deg); - top: 0; - left: 50%; -} - -/* --- Below --- */ - -.ui[class*="bottom pointing"].label, -.ui[class*="pointing below"].label { - margin-top: 0; - margin-bottom: 1em; -} - -.ui[class*="bottom pointing"].label::before, -.ui[class*="pointing below"].label::before { - border-width: 0 1px 1px 0; - right: auto; - transform: translateX(-50%) translateY(-50%) rotate(45deg); - top: 100%; - left: 50%; -} - -/* --- Left --- */ - -.ui[class*="left pointing"].label { - margin-top: 0; - margin-left: 0.6666em; -} - -.ui[class*="left pointing"].label::before { - border-width: 0 0 1px 1px; - transform: translateX(-50%) translateY(-50%) rotate(45deg); - bottom: auto; - right: auto; - top: 50%; - left: 0; -} - -/* --- Right --- */ - -.ui[class*="right pointing"].label { - margin-top: 0; - margin-right: 0.6666em; -} - -.ui[class*="right pointing"].label::before { - border-width: 1px 1px 0 0; - transform: translateX(50%) translateY(-50%) rotate(45deg); - top: 50%; - right: 0; - bottom: auto; - left: auto; -} - -/* Basic Pointing */ - -/* --- Above --- */ - -.ui.basic.pointing.label::before, -.ui.basic[class*="pointing above"].label::before { - margin-top: -1px; -} - -/* --- Below --- */ - -.ui.basic[class*="bottom pointing"].label::before, -.ui.basic[class*="pointing below"].label::before { - bottom: auto; - top: 100%; - margin-top: 1px; -} - -/* --- Left --- */ - -.ui.basic[class*="left pointing"].label::before { - top: 50%; - left: -1px; -} - -/* --- Right --- */ - -.ui.basic[class*="right pointing"].label::before { - top: 50%; - right: -1px; -} - -/* ------------------ - Floating Label - ------------------- */ - -.ui.floating.label { - position: absolute; - z-index: 100; - top: -1em; - right: 0; - white-space: nowrap; - transform: translateX(50%); -} - -.ui.right.aligned.floating.label { - transform: translateX(1.2em); -} - -.ui.left.floating.label { - left: 0; - right: auto; - transform: translateX(-50%); -} - -.ui.left.aligned.floating.label { - transform: translateX(-1.2em); -} - -.ui.bottom.floating.label { - top: auto; - bottom: -1em; -} - -/* ------------------- - Sizes --------------------- */ - -.ui.labels .label, -.ui.label { - font-size: 0.85714286rem; -} - -.ui.mini.labels .label, -.ui.mini.label { - font-size: 0.64285714rem; -} - -.ui.tiny.labels .label, -.ui.tiny.label { - font-size: 0.71428571rem; -} - -.ui.small.labels .label, -.ui.small.label { - font-size: 0.78571429rem; -} - -.ui.large.labels .label, -.ui.large.label { - font-size: 1rem; -} - -.ui.big.labels .label, -.ui.big.label { - font-size: 1.28571429rem; -} - -.ui.huge.labels .label, -.ui.huge.label { - font-size: 1.42857143rem; -} - -.ui.massive.labels .label, -.ui.massive.label { - font-size: 1.71428571rem; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - List - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - List -*******************************/ - -ul.ui.list, -ol.ui.list, -.ui.list { - list-style-type: none; - margin: 1em 0; - padding: 0 0; -} - -ul.ui.list:first-child, -ol.ui.list:first-child, -.ui.list:first-child { - margin-top: 0; - padding-top: 0; -} - -ul.ui.list:last-child, -ol.ui.list:last-child, -.ui.list:last-child { - margin-bottom: 0; - padding-bottom: 0; -} - -/******************************* - Content -*******************************/ - -/* List Item */ - -ul.ui.list li, -ol.ui.list li, -.ui.list > .item, -.ui.list .list > .item { - display: list-item; - table-layout: fixed; - list-style-type: none; - list-style-position: outside; - padding: 0.21428571em 0; - line-height: 1.14285714em; -} - -ul.ui.list > li:first-child::after, -ol.ui.list > li:first-child::after, -.ui.list > .list > .item::after, -.ui.list > .item::after { - content: ""; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -ul.ui.list li:first-child, -ol.ui.list li:first-child, -.ui.list .list > .item:first-child, -.ui.list > .item:first-child { - padding-top: 0; -} - -ul.ui.list li:last-child, -ol.ui.list li:last-child, -.ui.list .list > .item:last-child, -.ui.list > .item:last-child { - padding-bottom: 0; -} - -/* Child List */ - -ul.ui.list ul, -ol.ui.list ol, -.ui.list .list:not(.icon) { - clear: both; - margin: 0; - padding: 0.75em 0 0.25em 0.5em; -} - -/* Child Item */ - -ul.ui.list ul li, -ol.ui.list ol li, -.ui.list .list > .item { - padding: 0.14285714em 0; - line-height: inherit; -} - -/* Icon */ - -.ui.list .list > .item > i.icon, -.ui.list > .item > i.icon { - display: table-cell; - min-width: 1.55em; - margin: 0; - padding-top: 0; - transition: color 0.1s ease; -} - -.ui.list .list > .item > i.icon:not(.loading), -.ui.list > .item > i.icon:not(.loading) { - padding-right: 0.28571429em; - vertical-align: top; -} - -.ui.list .list > .item > i.icon:only-child, -.ui.list > .item > i.icon:only-child { - display: inline-block; - min-width: auto; - vertical-align: top; -} - -/* Image */ - -.ui.list .list > .item > .image, -.ui.list > .item > .image { - display: table-cell; - background-color: transparent; - margin: 0; - vertical-align: top; -} - -.ui.list .list > .item > .image:not(:only-child):not(img), -.ui.list > .item > .image:not(:only-child):not(img) { - padding-right: 0.5em; -} - -.ui.list .list > .item > .image img, -.ui.list > .item > .image img { - vertical-align: top; -} - -.ui.list .list > .item > img.image, -.ui.list .list > .item > .image:only-child, -.ui.list > .item > img.image, -.ui.list > .item > .image:only-child { - display: inline-block; -} - -/* Content */ - -.ui.list .list > .item > .content, -.ui.list > .item > .content { - line-height: 1.14285714em; - color: rgba(0, 0, 0, 0.87); -} - -.ui.list .list > .item > .image + .content, -.ui.list .list > .item > i.icon + .content, -.ui.list > .item > .image + .content, -.ui.list > .item > i.icon + .content { - display: table-cell; - width: 100%; - padding: 0 0 0 0.5em; - vertical-align: top; -} - -.ui.list .list > .item > i.loading.icon + .content, -.ui.list > .item > i.loading.icon + .content { - padding-left: calc(0.2857142857142857em + 0.5em); -} - -.ui.list .list > .item > img.image + .content, -.ui.list > .item > img.image + .content { - display: inline-block; - width: auto; -} - -.ui.list .list > .item > .content > .list, -.ui.list > .item > .content > .list { - margin-left: 0; - padding-left: 0; -} - -/* Header */ - -.ui.list .list > .item .header, -.ui.list > .item .header { - display: block; - margin: 0; - font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-weight: bold; - color: rgba(0, 0, 0, 0.87); -} - -/* Description */ - -.ui.list .list > .item .description, -.ui.list > .item .description { - display: block; - color: rgba(0, 0, 0, 0.7); -} - -/* Child Link */ - -.ui.list > .item a, -.ui.list .list > .item a { - cursor: pointer; -} - -/* Linking Item */ - -.ui.list .list > a.item, -.ui.list > a.item { - cursor: pointer; - color: #4183c4; -} - -.ui.list .list > a.item:hover, -.ui.list > a.item:hover { - color: #1e70bf; -} - -/* Linked Item Icons */ - -.ui.list .list > a.item > i.icons, -.ui.list > a.item > i.icons, -.ui.list .list > a.item > i.icon, -.ui.list > a.item > i.icon { - color: rgba(0, 0, 0, 0.4); -} - -/* Header Link */ - -.ui.list .list > .item a.header, -.ui.list > .item a.header { - cursor: pointer; - color: #4183c4 !important; -} - -.ui.list .list > .item > a.header:hover, -.ui.list > .item > a.header:hover { - color: #1e70bf !important; -} - -/* Floated Content */ - -.ui[class*="left floated"].list { - float: left; -} - -.ui[class*="right floated"].list { - float: right; -} - -.ui.list .list > .item [class*="left floated"], -.ui.list > .item [class*="left floated"] { - float: left; - margin: 0 1em 0 0; -} - -.ui.list .list > .item [class*="right floated"], -.ui.list > .item [class*="right floated"] { - float: right; - margin: 0 0 0 1em; -} - -/******************************* - Coupling -*******************************/ - -.ui.menu .ui.list > .item, -.ui.menu .ui.list .list > .item { - display: list-item; - table-layout: fixed; - background-color: transparent; - list-style-type: none; - list-style-position: outside; - padding: 0.21428571em 0; - line-height: 1.14285714em; -} - -.ui.menu .ui.list .list > .item::before, -.ui.menu .ui.list > .item::before { - border: none; - background: none; -} - -.ui.menu .ui.list .list > .item:first-child, -.ui.menu .ui.list > .item:first-child { - padding-top: 0; -} - -.ui.menu .ui.list .list > .item:last-child, -.ui.menu .ui.list > .item:last-child { - padding-bottom: 0; -} - -/******************************* - Types -*******************************/ - -/* ------------------- - Horizontal - -------------------- */ - -.ui.horizontal.list { - display: inline-block; - font-size: 0; -} - -.ui.horizontal.list > .item { - display: inline-block; - margin-right: 1em; - font-size: 1rem; -} - -.ui.horizontal.list:not(.celled) > .item:last-child { - margin-right: 0; - padding-right: 0; -} - -.ui.horizontal.list .list:not(.icon) { - padding-left: 0; - padding-bottom: 0; -} - -.ui.horizontal.list > .item > .image, -.ui.horizontal.list .list > .item > .image, -.ui.horizontal.list > .item > i.icon, -.ui.horizontal.list .list > .item > i.icon, -.ui.horizontal.list > .item > .content, -.ui.horizontal.list .list > .item > .content { - vertical-align: middle; -} - -/* Padding on all elements */ - -.ui.horizontal.list > .item:first-child, -.ui.horizontal.list > .item:last-child { - padding-top: 0.21428571em; - padding-bottom: 0.21428571em; -} - -/* Horizontal List */ - -.ui.horizontal.list > .item > i.icon, -.ui.horizontal.list .item > i.icons > i.icon { - margin: 0; - padding: 0 0.25em 0 0; -} - -.ui.horizontal.list > .item > .image + .content, -.ui.horizontal.list > .item > i.icon, -.ui.horizontal.list > .item > i.icon + .content { - float: none; - display: inline-block; - width: auto; -} - -.ui.horizontal.list > .item > .image { - display: inline-block; -} - -/******************************* - States -*******************************/ - -/* ------------------- - Disabled - -------------------- */ - -.ui.list .list > .disabled.item, -.ui.list > .disabled.item { - pointer-events: none; - color: rgba(40, 40, 40, 0.3) !important; -} - -.ui.inverted.list .list > .disabled.item, -.ui.inverted.list > .disabled.item { - color: rgba(225, 225, 225, 0.3) !important; -} - -/* ------------------- - Hover --------------------- */ - -.ui.list .list > a.item:hover > .icons, -.ui.list > a.item:hover > .icons, -.ui.list .list > a.item:hover > i.icon, -.ui.list > a.item:hover > i.icon { - color: rgba(0, 0, 0, 0.87); -} - -/******************************* - Variations -*******************************/ - -/* ------------------- - Inverted - -------------------- */ - -.ui.inverted.list .list > a.item > i.icon, -.ui.inverted.list > a.item > i.icon { - color: rgba(255, 255, 255, 0.7); -} - -.ui.inverted.list .list > .item .header, -.ui.inverted.list > .item .header { - color: rgba(255, 255, 255, 0.9); -} - -.ui.inverted.list .list > .item .description, -.ui.inverted.list > .item .description { - color: rgba(255, 255, 255, 0.7); -} - -.ui.inverted.list .list > .item > .content, -.ui.inverted.list > .item > .content { - color: rgba(255, 255, 255, 0.7); -} - -/* Item Link */ - -.ui.inverted.list .list > a.item, -.ui.inverted.list > a.item { - cursor: pointer; - color: rgba(255, 255, 255, 0.9); -} - -.ui.inverted.list .list > a.item:hover, -.ui.inverted.list > a.item:hover { - color: #1e70bf; -} - -/* Linking Content */ - -.ui.inverted.list .item a:not(.ui) { - color: rgba(255, 255, 255, 0.9) !important; -} - -.ui.inverted.list .item a:not(.ui):hover { - color: #1e70bf !important; -} - -/* ------------------- - Aligned - -------------------- */ - -.ui.list[class*="top aligned"] .image, -.ui.list[class*="top aligned"] .content, -.ui.list [class*="top aligned"] { - vertical-align: top !important; -} - -.ui.list[class*="middle aligned"] .image, -.ui.list[class*="middle aligned"] .content, -.ui.list [class*="middle aligned"] { - vertical-align: middle !important; -} - -.ui.list[class*="bottom aligned"] .image, -.ui.list[class*="bottom aligned"] .content, -.ui.list [class*="bottom aligned"] { - vertical-align: bottom !important; -} - -/* ------------------- - Link - -------------------- */ - -.ui.link.list .item, -.ui.link.list a.item, -.ui.link.list .item a:not(.ui) { - color: rgba(0, 0, 0, 0.4); - transition: 0.1s color ease; -} - -.ui.ui.link.list a.item:hover, -.ui.ui.link.list .item a:not(.ui):hover { - color: rgba(0, 0, 0, 0.8); -} - -.ui.ui.link.list a.item:active, -.ui.ui.link.list .item a:not(.ui):active { - color: rgba(0, 0, 0, 0.9); -} - -.ui.ui.link.list .active.item, -.ui.ui.link.list .active.item a:not(.ui) { - color: rgba(0, 0, 0, 0.95); -} - -/* Inverted */ - -.ui.inverted.link.list .item, -.ui.inverted.link.list a.item, -.ui.inverted.link.list .item a:not(.ui) { - color: rgba(255, 255, 255, 0.5); -} - -.ui.ui.inverted.link.list a.item:hover, -.ui.ui.inverted.link.list .item a:not(.ui):hover { - color: #ffffff; -} - -.ui.ui.inverted.link.list a.item:active, -.ui.ui.inverted.link.list .item a:not(.ui):active { - color: #ffffff; -} - -.ui.ui.inverted.link.list a.active.item, -.ui.ui.inverted.link.list .active.item a:not(.ui) { - color: #ffffff; -} - -/* ------------------- - Selection - -------------------- */ - -.ui.selection.list .list > .item, -.ui.selection.list > .item { - cursor: pointer; - background: transparent; - padding: 0.5em 0.5em; - margin: 0; - color: rgba(0, 0, 0, 0.4); - border-radius: 0.5em; - transition: 0.1s color ease, 0.1s padding-left ease, 0.1s background-color ease; -} - -.ui.selection.list .list > .item:last-child, -.ui.selection.list > .item:last-child { - margin-bottom: 0; -} - -.ui.selection.list .list > .item:hover, -.ui.selection.list > .item:hover { - background: rgba(0, 0, 0, 0.03); - color: rgba(0, 0, 0, 0.8); -} - -.ui.selection.list .list > .item:active, -.ui.selection.list > .item:active { - background: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.9); -} - -.ui.selection.list .list > .item.active, -.ui.selection.list > .item.active { - background: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.95); -} - -/* Inverted */ - -.ui.inverted.selection.list > .item { - background: transparent; - color: rgba(255, 255, 255, 0.5); -} - -.ui.inverted.selection.list > .item:hover { - background: rgba(255, 255, 255, 0.02); - color: #ffffff; -} - -.ui.inverted.selection.list > .item:active { - background: rgba(255, 255, 255, 0.08); - color: #ffffff; -} - -.ui.inverted.selection.list > .item.active { - background: rgba(255, 255, 255, 0.08); - color: #ffffff; -} - -/* Celled / Divided Selection List */ - -.ui.celled.selection.list .list > .item, -.ui.divided.selection.list .list > .item, -.ui.celled.selection.list > .item, -.ui.divided.selection.list > .item { - border-radius: 0; -} - -/* ------------------- - Animated - -------------------- */ - -.ui.animated.list > .item { - transition: 0.25s color ease 0.1s, 0.25s padding-left ease 0.1s, 0.25s background-color ease 0.1s; -} - -.ui.animated.list:not(.horizontal) > .item:hover { - padding-left: 1em; -} - -/* ------------------- - Fitted - -------------------- */ - -.ui.fitted.list:not(.selection) .list > .item, -.ui.fitted.list:not(.selection) > .item { - padding-left: 0; - padding-right: 0; -} - -.ui.fitted.selection.list .list > .item, -.ui.fitted.selection.list > .item { - margin-left: -0.5em; - margin-right: -0.5em; -} - -/* ------------------- - Bulleted - -------------------- */ - -ul.ui.list, -.ui.bulleted.list { - margin-left: 1.25rem; -} - -ul.ui.list li, -.ui.bulleted.list .list > .item, -.ui.bulleted.list > .item { - position: relative; -} - -ul.ui.list li::before, -.ui.bulleted.list .list > .item::before, -.ui.bulleted.list > .item::before { - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - pointer-events: none; - position: absolute; - top: auto; - left: auto; - font-weight: normal; - margin-left: -1.25rem; - content: "\2022"; - opacity: 1; - color: inherit; - vertical-align: top; -} - -ul.ui.list li::before, -.ui.bulleted.list .list > a.item::before, -.ui.bulleted.list > a.item::before { - color: rgba(0, 0, 0, 0.87); -} - -ul.ui.list ul, -.ui.bulleted.list .list:not(.icon) { - padding-left: 1.25rem; -} - -/* Horizontal Bulleted */ - -ul.ui.horizontal.bulleted.list, -.ui.horizontal.bulleted.list { - margin-left: 0; -} - -ul.ui.horizontal.bulleted.list li, -.ui.horizontal.bulleted.list > .item { - margin-left: 1.75rem; -} - -ul.ui.horizontal.bulleted.list li:first-child, -.ui.horizontal.bulleted.list > .item:first-child { - margin-left: 0; -} - -ul.ui.horizontal.bulleted.list li::before, -.ui.horizontal.bulleted.list > .item::before { - color: rgba(0, 0, 0, 0.87); -} - -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, -.ui.ordered.list .list:not(.icon), -ol.ui.list ol { - counter-reset: ordered; - margin-left: 1.25rem; - list-style-type: none; -} - -ol.ui.list li, -.ui.ordered.list .list > .item, -.ui.ordered.list > .item { - list-style-type: none; - position: relative; -} - -ol.ui.list li::before, -.ui.ordered.list .list > .item::before, -.ui.ordered.list > .item::before { - position: absolute; - top: auto; - left: auto; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - pointer-events: none; - margin-left: -1.25rem; - counter-increment: ordered; - content: counters(ordered, ".") " "; - text-align: right; - color: rgba(0, 0, 0, 0.87); - vertical-align: middle; - opacity: 0.8; -} - -ol.ui.inverted.list li::before, -.ui.ordered.inverted.list .list > .item::before, -.ui.ordered.inverted.list > .item::before { - color: rgba(255, 255, 255, 0.7); -} - -/* Value */ - -.ui.ordered.list .list > .item[data-value]::before, -.ui.ordered.list > .item[data-value]::before { - content: attr(data-value); -} - -ol.ui.list li[value]::before { - content: attr(value); -} - -/* Child Lists */ - -ol.ui.list ol, -.ui.ordered.list .list:not(.icon) { - margin-left: 1em; -} - -ol.ui.list ol li::before, -.ui.ordered.list .list > .item::before { - margin-left: -2em; -} - -/* Horizontal Ordered */ - -ol.ui.horizontal.list, -.ui.ordered.horizontal.list { - margin-left: 0; -} - -ol.ui.horizontal.list li::before, -.ui.ordered.horizontal.list .list > .item::before, -.ui.ordered.horizontal.list > .item::before { - position: static; - margin: 0 0.5em 0 0; -} - -/* Suffixed Ordered */ - -ol.ui.suffixed.list li::before, -.ui.suffixed.ordered.list .list > .item::before, -.ui.suffixed.ordered.list > .item::before { - content: counters(ordered, ".") "."; -} - -/* ------------------- - Divided - -------------------- */ - -.ui.divided.list > .item { - border-top: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.divided.list .list > .item { - border-top: none; -} - -.ui.divided.list .item .list > .item { - border-top: none; -} - -.ui.divided.list .list > .item:first-child, -.ui.divided.list > .item:first-child { - border-top: none; -} - -/* Sub Menu */ - -.ui.divided.list:not(.horizontal) .list > .item:first-child { - border-top-width: 1px; -} - -/* Divided bulleted */ - -.ui.divided.bulleted.list:not(.horizontal), -.ui.divided.bulleted.list .list:not(.icon) { - margin-left: 0; - padding-left: 0; -} - -.ui.divided.bulleted.list > .item:not(.horizontal) { - padding-left: 1.25rem; -} - -/* Divided Ordered */ - -.ui.divided.ordered.list { - margin-left: 0; -} - -.ui.divided.ordered.list .list > .item, -.ui.divided.ordered.list > .item { - padding-left: 1.25rem; -} - -.ui.divided.ordered.list .item .list:not(.icon) { - margin-left: 0; - margin-right: 0; - padding-bottom: 0.21428571em; -} - -.ui.divided.ordered.list .item .list > .item { - padding-left: 1em; -} - -/* Divided Selection */ - -.ui.divided.selection.list .list > .item, -.ui.divided.selection.list > .item { - margin: 0; - border-radius: 0; -} - -/* Divided horizontal */ - -.ui.divided.horizontal.list { - margin-left: 0; -} - -.ui.divided.horizontal.list > .item { - padding-left: 0.5em; -} - -.ui.divided.horizontal.list > .item:not(:last-child) { - padding-right: 0.5em; -} - -.ui.divided.horizontal.list > .item { - border-top: none; - border-right: 1px solid rgba(34, 36, 38, 0.15); - margin: 0; - line-height: 0.6; -} - -.ui.horizontal.divided.list > .item:last-child { - border-right: none; -} - -/* Inverted */ - -.ui.divided.inverted.list > .item, -.ui.divided.inverted.list > .list, -.ui.divided.inverted.horizontal.list > .item { - border-color: rgba(255, 255, 255, 0.1); -} - -/* ------------------- - Celled - -------------------- */ - -.ui.celled.list > .item, -.ui.celled.list > .list { - border-top: 1px solid rgba(34, 36, 38, 0.15); - padding-left: 0.5em; - padding-right: 0.5em; -} - -.ui.celled.list > .item:last-child { - border-bottom: 1px solid rgba(34, 36, 38, 0.15); -} - -/* Padding on all elements */ - -.ui.celled.list > .item:first-child, -.ui.celled.list > .item:last-child { - padding-top: 0.21428571em; - padding-bottom: 0.21428571em; -} - -/* Sub Menu */ - -.ui.celled.list .item .list > .item { - border-width: 0; -} - -.ui.celled.list .list > .item:first-child { - border-top-width: 0; -} - -/* Celled Bulleted */ - -.ui.celled.bulleted.list { - margin-left: 0; -} - -.ui.celled.bulleted.list .list > .item, -.ui.celled.bulleted.list > .item { - padding-left: 1.25rem; -} - -.ui.celled.bulleted.list .item .list:not(.icon) { - margin-left: -1.25rem; - margin-right: -1.25rem; - padding-bottom: 0.21428571em; -} - -/* Celled Ordered */ - -.ui.celled.ordered.list { - margin-left: 0; -} - -.ui.celled.ordered.list .list > .item, -.ui.celled.ordered.list > .item { - padding-left: 1.25rem; -} - -.ui.celled.ordered.list .item .list:not(.icon) { - margin-left: 0; - margin-right: 0; - padding-bottom: 0.21428571em; -} - -.ui.celled.ordered.list .list > .item { - padding-left: 1em; -} - -/* Celled Horizontal */ - -.ui.horizontal.celled.list { - margin-left: 0; -} - -.ui.horizontal.celled.list .list > .item, -.ui.horizontal.celled.list > .item { - border-top: none; - border-left: 1px solid rgba(34, 36, 38, 0.15); - margin: 0; - padding-left: 0.5em; - padding-right: 0.5em; - line-height: 0.6; -} - -.ui.horizontal.celled.list .list > .item:last-child, -.ui.horizontal.celled.list > .item:last-child { - border-bottom: none; - border-right: 1px solid rgba(34, 36, 38, 0.15); -} - -/* Inverted */ - -.ui.celled.inverted.list > .item, -.ui.celled.inverted.list > .list { - border-color: rgba(255, 255, 255, 0.1); -} - -.ui.celled.inverted.horizontal.list .list > .item, -.ui.celled.inverted.horizontal.list > .item { - border-color: rgba(255, 255, 255, 0.1); -} - -/* ------------------- - Relaxed - -------------------- */ - -.ui.relaxed.list:not(.horizontal) > .item:not(:first-child) { - padding-top: 0.42857143em; -} - -.ui.relaxed.list:not(.horizontal) > .item:not(:last-child) { - padding-bottom: 0.42857143em; -} - -.ui.horizontal.relaxed.list .list > .item:not(:first-child), -.ui.horizontal.relaxed.list > .item:not(:first-child) { - padding-left: 1rem; -} - -.ui.horizontal.relaxed.list .list > .item:not(:last-child), -.ui.horizontal.relaxed.list > .item:not(:last-child) { - padding-right: 1rem; -} - -/* Very Relaxed */ - -.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) { - padding-top: 0.85714286em; -} - -.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) { - padding-bottom: 0.85714286em; -} - -.ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child), -.ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) { - padding-left: 1.5rem; -} - -.ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child), -.ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) { - padding-right: 1.5rem; -} - -/* ------------------- - Sizes --------------------- */ - -.ui.list { - font-size: 1em; -} - -.ui.mini.list { - font-size: 0.78571429em; -} - -.ui.mini.horizontal.list .list > .item, -.ui.mini.horizontal.list > .item { - font-size: 0.78571429rem; -} - -.ui.tiny.list { - font-size: 0.85714286em; -} - -.ui.tiny.horizontal.list .list > .item, -.ui.tiny.horizontal.list > .item { - font-size: 0.85714286rem; -} - -.ui.small.list { - font-size: 0.92857143em; -} - -.ui.small.horizontal.list .list > .item, -.ui.small.horizontal.list > .item { - font-size: 0.92857143rem; -} - -.ui.large.list { - font-size: 1.14285714em; -} - -.ui.large.horizontal.list .list > .item, -.ui.large.horizontal.list > .item { - font-size: 1.14285714rem; -} - -.ui.big.list { - font-size: 1.28571429em; -} - -.ui.big.horizontal.list .list > .item, -.ui.big.horizontal.list > .item { - font-size: 1.28571429rem; -} - -.ui.huge.list { - font-size: 1.42857143em; -} - -.ui.huge.horizontal.list .list > .item, -.ui.huge.horizontal.list > .item { - font-size: 1.42857143rem; -} - -.ui.massive.list { - font-size: 1.71428571em; -} - -.ui.massive.horizontal.list .list > .item, -.ui.massive.horizontal.list > .item { - font-size: 1.71428571rem; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Loader - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Loader -*******************************/ - -/* Standard Size */ - -.ui.loader { - display: none; - position: absolute; - top: 50%; - left: 50%; - margin: 0; - text-align: center; - z-index: 1000; - transform: translateX(-50%) translateY(-50%); -} - -/* Static Shape */ - -.ui.loader::before { - position: absolute; - content: ""; - top: 0; - left: 50%; - width: 100%; - height: 100%; - border-radius: 500rem; - border: 0.2em solid rgba(0, 0, 0, 0.1); -} - -/* Active Shape */ - -.ui.loader::after { - position: absolute; - content: ""; - top: 0; - left: 50%; - width: 100%; - height: 100%; - animation: loader 0.6s infinite linear; - border: 0.2em solid #767676; - border-radius: 500rem; - box-shadow: 0 0 0 1px transparent; -} - -/* Speeds */ - -.ui.ui.fast.loading::after, -.ui.ui.fast.loading .input > i.icon::after, -.ui.ui.fast.loading > i.icon::after, -.ui.fast.loader::after { - animation-duration: 0.3s; -} - -.ui.ui.slow.loading::after, -.ui.ui.slow.loading .input > i.icon::after, -.ui.ui.slow.loading > i.icon::after, -.ui.slow.loader::after { - animation-duration: 0.9s; -} - -/* Active Animation */ - -@keyframes loader { - 100% { - transform: rotate(360deg); - } -} - -/* ------------------- - Coupling --------------------- */ - -/* Show inside active dimmer */ - -.ui.dimmer > .loader { - display: block; -} - -/* Black Dimmer */ - -.ui.dimmer > .ui.loader { - color: rgba(255, 255, 255, 0.9); -} - -.ui.dimmer > .ui.loader:not(.elastic)::before { - border-color: rgba(255, 255, 255, 0.15); -} - -/* White Dimmer (Inverted) */ - -.ui.inverted.dimmer > .ui.loader { - color: rgba(0, 0, 0, 0.87); -} - -.ui.inverted.dimmer > .ui.loader:not(.elastic)::before { - border-color: rgba(0, 0, 0, 0.1); -} - -/******************************* - Types -*******************************/ - -/* ------------------- - Text - -------------------- */ - -.ui.ui.ui.ui.text.loader { - width: auto; - height: auto; - text-align: center; - font-style: normal; -} - -/******************************* - States -*******************************/ - -.ui.indeterminate.loader::after { - animation-direction: reverse; - animation-duration: 1.2s; -} - -.ui.loader.active, -.ui.loader.visible { - display: block; -} - -.ui.loader.disabled, -.ui.loader.hidden { - display: none; -} - -/******************************* - Variations -*******************************/ - -/* ------------------- - Sizes --------------------- */ - -.ui.loader { - width: 2.28571429rem; - height: 2.28571429rem; - font-size: 1em; -} - -.ui.loader::before, -.ui.loader::after { - width: 2.28571429rem; - height: 2.28571429rem; - margin: 0 0 0 -1.14285714rem; -} - -.ui.text.loader { - min-width: 2.28571429rem; - padding-top: 3.07142857rem; -} - -.ui.mini.loader { - width: 1rem; - height: 1rem; - font-size: 0.78571429em; -} - -.ui.mini.loader::before, -.ui.mini.loader::after { - width: 1rem; - height: 1rem; - margin: 0 0 0 -0.5rem; -} - -.ui.mini.text.loader { - min-width: 1rem; - padding-top: 1.78571429rem; -} - -.ui.tiny.loader { - width: 1.14285714rem; - height: 1.14285714rem; - font-size: 0.85714286em; -} - -.ui.tiny.loader::before, -.ui.tiny.loader::after { - width: 1.14285714rem; - height: 1.14285714rem; - margin: 0 0 0 -0.57142857rem; -} - -.ui.tiny.text.loader { - min-width: 1.14285714rem; - padding-top: 1.92857143rem; -} - -.ui.small.loader { - width: 1.71428571rem; - height: 1.71428571rem; - font-size: 0.92857143em; -} - -.ui.small.loader::before, -.ui.small.loader::after { - width: 1.71428571rem; - height: 1.71428571rem; - margin: 0 0 0 -0.85714286rem; -} - -.ui.small.text.loader { - min-width: 1.71428571rem; - padding-top: 2.5rem; -} - -.ui.large.loader { - width: 3.42857143rem; - height: 3.42857143rem; - font-size: 1.14285714em; -} - -.ui.large.loader::before, -.ui.large.loader::after { - width: 3.42857143rem; - height: 3.42857143rem; - margin: 0 0 0 -1.71428571rem; -} - -.ui.large.text.loader { - min-width: 3.42857143rem; - padding-top: 4.21428571rem; -} - -.ui.big.loader { - width: 3.71428571rem; - height: 3.71428571rem; - font-size: 1.28571429em; -} - -.ui.big.loader::before, -.ui.big.loader::after { - width: 3.71428571rem; - height: 3.71428571rem; - margin: 0 0 0 -1.85714286rem; -} - -.ui.big.text.loader { - min-width: 3.71428571rem; - padding-top: 4.5rem; -} - -.ui.huge.loader { - width: 4.14285714rem; - height: 4.14285714rem; - font-size: 1.42857143em; -} - -.ui.huge.loader::before, -.ui.huge.loader::after { - width: 4.14285714rem; - height: 4.14285714rem; - margin: 0 0 0 -2.07142857rem; -} - -.ui.huge.text.loader { - min-width: 4.14285714rem; - padding-top: 4.92857143rem; -} - -.ui.massive.loader { - width: 4.57142857rem; - height: 4.57142857rem; - font-size: 1.71428571em; -} - -.ui.massive.loader::before, -.ui.massive.loader::after { - width: 4.57142857rem; - height: 4.57142857rem; - margin: 0 0 0 -2.28571429rem; -} - -.ui.massive.text.loader { - min-width: 4.57142857rem; - padding-top: 5.35714286rem; -} - -/* ------------------- - Colors --------------------- */ - -.ui.ui.primary.elastic.loader::before, -.ui.primary.basic.elastic.loading.button::before, -.ui.primary.basic.elastic.loading.button::after, -.ui.ui.ui.primary.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.primary.elastic.loading .input > i.icon::before, -.ui.ui.ui.ui.primary.elastic.loading > i.icon::before, -.ui.ui.ui.ui.primary.loading:not(.usual):not(.button)::after, -.ui.ui.ui.ui.primary.loading .input > i.icon::after, -.ui.ui.ui.ui.primary.loading > i.icon::after, -.ui.ui.ui.primary.loader::after { - color: #2185d0; -} - -.ui.inverted.primary.elastic.loader::before, -.ui.ui.ui.inverted.primary.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.inverted.primary.elastic.loading .input > i.icon::before, -.ui.ui.ui.inverted.primary.elastic.loading > i.icon::before, -.ui.ui.ui.ui.inverted.primary.loading:not(.usual)::after, -.ui.ui.ui.ui.inverted.primary.loading .input > i.icon::after, -.ui.ui.ui.ui.inverted.primary.loading > i.icon::after, -.ui.ui.ui.inverted.primary.loader::after { - color: #54c8ff; -} - -.ui.ui.secondary.elastic.loader::before, -.ui.secondary.basic.elastic.loading.button::before, -.ui.secondary.basic.elastic.loading.button::after, -.ui.ui.ui.secondary.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.secondary.elastic.loading .input > i.icon::before, -.ui.ui.ui.ui.secondary.elastic.loading > i.icon::before, -.ui.ui.ui.ui.secondary.loading:not(.usual):not(.button)::after, -.ui.ui.ui.ui.secondary.loading .input > i.icon::after, -.ui.ui.ui.ui.secondary.loading > i.icon::after, -.ui.ui.ui.secondary.loader::after { - color: #1b1c1d; -} - -.ui.inverted.secondary.elastic.loader::before, -.ui.ui.ui.inverted.secondary.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.inverted.secondary.elastic.loading .input > i.icon::before, -.ui.ui.ui.inverted.secondary.elastic.loading > i.icon::before, -.ui.ui.ui.ui.inverted.secondary.loading:not(.usual)::after, -.ui.ui.ui.ui.inverted.secondary.loading .input > i.icon::after, -.ui.ui.ui.ui.inverted.secondary.loading > i.icon::after, -.ui.ui.ui.inverted.secondary.loader::after { - color: #545454; -} - -.ui.ui.red.elastic.loader::before, -.ui.red.basic.elastic.loading.button::before, -.ui.red.basic.elastic.loading.button::after, -.ui.ui.ui.red.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.red.elastic.loading .input > i.icon::before, -.ui.ui.ui.ui.red.elastic.loading > i.icon::before, -.ui.ui.ui.ui.red.loading:not(.usual):not(.button)::after, -.ui.ui.ui.ui.red.loading .input > i.icon::after, -.ui.ui.ui.ui.red.loading > i.icon::after, -.ui.ui.ui.red.loader::after { - color: #db2828; -} - -.ui.inverted.red.elastic.loader::before, -.ui.ui.ui.inverted.red.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.inverted.red.elastic.loading .input > i.icon::before, -.ui.ui.ui.inverted.red.elastic.loading > i.icon::before, -.ui.ui.ui.ui.inverted.red.loading:not(.usual)::after, -.ui.ui.ui.ui.inverted.red.loading .input > i.icon::after, -.ui.ui.ui.ui.inverted.red.loading > i.icon::after, -.ui.ui.ui.inverted.red.loader::after { - color: #ff695e; -} - -.ui.ui.orange.elastic.loader::before, -.ui.orange.basic.elastic.loading.button::before, -.ui.orange.basic.elastic.loading.button::after, -.ui.ui.ui.orange.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.orange.elastic.loading .input > i.icon::before, -.ui.ui.ui.ui.orange.elastic.loading > i.icon::before, -.ui.ui.ui.ui.orange.loading:not(.usual):not(.button)::after, -.ui.ui.ui.ui.orange.loading .input > i.icon::after, -.ui.ui.ui.ui.orange.loading > i.icon::after, -.ui.ui.ui.orange.loader::after { - color: #f2711c; -} - -.ui.inverted.orange.elastic.loader::before, -.ui.ui.ui.inverted.orange.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.inverted.orange.elastic.loading .input > i.icon::before, -.ui.ui.ui.inverted.orange.elastic.loading > i.icon::before, -.ui.ui.ui.ui.inverted.orange.loading:not(.usual)::after, -.ui.ui.ui.ui.inverted.orange.loading .input > i.icon::after, -.ui.ui.ui.ui.inverted.orange.loading > i.icon::after, -.ui.ui.ui.inverted.orange.loader::after { - color: #ff851b; -} - -.ui.ui.yellow.elastic.loader::before, -.ui.yellow.basic.elastic.loading.button::before, -.ui.yellow.basic.elastic.loading.button::after, -.ui.ui.ui.yellow.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.yellow.elastic.loading .input > i.icon::before, -.ui.ui.ui.ui.yellow.elastic.loading > i.icon::before, -.ui.ui.ui.ui.yellow.loading:not(.usual):not(.button)::after, -.ui.ui.ui.ui.yellow.loading .input > i.icon::after, -.ui.ui.ui.ui.yellow.loading > i.icon::after, -.ui.ui.ui.yellow.loader::after { - color: #fbbd08; -} - -.ui.inverted.yellow.elastic.loader::before, -.ui.ui.ui.inverted.yellow.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.inverted.yellow.elastic.loading .input > i.icon::before, -.ui.ui.ui.inverted.yellow.elastic.loading > i.icon::before, -.ui.ui.ui.ui.inverted.yellow.loading:not(.usual)::after, -.ui.ui.ui.ui.inverted.yellow.loading .input > i.icon::after, -.ui.ui.ui.ui.inverted.yellow.loading > i.icon::after, -.ui.ui.ui.inverted.yellow.loader::after { - color: #ffe21f; -} - -.ui.ui.olive.elastic.loader::before, -.ui.olive.basic.elastic.loading.button::before, -.ui.olive.basic.elastic.loading.button::after, -.ui.ui.ui.olive.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.olive.elastic.loading .input > i.icon::before, -.ui.ui.ui.ui.olive.elastic.loading > i.icon::before, -.ui.ui.ui.ui.olive.loading:not(.usual):not(.button)::after, -.ui.ui.ui.ui.olive.loading .input > i.icon::after, -.ui.ui.ui.ui.olive.loading > i.icon::after, -.ui.ui.ui.olive.loader::after { - color: #b5cc18; -} - -.ui.inverted.olive.elastic.loader::before, -.ui.ui.ui.inverted.olive.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.inverted.olive.elastic.loading .input > i.icon::before, -.ui.ui.ui.inverted.olive.elastic.loading > i.icon::before, -.ui.ui.ui.ui.inverted.olive.loading:not(.usual)::after, -.ui.ui.ui.ui.inverted.olive.loading .input > i.icon::after, -.ui.ui.ui.ui.inverted.olive.loading > i.icon::after, -.ui.ui.ui.inverted.olive.loader::after { - color: #d9e778; -} - -.ui.ui.green.elastic.loader::before, -.ui.green.basic.elastic.loading.button::before, -.ui.green.basic.elastic.loading.button::after, -.ui.ui.ui.green.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.green.elastic.loading .input > i.icon::before, -.ui.ui.ui.ui.green.elastic.loading > i.icon::before, -.ui.ui.ui.ui.green.loading:not(.usual):not(.button)::after, -.ui.ui.ui.ui.green.loading .input > i.icon::after, -.ui.ui.ui.ui.green.loading > i.icon::after, -.ui.ui.ui.green.loader::after { - color: #21ba45; -} - -.ui.inverted.green.elastic.loader::before, -.ui.ui.ui.inverted.green.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.inverted.green.elastic.loading .input > i.icon::before, -.ui.ui.ui.inverted.green.elastic.loading > i.icon::before, -.ui.ui.ui.ui.inverted.green.loading:not(.usual)::after, -.ui.ui.ui.ui.inverted.green.loading .input > i.icon::after, -.ui.ui.ui.ui.inverted.green.loading > i.icon::after, -.ui.ui.ui.inverted.green.loader::after { - color: #2ecc40; -} - -.ui.ui.teal.elastic.loader::before, -.ui.teal.basic.elastic.loading.button::before, -.ui.teal.basic.elastic.loading.button::after, -.ui.ui.ui.teal.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.teal.elastic.loading .input > i.icon::before, -.ui.ui.ui.ui.teal.elastic.loading > i.icon::before, -.ui.ui.ui.ui.teal.loading:not(.usual):not(.button)::after, -.ui.ui.ui.ui.teal.loading .input > i.icon::after, -.ui.ui.ui.ui.teal.loading > i.icon::after, -.ui.ui.ui.teal.loader::after { - color: #00b5ad; -} - -.ui.inverted.teal.elastic.loader::before, -.ui.ui.ui.inverted.teal.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.inverted.teal.elastic.loading .input > i.icon::before, -.ui.ui.ui.inverted.teal.elastic.loading > i.icon::before, -.ui.ui.ui.ui.inverted.teal.loading:not(.usual)::after, -.ui.ui.ui.ui.inverted.teal.loading .input > i.icon::after, -.ui.ui.ui.ui.inverted.teal.loading > i.icon::after, -.ui.ui.ui.inverted.teal.loader::after { - color: #6dffff; -} - -.ui.ui.blue.elastic.loader::before, -.ui.blue.basic.elastic.loading.button::before, -.ui.blue.basic.elastic.loading.button::after, -.ui.ui.ui.blue.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.blue.elastic.loading .input > i.icon::before, -.ui.ui.ui.ui.blue.elastic.loading > i.icon::before, -.ui.ui.ui.ui.blue.loading:not(.usual):not(.button)::after, -.ui.ui.ui.ui.blue.loading .input > i.icon::after, -.ui.ui.ui.ui.blue.loading > i.icon::after, -.ui.ui.ui.blue.loader::after { - color: #2185d0; -} - -.ui.inverted.blue.elastic.loader::before, -.ui.ui.ui.inverted.blue.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.inverted.blue.elastic.loading .input > i.icon::before, -.ui.ui.ui.inverted.blue.elastic.loading > i.icon::before, -.ui.ui.ui.ui.inverted.blue.loading:not(.usual)::after, -.ui.ui.ui.ui.inverted.blue.loading .input > i.icon::after, -.ui.ui.ui.ui.inverted.blue.loading > i.icon::after, -.ui.ui.ui.inverted.blue.loader::after { - color: #54c8ff; -} - -.ui.ui.violet.elastic.loader::before, -.ui.violet.basic.elastic.loading.button::before, -.ui.violet.basic.elastic.loading.button::after, -.ui.ui.ui.violet.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.violet.elastic.loading .input > i.icon::before, -.ui.ui.ui.ui.violet.elastic.loading > i.icon::before, -.ui.ui.ui.ui.violet.loading:not(.usual):not(.button)::after, -.ui.ui.ui.ui.violet.loading .input > i.icon::after, -.ui.ui.ui.ui.violet.loading > i.icon::after, -.ui.ui.ui.violet.loader::after { - color: #6435c9; -} - -.ui.inverted.violet.elastic.loader::before, -.ui.ui.ui.inverted.violet.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.inverted.violet.elastic.loading .input > i.icon::before, -.ui.ui.ui.inverted.violet.elastic.loading > i.icon::before, -.ui.ui.ui.ui.inverted.violet.loading:not(.usual)::after, -.ui.ui.ui.ui.inverted.violet.loading .input > i.icon::after, -.ui.ui.ui.ui.inverted.violet.loading > i.icon::after, -.ui.ui.ui.inverted.violet.loader::after { - color: #a291fb; -} - -.ui.ui.purple.elastic.loader::before, -.ui.purple.basic.elastic.loading.button::before, -.ui.purple.basic.elastic.loading.button::after, -.ui.ui.ui.purple.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.purple.elastic.loading .input > i.icon::before, -.ui.ui.ui.ui.purple.elastic.loading > i.icon::before, -.ui.ui.ui.ui.purple.loading:not(.usual):not(.button)::after, -.ui.ui.ui.ui.purple.loading .input > i.icon::after, -.ui.ui.ui.ui.purple.loading > i.icon::after, -.ui.ui.ui.purple.loader::after { - color: #a333c8; -} - -.ui.inverted.purple.elastic.loader::before, -.ui.ui.ui.inverted.purple.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.inverted.purple.elastic.loading .input > i.icon::before, -.ui.ui.ui.inverted.purple.elastic.loading > i.icon::before, -.ui.ui.ui.ui.inverted.purple.loading:not(.usual)::after, -.ui.ui.ui.ui.inverted.purple.loading .input > i.icon::after, -.ui.ui.ui.ui.inverted.purple.loading > i.icon::after, -.ui.ui.ui.inverted.purple.loader::after { - color: #dc73ff; -} - -.ui.ui.pink.elastic.loader::before, -.ui.pink.basic.elastic.loading.button::before, -.ui.pink.basic.elastic.loading.button::after, -.ui.ui.ui.pink.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.pink.elastic.loading .input > i.icon::before, -.ui.ui.ui.ui.pink.elastic.loading > i.icon::before, -.ui.ui.ui.ui.pink.loading:not(.usual):not(.button)::after, -.ui.ui.ui.ui.pink.loading .input > i.icon::after, -.ui.ui.ui.ui.pink.loading > i.icon::after, -.ui.ui.ui.pink.loader::after { - color: #e03997; -} - -.ui.inverted.pink.elastic.loader::before, -.ui.ui.ui.inverted.pink.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.inverted.pink.elastic.loading .input > i.icon::before, -.ui.ui.ui.inverted.pink.elastic.loading > i.icon::before, -.ui.ui.ui.ui.inverted.pink.loading:not(.usual)::after, -.ui.ui.ui.ui.inverted.pink.loading .input > i.icon::after, -.ui.ui.ui.ui.inverted.pink.loading > i.icon::after, -.ui.ui.ui.inverted.pink.loader::after { - color: #ff8edf; -} - -.ui.ui.brown.elastic.loader::before, -.ui.brown.basic.elastic.loading.button::before, -.ui.brown.basic.elastic.loading.button::after, -.ui.ui.ui.brown.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.brown.elastic.loading .input > i.icon::before, -.ui.ui.ui.ui.brown.elastic.loading > i.icon::before, -.ui.ui.ui.ui.brown.loading:not(.usual):not(.button)::after, -.ui.ui.ui.ui.brown.loading .input > i.icon::after, -.ui.ui.ui.ui.brown.loading > i.icon::after, -.ui.ui.ui.brown.loader::after { - color: #a5673f; -} - -.ui.inverted.brown.elastic.loader::before, -.ui.ui.ui.inverted.brown.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.inverted.brown.elastic.loading .input > i.icon::before, -.ui.ui.ui.inverted.brown.elastic.loading > i.icon::before, -.ui.ui.ui.ui.inverted.brown.loading:not(.usual)::after, -.ui.ui.ui.ui.inverted.brown.loading .input > i.icon::after, -.ui.ui.ui.ui.inverted.brown.loading > i.icon::after, -.ui.ui.ui.inverted.brown.loader::after { - color: #d67c1c; -} - -.ui.ui.grey.elastic.loader::before, -.ui.grey.basic.elastic.loading.button::before, -.ui.grey.basic.elastic.loading.button::after, -.ui.ui.ui.grey.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.grey.elastic.loading .input > i.icon::before, -.ui.ui.ui.ui.grey.elastic.loading > i.icon::before, -.ui.ui.ui.ui.grey.loading:not(.usual):not(.button)::after, -.ui.ui.ui.ui.grey.loading .input > i.icon::after, -.ui.ui.ui.ui.grey.loading > i.icon::after, -.ui.ui.ui.grey.loader::after { - color: #767676; -} - -.ui.inverted.grey.elastic.loader::before, -.ui.ui.ui.inverted.grey.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.inverted.grey.elastic.loading .input > i.icon::before, -.ui.ui.ui.inverted.grey.elastic.loading > i.icon::before, -.ui.ui.ui.ui.inverted.grey.loading:not(.usual)::after, -.ui.ui.ui.ui.inverted.grey.loading .input > i.icon::after, -.ui.ui.ui.ui.inverted.grey.loading > i.icon::after, -.ui.ui.ui.inverted.grey.loader::after { - color: #dcddde; -} - -.ui.ui.black.elastic.loader::before, -.ui.black.basic.elastic.loading.button::before, -.ui.black.basic.elastic.loading.button::after, -.ui.ui.ui.black.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.black.elastic.loading .input > i.icon::before, -.ui.ui.ui.ui.black.elastic.loading > i.icon::before, -.ui.ui.ui.ui.black.loading:not(.usual):not(.button)::after, -.ui.ui.ui.ui.black.loading .input > i.icon::after, -.ui.ui.ui.ui.black.loading > i.icon::after, -.ui.ui.ui.black.loader::after { - color: #1b1c1d; -} - -.ui.inverted.black.elastic.loader::before, -.ui.ui.ui.inverted.black.elastic.loading:not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.inverted.black.elastic.loading .input > i.icon::before, -.ui.ui.ui.inverted.black.elastic.loading > i.icon::before, -.ui.ui.ui.ui.inverted.black.loading:not(.usual)::after, -.ui.ui.ui.ui.inverted.black.loading .input > i.icon::after, -.ui.ui.ui.ui.inverted.black.loading > i.icon::after, -.ui.ui.ui.inverted.black.loader::after { - color: #545454; -} - -.ui.ui.elastic.loader::before, -.ui.ui.ui.elastic.loading::before, -.ui.ui.ui.elastic.loading .input > i.icon::before, -.ui.ui.ui.elastic.loading > i.icon::before, -.ui.ui.ui.ui.loading:not(.usual)::after, -.ui.ui.ui.ui.loading .input > i.icon::after, -.ui.ui.ui.ui.loading > i.icon::after, -.ui.ui.ui.loader::after { - border-color: currentColor; -} - -.ui.ui.ui.ui.elastic.loading.button:not(.inverted):not(.basic)::before { - color: #fff; -} - -.ui.elastic.basic.loading.button::before, -.ui.elastic.basic.loading.button::after { - color: #767676; -} - -.ui.ui.ui.ui.double.loading.button::after { - border-bottom-color: currentColor; -} - -/* ------------------- - Inline - -------------------- */ - -.ui.inline.loader { - position: relative; - vertical-align: middle; - margin: 0; - left: 0; - top: 0; - transform: none; -} - -.ui.inline.loader.active, -.ui.inline.loader.visible { - display: inline-block; -} - -/* Centered Inline */ - -.ui.centered.inline.loader.active, -.ui.centered.inline.loader.visible { - display: block; - margin-left: auto; - margin-right: auto; -} - -.ui.ui.ui.ui.ui.ui.loading::after, -.ui.ui.ui.ui.ui.ui.loading .input > i.icon::after, -.ui.ui.ui.ui.ui.ui.loading > i.icon::after, -.ui.ui.ui.ui.ui.loader::after { - border-left-color: transparent; - border-right-color: transparent; -} - -.ui.ui.ui.ui.ui.ui.ui.loading:not(.double)::after, -.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) .input > i.icon::after, -.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) > i.icon::after, -.ui.ui.ui.ui.ui.ui.loader:not(.double)::after { - border-bottom-color: transparent; -} - -.ui.ui.ui.ui.ui.ui.loading.card::after, -.ui.ui.ui.ui.ui.ui.loading.segments::after, -.ui.ui.ui.ui.ui.ui.loading.segment::after, -.ui.ui.ui.ui.ui.ui.loading.form::after { - border-left-color: rgba(0, 0, 0, 0.1); - border-right-color: rgba(0, 0, 0, 0.1); -} - -.ui.ui.ui.ui.ui.ui.loading.card:not(.double)::after, -.ui.ui.ui.ui.ui.ui.loading.segments:not(.double)::after, -.ui.ui.ui.ui.ui.ui.loading.segment:not(.double)::after, -.ui.ui.ui.ui.ui.ui.loading.form:not(.double)::after { - border-bottom-color: rgba(0, 0, 0, 0.1); -} - -/* ------------------- - Elastic - -------------------- */ - -.ui.dimmer > .ui.elastic.loader { - color: #fff; -} - -.ui.inverted.dimmer > .ui.elastic.loader { - color: #767676; -} - -.ui.ui.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after, -.ui.ui.elastic.loading .input > i.icon::after, -.ui.ui.elastic.loading > i.icon::after, -.ui.ui.elastic.loader::after { - animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); - animation-delay: 0.3s; -} - -.ui.ui.ui.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.elastic.loading .input > i.icon::before, -.ui.ui.ui.elastic.loading > i.icon::before, -.ui.ui.elastic.loader::before { - animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); - -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); - border-right-color: transparent; -} - -.ui.elastic.inline.loader:empty { - animation: loader 8s infinite linear; -} - -.ui.ui.slow.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after, -.ui.ui.slow.elastic.loading .input > i.icon::after, -.ui.ui.slow.elastic.loading > i.icon::after, -.ui.ui.slow.elastic.loader::after { - animation-duration: 1.5s; - animation-delay: 0.45s; -} - -.ui.ui.ui.slow.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.slow.elastic.loading .input > i.icon::before, -.ui.ui.ui.slow.elastic.loading > i.icon::before, -.ui.ui.slow.elastic.loader::before { - animation-duration: 1.5s; -} - -.ui.ui.fast.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after, -.ui.ui.fast.elastic.loading .input > i.icon::after, -.ui.ui.fast.elastic.loading > i.icon::after, -.ui.ui.fast.elastic.loader::after { - animation-duration: 0.66s; - animation-delay: 0.2s; -} - -.ui.ui.ui.fast.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before, -.ui.ui.ui.fast.elastic.loading .input > i.icon::before, -.ui.ui.ui.fast.elastic.loading > i.icon::before, -.ui.ui.fast.elastic.loader::before { - animation-duration: 0.66s; -} - -@keyframes elastic-loader { - 0%, 1% { - border-left-color: transparent; - border-bottom-color: transparent; - } - - 1.1%, 50% { - border-left-color: inherit; - } - - 10%, 35.1% { - border-bottom-color: transparent; - } - - 10.1%, 35% { - border-bottom-color: inherit; - } - - 50.1% { - border-left-color: transparent; - } - - 100% { - border-left-color: transparent; - border-bottom-color: transparent; - transform: rotate(360deg); - } -} - -@keyframes currentcolor-elastic-loader { - 0%, 1% { - border-left-color: transparent; - border-bottom-color: transparent; - } - - 1.1%, 50% { - border-left-color: currentColor; - } - - 10%, 35.1% { - border-bottom-color: transparent; - } - - 10.1%, 35% { - border-bottom-color: currentColor; - } - - 50.1% { - border-left-color: transparent; - } - - 100% { - border-left-color: transparent; - border-bottom-color: transparent; - transform: rotate(360deg); - } -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Segment - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Segment -*******************************/ - -.ui.segment { - position: relative; - background: #fff; - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); - margin: 1rem 0; - padding: 1em 1em; - border-radius: 0.28571429rem; - border: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.segment:first-child { - margin-top: 0; -} - -.ui.segment:last-child { - margin-bottom: 0; -} - -/* Vertical */ - -.ui.vertical.segment { - margin: 0; - padding-left: 0; - padding-right: 0; - background: none transparent; - border-radius: 0; - box-shadow: none; - border: none; - border-top: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.vertical.segment:first-child { - border-top: none; -} - -/* ------------------- - Loose Coupling --------------------- */ - -/* Header */ - -.ui.inverted.segments .segment > .ui.header .sub.header, -.ui.inverted.segments .segment > .ui.header, -.ui.inverted.segment > .ui.header .sub.header, -.ui.inverted.segment > .ui.header { - color: #fff; -} - -/* Label */ - -.ui[class*="bottom attached"].segment > [class*="top attached"].label { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.ui[class*="top attached"].segment > [class*="bottom attached"].label { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -.ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -/* Grid */ - -.ui.page.grid.segment, -.ui.grid > .row > .ui.segment.column, -.ui.grid > .ui.segment.column { - padding-top: 2em; - padding-bottom: 2em; -} - -.ui.grid.segment { - margin: 1rem 0; - border-radius: 0.28571429rem; -} - -/* Table */ - -.ui.basic.table.segment { - background: #fff; - border: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); -} - -.ui[class*="very basic"].table.segment { - padding: 1em 1em; -} - -/* Tab */ - -.ui.segment.tab:last-child { - margin-bottom: 1rem; -} - -/******************************* - Types -*******************************/ - -/* ------------------- - Placeholder - -------------------- */ - -.ui.placeholder.segment { - display: flex; - flex-direction: column; - justify-content: center; - align-items: stretch; - max-width: initial; - animation: none; - overflow: visible; - padding: 1em 1em; - min-height: 18rem; - background: #f9fafb; - border-color: rgba(34, 36, 38, 0.15); - box-shadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset; -} - -.ui.placeholder.segment.tab { - display: none; -} - -.ui.placeholder.segment.tab.active { - display: flex; -} - -.ui.placeholder.segment .button, -.ui.placeholder.segment textarea { - display: block; -} - -.ui.placeholder.segment .field, -.ui.placeholder.segment textarea, -.ui.placeholder.segment > .ui.input, -.ui.placeholder.segment .button { - max-width: 15rem; - margin-left: auto; - margin-right: auto; -} - -.ui.placeholder.segment .column .button, -.ui.placeholder.segment .column .field, -.ui.placeholder.segment .column textarea, -.ui.placeholder.segment .column > .ui.input { - max-width: 15rem; - margin-left: auto; - margin-right: auto; -} - -.ui.placeholder.segment > .inline { - align-self: center; -} - -.ui.placeholder.segment > .inline > .button { - display: inline-block; - width: auto; - margin: 0 0.35714286rem 0 0; -} - -.ui.placeholder.segment > .inline > .button:last-child { - margin-right: 0; -} - -/* ------------------- - Piled - -------------------- */ - -.ui.piled.segments, -.ui.piled.segment { - margin: 3em 0; - box-shadow: ""; - z-index: auto; - background-color: #fff; - border: 1px solid rgba(34, 36, 38, 0.15); - color: rgba(0, 0, 0, 0.87); -} - -.ui.piled.segment:first-child { - margin-top: 0; -} - -.ui.piled.segment:last-child { - margin-bottom: 0; -} - -.ui.piled.segments::after, -.ui.piled.segments::before, -.ui.piled.segment::after, -.ui.piled.segment::before { - background-color: inherit; - visibility: visible; - content: ""; - display: block; - height: 100%; - left: 0; - position: absolute; - width: 100%; - border: inherit; - box-shadow: ""; -} - -.ui.inverted.piled.segment { - background-color: #1b1c1d; - border: 1px solid #555; - color: rgba(255, 255, 255, 0.9); -} - -.ui.piled.segments::before, -.ui.piled.segment::before { - transform: rotate(-1.2deg); - top: 0; - z-index: -2; -} - -.ui.piled.segments::after, -.ui.piled.segment::after { - transform: rotate(1.2deg); - top: 0; - z-index: -1; -} - -/* Piled Attached */ - -.ui[class*="top attached"].piled.segment { - margin-top: 3em; - margin-bottom: 0; -} - -.ui.piled.segment[class*="top attached"]:first-child { - margin-top: 0; -} - -.ui.piled.segment[class*="bottom attached"] { - margin-top: 0; - margin-bottom: 3em; -} - -.ui.piled.segment[class*="bottom attached"]:last-child { - margin-bottom: 0; -} - -@supports selector(:has(.f)) { - *:has(> .ui.piled.segment) { - z-index: 0; - position: relative; - } -} - -/* ------------------- - Stacked - -------------------- */ - -.ui.stacked.segment { - padding-bottom: 1.4em; -} - -.ui.stacked.segments::before, -.ui.stacked.segments::after, -.ui.stacked.segment::before, -.ui.stacked.segment::after { - content: ""; - position: absolute; - bottom: -3px; - left: 0; - border-top: 1px solid rgba(34, 36, 38, 0.15); - background: rgba(0, 0, 0, 0.03); - width: 100%; - height: 6px; - visibility: visible; -} - -.ui.stacked.segments::before, -.ui.stacked.segment::before { - display: none; -} - -/* Add additional page */ - -.ui.tall.stacked.segments::before, -.ui.tall.stacked.segment::before { - display: block; - bottom: 0; -} - -/* Inverted */ - -.ui.stacked.inverted.segments, -.ui.stacked.inverted.segment { - border: 1px solid rgba(225, 225, 225, 0.5); -} - -.ui.stacked.inverted.segments::before, -.ui.stacked.inverted.segment::before, -.ui.stacked.inverted.segments::after, -.ui.stacked.inverted.segment::after { - background-color: rgba(0, 0, 0, 0.03); - border-top: 1px solid rgba(225, 225, 225, 0.5); -} - -/* ------------------- - Padded - -------------------- */ - -.ui.padded.segment { - padding: 1.5em; -} - -.ui[class*="very padded"].segment { - padding: 3em; -} - -/* Padded vertical */ - -.ui.padded.segment.vertical.segment, -.ui[class*="very padded"].vertical.segment { - padding-left: 0; - padding-right: 0; -} - -/* ------------------- - Compact - -------------------- */ - -.ui.compact.segment { - display: table; -} - -/* Compact Group */ - -.ui.compact.segments { - display: inline-flex; -} - -.ui.compact.segments .segment, -.ui.segments .compact.segment { - display: block; - flex: 0 1 auto; -} - -/* ------------------- - Circular - -------------------- */ - -.ui.circular.segment { - display: table-cell; - padding: 2em; - text-align: center; - vertical-align: middle; - border-radius: 500em; -} - -/* ------------------- - Raised - -------------------- */ - -.ui.ui.raised.segments, -.ui.ui.raised.segment { - box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); -} - -.ui.ui.inverted.raised.segments, -.ui.ui.inverted.raised.segment { - box-shadow: 0 2px 4px 0 rgba(225, 225, 225, 0.1), 0 2px 10px 0 rgba(225, 225, 225, 0.5); -} - -/******************************* - Groups - *******************************/ - -/* Group */ - -.ui.segments { - flex-direction: column; - position: relative; - margin: 1rem 0; - border: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); - border-radius: 0.28571429rem; -} - -.ui.segments:first-child { - margin-top: 0; -} - -.ui.segments:last-child { - margin-bottom: 0; -} - -/* Nested Segment */ - -.ui.segments > .segment { - top: 0; - bottom: 0; - border-radius: 0; - margin: 0; - width: auto; - box-shadow: none; - border: none; - border-top: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.segments:not(.horizontal) > .segment:first-child { - top: 0; - bottom: 0; - border-top: none; - margin-top: 0; - margin-bottom: 0; - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -/* Bottom */ - -.ui.segments:not(.horizontal) > .segment:last-child { - top: 0; - bottom: 0; - margin-top: 0; - margin-bottom: 0; - box-shadow: 0 2px 1px -1px rgba(34, 36, 38, 0.15); - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -/* Only */ - -.ui.segments:not(.horizontal) > .segment:only-child { - border-radius: 0.28571429rem; -} - -/* Nested Group */ - -.ui.segments > .ui.segments { - border-top: 1px solid rgba(34, 36, 38, 0.15); - margin: 1rem; -} - -.ui.segments > .segments:first-child { - border-top: none; -} - -.ui.segments > .segment + .segments:not(.horizontal) { - margin-top: 0; -} - -/* Horizontal Group */ - -.ui.horizontal.segments { - display: flex; - flex-direction: row; - background-color: transparent; - padding: 0; - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); - margin: 1rem 0; - border-radius: 0.28571429rem; - border: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.wrapping.horizontal.segments, -.ui.stackable.horizontal.segments { - flex-wrap: wrap; -} - -/* Nested Horizontal Group */ - -.ui.segments > .horizontal.segments { - margin: 0; - background-color: transparent; - border-radius: 0; - border: none; - box-shadow: none; - border-top: 1px solid rgba(34, 36, 38, 0.15); -} - -/* Horizontal Segment */ - -.ui.horizontal.segments:not(.compact) > .segment:not(.compact) { - flex: 1 1 auto; - -ms-flex: 1 1 0; -} - -.ui.horizontal.segments > .segment { - margin: 0; - min-width: 0; - border-radius: 0; - border: none; - box-shadow: none; - border-left: 1px solid rgba(34, 36, 38, 0.15); -} - -/* Border Fixes */ - -.ui.segments > .horizontal.segments:first-child { - border-top: none; -} - -.ui.horizontal.segments:not(.stackable):not(.wrapping) > .segment:first-child { - border-left: none; -} - -.ui.horizontal.segments > .segment:first-child { - border-radius: 0.28571429rem 0 0 0.28571429rem; -} - -.ui.horizontal.segments > .segment:last-child { - border-radius: 0 0.28571429rem 0.28571429rem 0; -} - -/* Equal Width */ - -.ui[class*="equal width"].horizontal.segments > .segment { - width: 100%; -} - -/******************************* - States -*******************************/ - -/* -------------- - Disabled - --------------- */ - -.ui.disabled.segments, -.ui.disabled.segment { - opacity: 0.45; - color: rgba(40, 40, 40, 0.3); - pointer-events: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -/* -------------- - Loading - --------------- */ - -.ui.loading.segments, -.ui.loading.segment { - position: relative; - cursor: default; - pointer-events: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - transition: all 0s linear; - min-height: 4.5em; -} - -.ui.loading.segments::before, -.ui.loading.segment::before { - position: absolute; - content: ""; - top: 0; - left: 0; - background: rgba(255, 255, 255, 0.8); - width: 100%; - height: 100%; - border-radius: 0.28571429rem; - z-index: 100; -} - -.ui.loading.segments::after, -.ui.loading.segment::after { - position: absolute; - content: ""; - top: 50%; - left: 50%; - margin: -1.5em 0 0 -1.5em; - width: 3em; - height: 3em; - animation: loader 0.6s infinite linear; - border: 0.2em solid #767676; - border-radius: 500rem; - box-shadow: 0 0 0 1px transparent; - visibility: visible; - z-index: 101; -} - -/******************************* - Variations -*******************************/ - -/* ------------------- - Basic - -------------------- */ - -.ui.basic.segment, -.ui.segments .ui.basic.segment, -.ui.basic.segments { - background: none transparent; - box-shadow: none; - border: none; - border-radius: 0; -} - -/* ------------------- - Clearing - -------------------- */ - -.ui.clearing.segment::after { - content: ""; - display: block; - clear: both; -} - -/* ------------------- - Colors --------------------- */ - -.ui.ui.ui.ui.ui.red.segment:not(.inverted) { - border-top: 2px solid #db2828; -} - -.ui.ui.ui.ui.ui.inverted.red.segment { - background-color: #db2828; - color: #fff; -} - -.ui.ui.inverted.red.segment:not(.piled) { - border-color: #db2828; -} - -.ui.ui.ui.ui.ui.orange.segment:not(.inverted) { - border-top: 2px solid #f2711c; -} - -.ui.ui.ui.ui.ui.inverted.orange.segment { - background-color: #f2711c; - color: #fff; -} - -.ui.ui.inverted.orange.segment:not(.piled) { - border-color: #f2711c; -} - -.ui.ui.ui.ui.ui.yellow.segment:not(.inverted) { - border-top: 2px solid #fbbd08; -} - -.ui.ui.ui.ui.ui.inverted.yellow.segment { - background-color: #fbbd08; - color: #fff; -} - -.ui.ui.inverted.yellow.segment:not(.piled) { - border-color: #fbbd08; -} - -.ui.ui.ui.ui.ui.olive.segment:not(.inverted) { - border-top: 2px solid #b5cc18; -} - -.ui.ui.ui.ui.ui.inverted.olive.segment { - background-color: #b5cc18; - color: #fff; -} - -.ui.ui.inverted.olive.segment:not(.piled) { - border-color: #b5cc18; -} - -.ui.ui.ui.ui.ui.green.segment:not(.inverted) { - border-top: 2px solid #21ba45; -} - -.ui.ui.ui.ui.ui.inverted.green.segment { - background-color: #21ba45; - color: #fff; -} - -.ui.ui.inverted.green.segment:not(.piled) { - border-color: #21ba45; -} - -.ui.ui.ui.ui.ui.teal.segment:not(.inverted) { - border-top: 2px solid #00b5ad; -} - -.ui.ui.ui.ui.ui.inverted.teal.segment { - background-color: #00b5ad; - color: #fff; -} - -.ui.ui.inverted.teal.segment:not(.piled) { - border-color: #00b5ad; -} - -.ui.ui.ui.ui.ui.blue.segment:not(.inverted) { - border-top: 2px solid #2185d0; -} - -.ui.ui.ui.ui.ui.inverted.blue.segment { - background-color: #2185d0; - color: #fff; -} - -.ui.ui.inverted.blue.segment:not(.piled) { - border-color: #2185d0; -} - -.ui.ui.ui.ui.ui.violet.segment:not(.inverted) { - border-top: 2px solid #6435c9; -} - -.ui.ui.ui.ui.ui.inverted.violet.segment { - background-color: #6435c9; - color: #fff; -} - -.ui.ui.inverted.violet.segment:not(.piled) { - border-color: #6435c9; -} - -.ui.ui.ui.ui.ui.purple.segment:not(.inverted) { - border-top: 2px solid #a333c8; -} - -.ui.ui.ui.ui.ui.inverted.purple.segment { - background-color: #a333c8; - color: #fff; -} - -.ui.ui.inverted.purple.segment:not(.piled) { - border-color: #a333c8; -} - -.ui.ui.ui.ui.ui.pink.segment:not(.inverted) { - border-top: 2px solid #e03997; -} - -.ui.ui.ui.ui.ui.inverted.pink.segment { - background-color: #e03997; - color: #fff; -} - -.ui.ui.inverted.pink.segment:not(.piled) { - border-color: #e03997; -} - -.ui.ui.ui.ui.ui.brown.segment:not(.inverted) { - border-top: 2px solid #a5673f; -} - -.ui.ui.ui.ui.ui.inverted.brown.segment { - background-color: #a5673f; - color: #fff; -} - -.ui.ui.inverted.brown.segment:not(.piled) { - border-color: #a5673f; -} - -.ui.ui.ui.ui.ui.grey.segment:not(.inverted) { - border-top: 2px solid #767676; -} - -.ui.ui.ui.ui.ui.inverted.grey.segment { - background-color: #767676; - color: #fff; -} - -.ui.ui.inverted.grey.segment:not(.piled) { - border-color: #767676; -} - -.ui.ui.ui.ui.ui.black.segment:not(.inverted) { - border-top: 2px solid #1b1c1d; -} - -.ui.ui.ui.ui.ui.inverted.black.segment { - background-color: #1b1c1d; - color: #fff; -} - -.ui.ui.inverted.black.segment:not(.piled) { - border-color: #1b1c1d; -} - -/* ------------------- - Aligned - -------------------- */ - -.ui[class*="left aligned"].segment { - text-align: left; -} - -.ui[class*="right aligned"].segment { - text-align: right; -} - -.ui[class*="center aligned"].segment { - text-align: center; -} - -/* ------------------- - Floated - -------------------- */ - -.ui.floated.segment, -.ui[class*="left floated"].segment { - float: left; - margin-right: 1em; -} - -.ui[class*="right floated"].segment { - float: right; - margin-left: 1em; -} - -/* ------------------- - Inverted - -------------------- */ - -.ui.inverted.segments, -.ui.inverted.segments .segment, -.ui.inverted.segment { - border: none; - box-shadow: none; -} - -.ui.inverted.segments .segment, -.ui.inverted.segment, -.ui.primary.inverted.segment { - background: #1b1c1d; - color: rgba(255, 255, 255, 0.9); -} - -/* Nested */ - -.ui.inverted.segment .segment { - color: rgba(0, 0, 0, 0.87); -} - -.ui.inverted.segment .inverted.segment { - color: rgba(255, 255, 255, 0.9); -} - -/* Attached */ - -.ui.ui.inverted.attached.segment { - border-color: #555; -} - -/* Loading */ - -.ui.inverted.loading.segments, -.ui.inverted.loading.segment { - color: #fff; -} - -.ui.inverted.loading.segments::before, -.ui.inverted.loading.segment::before { - background: rgba(0, 0, 0, 0.85); -} - -/* ------------------- - Emphasis --------------------- */ - -/* Secondary */ - -.ui.secondary.segment { - background: #f3f4f5; - color: rgba(0, 0, 0, 0.6); -} - -.ui.secondary.inverted.segment { - background: #4c4f52 linear-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.2) 100%); - color: rgba(255, 255, 255, 0.8); -} - -/* Tertiary */ - -.ui.tertiary.segment { - background: #dcddde; - color: rgba(0, 0, 0, 0.6); -} - -.ui.tertiary.inverted.segment { - background: #717579 linear-gradient(rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0.35) 100%); - color: rgba(255, 255, 255, 0.8); -} - -/* ------------------- - Attached - -------------------- */ - -/* Middle */ - -.ui.attached.segment { - top: 0; - bottom: 0; - border-radius: 0; - margin: 0 -1px; - width: calc(100% + 2px); - max-width: calc(100% + 2px); - box-shadow: none; -} - -.ui.attached.segment:not(.basic) { - border: 1px solid #d4d4d5; -} - -.ui.attached:not(.message):not(.text) + .ui.attached.segment:not(.top):not([class*="left attached"]):not([class*="right attached"]) { - border-top: none; -} - -/* Top */ - -.ui.segment[class*="top attached"] { - bottom: 0; - margin-bottom: 0; - top: 0; - margin-top: 1rem; - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui.segment[class*="top attached"]:first-child { - margin-top: 0; -} - -.ui.tab.segment[class*="top attached"]:first-child { - margin-top: 1rem; -} - -/* Bottom */ - -.ui.segment[class*="bottom attached"] { - bottom: 0; - margin-top: 0; - top: 0; - margin-bottom: 1rem; - box-shadow: 0 2px 1px -1px rgba(34, 36, 38, 0.15); - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -.ui.segment[class*="bottom attached"]:last-child { - margin-bottom: 0; -} - -.ui.tab.segment[class*="bottom attached"]:last-child { - margin-bottom: 1rem; -} - -.ui[class*="left attached"].segment { - margin-right: 0; -} - -.ui[class*="right attached"].segment { - margin-left: 0; -} - -.ui.seamless.attached.segment:not(.top):not(.bottom):not([class*="right attached"]):not([class*="left attached"]) { - border-top: none; - border-bottom: none; -} - -.ui.seamless.attached.segment.top { - border-bottom: none; -} - -.ui.seamless.attached.segment.bottom { - border-top: none; -} - -.ui.seamless.attached.segment[class*="left attached"] { - border-right: none; -} - -.ui.seamless.attached.segment[class*="right attached"] { - border-left: none; -} - -/* -------------- - Fitted - --------------- */ - -.ui.fitted.segment:not(.horizontally) { - padding-top: 0; - padding-bottom: 0; -} - -.ui.fitted.segment:not(.vertically) { - padding-left: 0; - padding-right: 0; -} - -/* -------------- - Scrolling - --------------- */ - -.ui.scrolling.segment { - overflow: auto; - -ms-scroll-chaining: none; - overscroll-behavior: none; -} - -@media only screen and (max-width: 767.98px) { - .ui.scrolling.segment.short { - max-height: 11.25em; - } - - .ui.scrolling.segment.short.resizable { - height: 11.25em; - } - - .ui.scrolling.segment[class*="very short"] { - max-height: 7.5em; - } - - .ui.scrolling.segment[class*="very short"].resizable { - height: 7.5em; - } - - .ui.scrolling.segment { - max-height: 15em; - } - - .ui.scrolling.segment.resizable { - height: 15em; - } - - .ui.scrolling.segment.long { - max-height: 30em; - } - - .ui.scrolling.segment.long.resizable { - height: 30em; - } - - .ui.scrolling.segment[class*="very long"] { - max-height: 45em; - } - - .ui.scrolling.segment[class*="very long"].resizable { - height: 45em; - } -} - -@media only screen and (min-width: 768px) { - .ui.scrolling.segment.short { - max-height: 13.5em; - } - - .ui.scrolling.segment.short.resizable { - height: 13.5em; - } - - .ui.scrolling.segment[class*="very short"] { - max-height: 9em; - } - - .ui.scrolling.segment[class*="very short"].resizable { - height: 9em; - } - - .ui.scrolling.segment { - max-height: 18em; - } - - .ui.scrolling.segment.resizable { - height: 18em; - } - - .ui.scrolling.segment.long { - max-height: 36em; - } - - .ui.scrolling.segment.long.resizable { - height: 36em; - } - - .ui.scrolling.segment[class*="very long"] { - max-height: 54em; - } - - .ui.scrolling.segment[class*="very long"].resizable { - height: 54em; - } -} - -@media only screen and (min-width: 992px) { - .ui.scrolling.segment.short { - max-height: 18em; - } - - .ui.scrolling.segment.short.resizable { - height: 18em; - } - - .ui.scrolling.segment[class*="very short"] { - max-height: 12em; - } - - .ui.scrolling.segment[class*="very short"].resizable { - height: 12em; - } - - .ui.scrolling.segment { - max-height: 24em; - } - - .ui.scrolling.segment.resizable { - height: 24em; - } - - .ui.scrolling.segment.long { - max-height: 48em; - } - - .ui.scrolling.segment.long.resizable { - height: 48em; - } - - .ui.scrolling.segment[class*="very long"] { - max-height: 72em; - } - - .ui.scrolling.segment[class*="very long"].resizable { - height: 72em; - } -} - -@media only screen and (min-width: 1920px) { - .ui.scrolling.segment.short { - max-height: 22.5em; - } - - .ui.scrolling.segment.short.resizable { - height: 22.5em; - } - - .ui.scrolling.segment[class*="very short"] { - max-height: 15em; - } - - .ui.scrolling.segment[class*="very short"].resizable { - height: 15em; - } - - .ui.scrolling.segment { - max-height: 30em; - } - - .ui.scrolling.segment.resizable { - height: 30em; - } - - .ui.scrolling.segment.long { - max-height: 60em; - } - - .ui.scrolling.segment.long.resizable { - height: 60em; - } - - .ui.scrolling.segment[class*="very long"] { - max-height: 90em; - } - - .ui.scrolling.segment[class*="very long"].resizable { - height: 90em; - } -} - -.ui.resizable.scrolling.segment { - resize: vertical; - max-height: none; -} - -/* ------------------- - Size --------------------- */ - -.ui.segments .segment, -.ui.segment { - font-size: 1rem; -} - -.ui.mini.segments .segment, -.ui.mini.segment { - font-size: 0.78571429rem; -} - -.ui.tiny.segments .segment, -.ui.tiny.segment { - font-size: 0.85714286rem; -} - -.ui.small.segments .segment, -.ui.small.segment { - font-size: 0.92857143rem; -} - -.ui.large.segments .segment, -.ui.large.segment { - font-size: 1.14285714rem; -} - -.ui.big.segments .segment, -.ui.big.segment { - font-size: 1.28571429rem; -} - -.ui.huge.segments .segment, -.ui.huge.segment { - font-size: 1.42857143rem; -} - -.ui.massive.segments .segment, -.ui.massive.segment { - font-size: 1.71428571rem; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Step - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Plural -*******************************/ - -.ui.steps { - display: inline-flex; - flex-direction: row; - align-items: stretch; - margin: 1em 0; - background: ""; - box-shadow: none; - line-height: 1.14285714em; - border-radius: 0.28571429rem; - border: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.steps:not(.unstackable) { - flex-wrap: wrap; -} - -/* First Steps */ - -.ui.steps:first-child { - margin-top: 0; -} - -/* Last Steps */ - -.ui.steps:last-child { - margin-bottom: 0; -} - -/******************************* - Singular -*******************************/ - -.ui.steps .step { - position: relative; - display: flex; - flex: 1 0 auto; - flex-flow: row wrap; - vertical-align: middle; - align-items: center; - justify-content: center; - margin: 0 0; - padding: 1.14285714em 2em; - background: #fff; - color: rgba(0, 0, 0, 0.87); - box-shadow: none; - border-radius: 0; - border: none; - border-right: 1px solid rgba(34, 36, 38, 0.15); - transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; -} - -/* Arrow */ - -.ui.steps .step::after { - display: none; - position: absolute; - z-index: 2; - content: ""; - top: 50%; - right: 0; - background-color: #fff; - width: 1.14285714em; - height: 1.14285714em; - border-style: solid; - border-color: rgba(34, 36, 38, 0.15); - border-width: 0 1px 1px 0; - transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; - transform: translateY(-50%) translateX(50%) rotate(-45deg); -} - -/* First Step */ - -.ui.steps .step:first-child { - padding-left: 2em; - border-radius: 0.28571429rem 0 0 0.28571429rem; -} - -/* Last Step */ - -.ui.steps .step:last-child { - border-radius: 0 0.28571429rem 0.28571429rem 0; - border-right: none; - margin-right: 0; -} - -/* Only Step */ - -.ui.steps .step:only-child { - border-radius: 0.28571429rem; -} - -/******************************* - Content -*******************************/ - -/* Title */ - -.ui.steps .step .title { - font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-size: 1.14285714em; - font-weight: bold; -} - -.ui.steps .step > .title { - width: 100%; -} - -/* Description */ - -.ui.steps .step .description { - font-weight: normal; - font-size: 0.92857143em; - color: rgba(0, 0, 0, 0.87); -} - -.ui.steps .step > .description { - width: 100%; -} - -.ui.steps .step .title ~ .description { - margin-top: 0.25em; -} - -/* Icon */ - -.ui.steps .step > i.icon { - line-height: 1; - font-size: 2.5em; - margin: 0 1rem 0 0; -} - -.ui.steps .step > i.icon, -.ui.steps .step > i.icon ~ .content { - display: block; - flex: 0 1 auto; - align-self: center; -} - -/* Horizontal Icon */ - -.ui.steps:not(.vertical) .step > i.icon { - width: auto; -} - -/* Link */ - -.ui.steps .link.step, -.ui.steps a.step { - cursor: pointer; -} - -/******************************* - Types -*******************************/ - -/* -------------- - Ordered - --------------- */ - -.ui.ordered.steps { - counter-reset: ordered; -} - -.ui.ordered.steps .step::before { - display: block; - position: static; - text-align: center; - content: counter(ordered); - align-self: center; - margin-right: 1rem; - font-size: 2.5em; - counter-increment: ordered; - font-family: inherit; - font-weight: bold; -} - -.ui.ordered.steps .step > * { - display: block; - align-self: center; -} - -/* -------------- - Vertical - --------------- */ - -.ui.vertical.steps { - display: inline-flex; - flex-direction: column; - overflow: visible; -} - -.ui.vertical.steps .step { - justify-content: flex-start; - border-radius: 0; - padding: 1.14285714em 2em; - border-right: none; - border-bottom: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.vertical.steps .step:first-child { - padding: 1.14285714em 2em; - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui.vertical.steps .step:last-child { - border-bottom: none; - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -.ui.vertical.steps .step:only-child { - border-radius: 0.28571429rem; -} - -/* Arrow */ - -.ui.vertical.steps .step::after { - top: 50%; - right: 0; - border-width: 0 1px 1px 0; - display: none; -} - -.ui.right.vertical.steps .step::after { - border-width: 1px 0 0 1px; - left: 0; - right: 100%; - transform: translateY(-50%) translateX(-50%) rotate(-45deg); -} - -.ui.vertical.steps .active.step::after { - display: block; -} - -.ui.vertical.steps .step:last-child::after { - display: none; -} - -.ui.vertical.steps .active.step:last-child::after { - display: block; -} - -/* --------------- - Responsive ----------------- */ - -/* Mobile (Default) */ - -@media only screen and (max-width: 767.98px) { - .ui.steps:not(.unstackable) { - display: inline-flex; - overflow: visible; - flex-direction: column; - } - - .ui.steps:not(.unstackable) .step { - width: 100% !important; - flex-direction: column; - border-radius: 0; - padding: 1.14285714em 2em; - border-right: none; - border-bottom: 1px solid rgba(34, 36, 38, 0.15); - } - - .ui.steps:not(.unstackable) .step:first-child { - padding: 1.14285714em 2em; - border-radius: 0.28571429rem 0.28571429rem 0 0; - } - - .ui.steps:not(.unstackable) .step:last-child { - border-radius: 0 0 0.28571429rem 0.28571429rem; - border-bottom: none; - } - - /* Arrow */ - - .ui.steps:not(.unstackable) .step::after { - top: unset; - bottom: -1.14285714em; - right: 50%; - transform: translateY(-50%) translateX(50%) rotate(45deg); - } - - .ui.vertical.steps .active.step:last-child::after { - display: none; - } - - /* Content */ - - .ui.steps:not(.unstackable) .step .content { - text-align: center; - } - - /* Icon */ - - .ui.steps:not(.unstackable) .step > i.icon, - .ui.ordered.steps:not(.unstackable) .step::before { - margin: 0 0 1rem 0; - } -} - -/******************************* - States -*******************************/ - -/* Link Hover */ - -.ui.steps .link.step:hover::after, -.ui.steps .link.step:hover, -.ui.steps a.step:hover::after, -.ui.steps a.step:hover { - background: #f9fafb; - color: rgba(0, 0, 0, 0.8); -} - -/* Link Down */ - -.ui.steps .link.step:active::after, -.ui.steps .link.step:active, -.ui.steps a.step:active::after, -.ui.steps a.step:active { - background: #f3f4f5; - color: rgba(0, 0, 0, 0.9); -} - -/* Active */ - -.ui.steps .step.active { - cursor: auto; - background: #f3f4f5; -} - -.ui.steps .step.active::after { - background: #f3f4f5; -} - -.ui.steps .step.active .title { - color: #4183c4; -} - -.ui.ordered.steps .step.active::before, -.ui.steps .active.step i.icon { - color: rgba(0, 0, 0, 0.85); -} - -/* Active Arrow */ - -.ui.steps .step::after { - display: block; -} - -.ui.steps .active.step::after { - display: block; -} - -.ui.steps .step:last-child::after { - display: none; -} - -.ui.steps .active.step:last-child::after { - display: none; -} - -/* Active Hover */ - -.ui.steps .link.active.step:hover::after, -.ui.steps .link.active.step:hover, -.ui.steps a.active.step:hover::after, -.ui.steps a.active.step:hover { - cursor: pointer; - background: #dcddde; - color: rgba(0, 0, 0, 0.87); -} - -/* Completed */ - -.ui.steps .step.completed > i.icon::before, -.ui.ordered.steps .step.completed::before { - color: #21ba45; -} - -/* Disabled */ - -.ui.steps .disabled.step { - cursor: auto; - background: #fff; - pointer-events: none; -} - -.ui.steps .disabled.step, -.ui.steps .disabled.step .title, -.ui.steps .disabled.step .description { - color: rgba(40, 40, 40, 0.3); -} - -.ui.steps .disabled.step::after { - background: #fff; -} - -/******************************* - Variations -*******************************/ - -/* -------------- - Stackable - --------------- */ - -/* Tablet Or Below */ - -@media only screen and (max-width: 991.98px) { - .ui[class*="tablet stackable"].steps { - display: inline-flex; - overflow: visible; - flex-direction: column; - } - - /* Steps */ - - .ui[class*="tablet stackable"].steps .step { - flex-direction: column; - border-radius: 0; - padding: 1.14285714em 2em; - border-right: none; - border-bottom: 1px solid rgba(34, 36, 38, 0.15); - } - - .ui[class*="tablet stackable"].steps .step:first-child { - padding: 1.14285714em 2em; - border-radius: 0.28571429rem 0.28571429rem 0 0; - } - - .ui[class*="tablet stackable"].steps .step:last-child { - border-radius: 0 0 0.28571429rem 0.28571429rem; - border-bottom: none; - } - - /* Arrow */ - - .ui[class*="tablet stackable"].steps .step::after { - top: unset; - bottom: -1.14285714em; - right: 50%; - transform: translateY(-50%) translateX(50%) rotate(45deg); - } - - /* Content */ - - .ui[class*="tablet stackable"].steps .step .content { - text-align: center; - } - - /* Icon */ - - .ui[class*="tablet stackable"].steps .step > i.icon, - .ui[class*="tablet stackable"].ordered.steps .step::before { - margin: 0 0 1rem 0; - } -} - -/* -------------- - Fluid - --------------- */ - -/* Fluid */ - -.ui.fluid.steps { - display: flex; - width: 100%; -} - -/* -------------- - Attached - --------------- */ - -/* Top */ - -.ui.attached.steps { - width: calc(100% + 2px) !important; - margin: 0 -1px 0; - max-width: calc(100% + 2px); - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui.attached.steps .step:first-child { - border-radius: 0.28571429rem 0 0 0; -} - -.ui.attached.steps .step:last-child { - border-radius: 0 0.28571429rem 0 0; -} - -/* Bottom */ - -.ui.bottom.attached.steps { - margin: 0 -1px 0; - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -.ui.bottom.attached.steps .step:first-child { - border-radius: 0 0 0 0.28571429rem; -} - -.ui.bottom.attached.steps .step:last-child { - border-radius: 0 0 0.28571429rem 0; -} - -/* ------------------- - 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 { - width: 100%; -} - -.ui.one.steps > .step, -.ui.two.steps > .step, -.ui.three.steps > .step, -.ui.four.steps > .step, -.ui.five.steps > .step, -.ui.six.steps > .step, -.ui.seven.steps > .step, -.ui.eight.steps > .step { - flex-wrap: nowrap; -} - -.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.5%; -} - -/* ------------------- - Sizes --------------------- */ - -.ui.steps .step, -.ui.step { - font-size: 1rem; -} - -.ui.mini.steps .step, -.ui.mini.step { - font-size: 0.78571429rem; -} - -.ui.tiny.steps .step, -.ui.tiny.step { - font-size: 0.85714286rem; -} - -.ui.small.steps .step, -.ui.small.step { - font-size: 0.92857143rem; -} - -.ui.large.steps .step, -.ui.large.step { - font-size: 1.14285714rem; -} - -.ui.big.steps .step, -.ui.big.step { - font-size: 1.28571429rem; -} - -.ui.huge.steps .step, -.ui.huge.step { - font-size: 1.42857143rem; -} - -.ui.massive.steps .step, -.ui.massive.step { - font-size: 1.71428571rem; -} - -/* -------------- - Inverted - --------------- */ - -.ui.inverted.steps { - border: 1px solid #555; -} - -.ui.inverted.steps .step { - color: rgba(255, 255, 255, 0.9); - background: #1b1c1d; - border-color: #555; -} - -.ui.inverted.steps .step::after { - background-color: #1b1c1d; - border-color: #555; -} - -.ui.inverted.steps .step .description { - color: rgba(255, 255, 255, 0.9); -} - -/* Active */ - -.ui.inverted.steps .step.active, -.ui.inverted.steps .step.active::after { - background: #333; -} - -.ui.inverted.ordered.steps .step.active::before, -.ui.inverted.steps .active.step i.icon { - color: #ffffff; -} - -/* Disabled */ - -.ui.inverted.steps .disabled.step, -.ui.inverted.steps .disabled.step::after { - background: #222; -} - -.ui.inverted.steps .disabled.step, -.ui.inverted.steps .disabled.step .title, -.ui.inverted.steps .disabled.step .description { - color: rgba(225, 225, 225, 0.3); -} - -/* Link Hover */ - -.ui.inverted.steps .link.step:hover::after, -.ui.inverted.steps .link.step:hover, -.ui.inverted.steps a.step:hover::after, -.ui.inverted.steps a.step:hover { - background: #3f3f3f; - color: #ffffff; -} - -/* Link Down */ - -.ui.inverted.steps .link.step:active::after, -.ui.inverted.steps .link.step:active, -.ui.inverted.steps a.step:active::after, -.ui.inverted.steps a.step:active { - background: #444; - color: #ffffff; -} - -/******************************* - Theme Overrides -*******************************/ - -@font-face { - font-family: Step; - src: url("data:application/font-woff;base64,d09GRgABAAAAAAqgABAAAAAAEXwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAKhAAAABwAAAAcjOLzxEdERUYAAApoAAAAHAAAACAAJwAYT1MvMgAAAeQAAABEAAAAVj4wSUZjbWFwAAACPAAAAEYAAAFO0BkDx2N2dCAAAAfYAAAAFAAAABwGSf+UZnBnbQAAAoQAAAT5AAAJkYoKeDtnYXNwAAAKYAAAAAgAAAAIAAAAEGdseWYAAAf4AAAAuAAAALj5yjT+aGVhZAAAAWwAAAA1AAAANhGASlVoaGVhAAABpAAAACAAAAAkB3wDa2htdHgAAAIoAAAAFAAAABQMwgBDbG9jYQAAB+wAAAAMAAAADAA4AFxtYXhwAAABxAAAACAAAAAgAKgAR25hbWUAAAiwAAABgQAAAuggq9iKcG9zdAAACjQAAAAqAAAAPa7AQJpwcmVwAAAHgAAAAFYAAABWkqGa/3icY2BkYGAAYin+m+nx/DZfGeRZGEDgvOmMXhB9PyH33/+//9cz72KWA3I5GJhAogBAsAyTAAAAeJxjYGRgYE77n8YQw8Lw/+///8y7GIAiKIAVAKglBu0AAQAAAAUAFgABAAAAAAACAAYAEwBuAAAALQAcAAAAAHicY2BkPs84gYGVgYOpk+ksAwNDP4RmfMNgxMjBwMDEwMrMgBUEpLmmMDi8YHjByJz2P40hhlmOIRAozAiSAwAYDgv0BAAAAAAAAAABVAAABAAARgNt//14nN2MwQ3AIAwDzxQxBSMwCPtPwRbUCf10BSwlJ0u2gYdzHRGadkpfGWYzRYGlvSOwOMxUzba/Gt+A6XQ0fhLX6wWAUwawAAB4nJ1V2XbTVhSVPGRwEjpkoKAO19w4UOvKhCkYMGkqxXYhHRwIrQQdpAx05J3HPutrjkK7Vh/5tO59PSS0dK22LJbPvkdbZ9g650YcIyp9Gohr1KGSlwOprD2WSvdJXNd1L4+VDAZxXbYST0mbqJ0kSmrd7FAu8VjrKlknWCfj5SBWT1WeZ6AM4hQeZUlEG0QbqZcmSeKJ4yeJFmcQHyVJICWjEKfSyFBCNRrEUtWhTOnQq9cTcdNAykajHnVYVPdDxSfHNafUrANGKlc5whXr1Ua+G6cDL3uQxDrBs62HMR54rH6UKpCKkenIP3ZKTpSGgVRx1KFW4ugwk1/3kUwqzUCmjGJFpe6BuN39dNsWMT10Or4uSpVGqrq5ziia7dHxqIMoD9nG6aTc0Nn28OUZU1SrXXGz7UBmDVxKyWx0n0QAHSZS4+kBTjWcAqkZ9UfF2efPARLJXJSqPFUyh3oDmTM7e3Ex7W4nq7JwpJ8HMm92duOdh0OnV4d/0foXTOHMR4/iYn4+QvpQan4iTiSlRljM8qeGH3FXIEK5MYgLF8rgU4Q5dEXa2WZd47Ux9obP+UqpYT0J2uij+H4K/U4kKxxnUaP1SJzNY9d1rdxnUEu1uxc7Mq9DlSLu7wsLrjPnhGGeFgtVX5753gU0/waIZ/xA3jSFS/uWKUq0b5uiTLtoigrtElSlXTbFFO2KKaZpz5pihvYdU8zSnjMy4//L3OeR+xze8ZCb9l3kpn0PuWnfR27aD5CbViE3bR25aS8gN61GbtpVozp2BBoGaRdSFUHQNLL6YdxWm/VA1ow0fGlg8i5iyPrqREedtbXKH8V/deILB3Jpoqe7Iheb4i6v2xY+PN3uq4+aRt2w1fjGkfIwHkZ6HJrQWfnN4b/tTd0umu4yqjLoARVMCsAAZe1AAtM62wmk9Zqn+PIHYFyGeM5KQ7VUnzuGpu/leV/3sTnxvsftxi63XHd5CVnWDXJj9vDfUmSq6x/lLa1UJ0esKyePVWsYQyq8KLq+kpR7tLUbvyipsvJelNbK55OQmz2DG0Jbtu5hsCNMacolHl5TpSg91FKOskMsbynKPOCUiwtahsS4DnUPamvE6aF6GBsLIYahtL0QcEgpXRXftMp38R6ra9jo+MUV4el6chIRn+Iq+1HwVNdG/egO2rxm3TKDKVWqp/uMT7Gv2/ZRWWmkjrMXt1QH1zTrGjkV00/ka+B0bzho3QM9VHw0QSNVNcfoxihjNJY15d8EdDFWfsNo1WL7PdxPnaRVrLlLmOybE/fgtLv9Kvu1nFtG1v3XBr1t5IqfIzG/LQr8Owdit2QN1DuTgRgLyFnQGMYWJncYroNtxG32Pyan/9+GhUVyVzsau3nqw9WTUSV32fK4y012WdejNkfVThr7CI0tDzfm2OFyLLbEYEG2/sH/Me4Bd2lRAuDQyGWYiNp0oZ7q4eoeq7FtOFcSAXbNseN0AHoALkHfHLvW8wmA9dwj5y7AfXIIdsgh+JQcgs/IuQXwOTkEX5BDMCCHYJecOwAPyCF4SA7BHjkEj8jZBPiSHIKvyCGIySFIyLkN8JgcgifkEHxNDsE3Rq5OZP6WB9kA+s6im0CpnRoc2jhkRq5N2Ps8WPaBRWQfWkTqkZHrE+pTHiz1e4tI/cEiUn80cmNC/YkHS/3ZIlJ/sYjUZ8aXmSMprw6e844O/gSX6q1eAAAAS7gAyFJYsQEBjlm5CAAIAGMgsAEjRLADI3CyBCgJRVJEsgoCByqxBgFEsSQBiFFYsECIWLEGA0SxJgGIUVi4BACIWLEGAURZWVlZuAH/hbAEjbEFAEQAAHicY2BAA0YMRszc/zeCMAAQtAPhAAAAAAAAAAAAOABcAAEARgABA7oCqAAVABxAGQ8BAAEBQgACAQJqAAEAAWoAAABhFBcUAxIrARQHAQYiJwEmND8BNjIfAQE2Mh8BFgO6D/4UEC0Q/uMPD04QLRGoAXYQLhBODwIjFxD+FA8PAR0QLRFOEBCpAXgQEE4QAAAB//3/rwN0Ax4ADAASQA8AAQEKQwAAAAsARBUTAhErARQOASIuAj4BMh4BA251y+3NcQZ9wPq/gQFmeMh3d8nvyXd3yQAAAHicfZHLSsNAFIb/6UVrCyIKrg8IYhHSC7pxVSlUcOmi+7SmSUqaCZOp0NfxGdz6CLpz69atK9f+SUfBgk3I5Dv/ucyZMwAO8Q6F9XOJxLFCA0+OK9jFi+Mq9Q/HNTRUxXEdLXXieIf6teMmztWj4xaO1BcrqNoerXlZrWCFAzw6rmAfz46r1N8c18ifjus4Vi3HOzhQHcdNjNWt4xZO1SuG0MiwgkGMEBEsBGdU2/z30UUPF6QJI4SR66gYKXzOQbgumRGVnpz2gN+MVko1YERC9jDlugCGOluZOIysnA3b0u/2LmSyEk0pTv1E/KWNtMllIDOd2iBJtDfVTNushx83cEcxZAsJGzE0g3CZ+GZryhbXmGJxjLgMER7d4wAwDkwe61R6Xndr+g3FtCzhlwH3v3PL8cA2+1QtCxQTMuVEBKONcsK7KHxzKlPqHssGaWB8G9wXw8ofwr61M5kZvZCR21oyo+fB1DI4KvfIcIUO339vIrI2u+p0/sz5GyLHh70AAAB4nGNgYoAALgbsgBWIGRmYGJkYmTmTM1KTs3MTi7LZkjOLknNSATkPBkYAAAABAAH//wAPeJxjYGRgYOABYgEGCQYmIM0CxCCaEYIBBW0AQAAAAAEAAAAA3kztOAAAAADPNZiNAAAAAN9gbf4=") format("woff"); -} - -.ui.steps .step.completed > .icon::before, -.ui.ordered.steps .step.completed::before { - font-family: Step; - content: "\e800"; - /* 'î €' */ -} - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Form - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Elements -*******************************/ - -/* -------------------- - Form ---------------------- */ - -.ui.form { - position: relative; - max-width: 100%; -} - -/* -------------------- - Content ---------------------- */ - -.ui.form > p { - margin: 1em 0; -} - -/* -------------------- - Field ---------------------- */ - -.ui.form .field { - clear: both; - margin: 0 0 1em; -} - -.ui.form .fields .fields, -.ui.form .field:last-child, -.ui.form .fields:last-child .field { - margin-bottom: 0; -} - -.ui.form .fields .field { - clear: both; - margin: 0; -} - -/* -------------------- - Labels ---------------------- */ - -.ui.form .field > label { - display: block; - margin: 0 0 0.28571429rem 0; - font-size: 0.92857143em; - font-weight: bold; - text-transform: none; -} - -.ui.form:not(.inverted) .field > label:not(.button) { - color: rgba(0, 0, 0, 0.87); -} - -/* -------------------- - Standard Inputs ---------------------- */ - -.ui.form textarea, -.ui.form input:not([type]), -.ui.form input[type="color"], -.ui.form input[type="date"], -.ui.form input[type="datetime-local"], -.ui.form input[type="email"], -.ui.form input[type="month"], -.ui.form input[type="number"], -.ui.form input[type="password"], -.ui.form input[type="search"], -.ui.form input[type="tel"], -.ui.form input[type="time"], -.ui.form input[type="text"], -.ui.form input[type="file"], -.ui.form input[type="url"], -.ui.form input[type="week"] { - width: 100%; - vertical-align: top; -} - -/* Set max height on unusual input */ - -.ui.form ::-webkit-datetime-edit, -.ui.form ::-webkit-inner-spin-button { - height: 1.21428571em; -} - -.ui.form input:not([type]), -.ui.form input[type="color"], -.ui.form input[type="date"], -.ui.form input[type="datetime-local"], -.ui.form input[type="email"], -.ui.form input[type="month"], -.ui.form input[type="number"], -.ui.form input[type="password"], -.ui.form input[type="search"], -.ui.form input[type="tel"], -.ui.form input[type="time"], -.ui.form input[type="text"], -.ui.form input[type="file"], -.ui.form input[type="url"], -.ui.form input[type="week"] { - font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - margin: 0; - outline: none; - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - line-height: 1.21428571em; - padding: 0.67857143em 1em; - font-size: 1em; - background: #fff; - border: 1px solid rgba(34, 36, 38, 0.15); - color: rgba(0, 0, 0, 0.87); - border-radius: 0.28571429rem; - box-shadow: 0 0 0 0 transparent inset; - transition: color 0.1s ease, border-color 0.1s ease; -} - -.ui.form input[type="color"] { - padding: initial; -} - -.ui.form input::-webkit-calendar-picker-indicator { - padding: 0; - opacity: 0.5; - -webkit-transition: opacity 0.3s ease; - transition: opacity 0.3s ease; - cursor: pointer; -} - -/* Text Area */ - -.ui.input textarea, -.ui.form textarea { - margin: 0; - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - padding: 0.78571429em 1em; - background: #fff; - border: 1px solid rgba(34, 36, 38, 0.15); - outline: none; - color: rgba(0, 0, 0, 0.87); - border-radius: 0.28571429rem; - box-shadow: 0 0 0 0 transparent inset; - transition: color 0.1s ease, border-color 0.1s ease; - font-size: 1em; - font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - line-height: 1.2857; - resize: vertical; -} - -.ui.form textarea:not([rows]) { - height: 12em; - min-height: 8em; - max-height: 24em; -} - -.ui.form textarea, -.ui.form input[type="checkbox"] { - vertical-align: top; -} - -/* -------------------- - Checkbox margin ---------------------- */ - -.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox { - margin-top: 0.7em; -} - -.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox { - margin-top: 2.41428571em; -} - -.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox { - margin-top: 2.21428571em; -} - -.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox { - margin-top: 2.61428571em; -} - -.ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox { - margin-top: 0.6em; -} - -.ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox { - margin-top: 0.5em; -} - -.ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox { - margin-top: 0.7em; -} - -/* -------------------- - Transparent - --------------------- */ - -.ui.form .field .transparent.input:not(.icon) input, -.ui.form .field input.transparent, -.ui.form .field textarea.transparent { - padding: 0.67857143em 1em; -} - -.ui.form .field input.transparent, -.ui.form .field textarea.transparent { - border-color: transparent !important; - background-color: transparent !important; - box-shadow: none !important; -} - -/* -------------------------- - Input w/ attached Button ---------------------------- */ - -.ui.form input.attached { - width: auto; -} - -/* -------------------- - Basic Select ---------------------- */ - -.ui.form select { - display: block; - height: auto; - width: 100%; - background: #fff; - border: 1px solid rgba(34, 36, 38, 0.15); - border-radius: 0.28571429rem; - box-shadow: 0 0 0 0 transparent inset; - padding: 0.62em 1em; - color: rgba(0, 0, 0, 0.87); - transition: color 0.1s ease, border-color 0.1s ease; -} - -/* -------------------- - Dropdown ---------------------- */ - -/* Block */ - -.ui.form .field > .selection.dropdown:not(.compact) { - min-width: auto; - width: 100%; -} - -.ui.form .field > .selection.dropdown > .dropdown.icon { - float: right; -} - -/* Inline */ - -.ui.form .inline.fields .field > .selection.dropdown, -.ui.form .inline.field > .selection.dropdown { - width: auto; -} - -.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon, -.ui.form .inline.field > .selection.dropdown > .dropdown.icon { - float: none; -} - -/* -------------------- - UI Input ---------------------- */ - -/* Block */ - -.ui.form .field .ui.input, -.ui.form .fields .field .ui.input, -.ui.form .wide.field .ui.input { - width: 100%; -} - -/* Inline */ - -.ui.form .inline.fields .field:not(.wide) .ui.input, -.ui.form .inline.field:not(.wide) .ui.input { - width: auto; - vertical-align: middle; -} - -/* Auto Input */ - -.ui.form .fields .field .ui.input input, -.ui.form .field .ui.input input { - width: auto; -} - -/* Full Width Input */ - -.ui.form .ten.fields .ui.input input, -.ui.form .nine.fields .ui.input input, -.ui.form .eight.fields .ui.input input, -.ui.form .seven.fields .ui.input input, -.ui.form .six.fields .ui.input input, -.ui.form .five.fields .ui.input input, -.ui.form .four.fields .ui.input input, -.ui.form .three.fields .ui.input input, -.ui.form .two.fields .ui.input input, -.ui.form .wide.field .ui.input input { - flex: 1 0 auto; - width: 0; -} - -/* -------------------- - Types of Messages ---------------------- */ - -.ui.form .error.message, -.ui.form .error.message:empty { - display: none; -} - -.ui.form .info.message, -.ui.form .info.message:empty { - display: none; -} - -.ui.form .success.message, -.ui.form .success.message:empty { - display: none; -} - -.ui.form .warning.message, -.ui.form .warning.message:empty { - display: none; -} - -/* Assumptions */ - -.ui.form .message:first-child { - margin-top: 0; -} - -/* -------------------- - Validation Prompt ---------------------- */ - -.ui.form .field .prompt.label { - white-space: normal; - background: #fff !important; - border: 1px solid #e0b4b4 !important; - color: #9f3a38 !important; -} - -.ui.form .field .prompt.label li::before { - color: #9f3a38; -} - -.ui.form .inline.fields .field .prompt, -.ui.form .inline.field .prompt { - vertical-align: top; - margin: -0.25em 0 -0.5em 0.5em; -} - -.ui.form .inline.fields .field .prompt::before, -.ui.form .inline.field .prompt::before { - border-width: 0 0 1px 1px; - bottom: auto; - right: auto; - top: 50%; - left: 0; -} - -/******************************* - States -*******************************/ - -/* -------------------- - Autofilled ---------------------- */ - -.ui.form .field.field input:-webkit-autofill { - box-shadow: 0 0 0 100px #fffff0 inset !important; - border-color: #e5dfa1 !important; -} - -/* Focus */ - -.ui.form .field.field input:-webkit-autofill:focus { - box-shadow: 0 0 0 100px #fffff0 inset !important; - border-color: #d5c315 !important; -} - -/* -------------------- - Placeholder ---------------------- */ - -/* browsers require these rules separate */ - -.ui.form :-ms-input-placeholder { - color: rgba(191, 191, 191, 0.87); -} - -.ui.form ::-ms-input-placeholder { - color: rgba(191, 191, 191, 0.87); -} - -.ui.form ::placeholder { - color: rgba(191, 191, 191, 0.87); -} - -.ui.form :-ms-input-placeholder { - color: rgba(191, 191, 191, 0.87) !important; -} - -.ui.form :focus:-ms-input-placeholder { - color: rgba(115, 115, 115, 0.87); -} - -.ui.form :focus::-ms-input-placeholder { - color: rgba(115, 115, 115, 0.87); -} - -.ui.form :focus::placeholder { - color: rgba(115, 115, 115, 0.87); -} - -.ui.form :focus:-ms-input-placeholder { - color: rgba(115, 115, 115, 0.87) !important; -} - -/* -------------------- - Focus ---------------------- */ - -.ui.form input:not([type]):focus, -.ui.form input[type="color"]:focus, -.ui.form input[type="date"]:focus, -.ui.form input[type="datetime-local"]:focus, -.ui.form input[type="email"]:focus, -.ui.form input[type="month"]:focus, -.ui.form input[type="number"]:focus, -.ui.form input[type="password"]:focus, -.ui.form input[type="search"]:focus, -.ui.form input[type="tel"]:focus, -.ui.form input[type="time"]:focus, -.ui.form input[type="text"]:focus, -.ui.form input[type="file"]:focus, -.ui.form input[type="url"]:focus, -.ui.form input[type="week"]:focus { - color: rgba(0, 0, 0, 0.95); - border-color: #85b7d9; - border-radius: 0.28571429rem; - background: #fff; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; -} - -.ui.form .ui.action.input:not([class*="left action"]) input:not([type]):focus, -.ui.form .ui.action.input:not([class*="left action"]) input[type="color"]:focus, -.ui.form .ui.action.input:not([class*="left action"]) input[type="date"]:focus, -.ui.form .ui.action.input:not([class*="left action"]) input[type="datetime-local"]:focus, -.ui.form .ui.action.input:not([class*="left action"]) input[type="email"]:focus, -.ui.form .ui.action.input:not([class*="left action"]) input[type="month"]:focus, -.ui.form .ui.action.input:not([class*="left action"]) input[type="number"]:focus, -.ui.form .ui.action.input:not([class*="left action"]) input[type="password"]:focus, -.ui.form .ui.action.input:not([class*="left action"]) input[type="search"]:focus, -.ui.form .ui.action.input:not([class*="left action"]) input[type="tel"]:focus, -.ui.form .ui.action.input:not([class*="left action"]) input[type="time"]:focus, -.ui.form .ui.action.input:not([class*="left action"]) input[type="text"]:focus, -.ui.form .ui.action.input:not([class*="left action"]) input[type="file"]:focus, -.ui.form .ui.action.input:not([class*="left action"]) input[type="url"]:focus, -.ui.form .ui.action.input:not([class*="left action"]) input[type="week"]:focus { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.ui.form .ui[class*="left action"].input input:not([type]), -.ui.form .ui[class*="left action"].input input[type="color"], -.ui.form .ui[class*="left action"].input input[type="date"], -.ui.form .ui[class*="left action"].input input[type="datetime-local"], -.ui.form .ui[class*="left action"].input input[type="email"], -.ui.form .ui[class*="left action"].input input[type="month"], -.ui.form .ui[class*="left action"].input input[type="number"], -.ui.form .ui[class*="left action"].input input[type="password"], -.ui.form .ui[class*="left action"].input input[type="search"], -.ui.form .ui[class*="left action"].input input[type="tel"], -.ui.form .ui[class*="left action"].input input[type="time"], -.ui.form .ui[class*="left action"].input input[type="text"], -.ui.form .ui[class*="left action"].input input[type="file"], -.ui.form .ui[class*="left action"].input input[type="url"], -.ui.form .ui[class*="left action"].input input[type="week"] { - border-bottom-left-radius: 0; - border-top-left-radius: 0; -} - -.ui.form textarea:focus { - color: rgba(0, 0, 0, 0.95); - border-color: #85b7d9; - border-radius: 0.28571429rem; - background: #fff; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; - -webkit-appearance: none; -} - -/* Focus */ - -.ui.form input:focus::-webkit-calendar-picker-indicator { - opacity: 1; -} - -/* -------------------- - States - --------------------- */ - -/* On Form */ - -.ui.form.error .error.message:not(:empty) { - display: block; -} - -.ui.form.error .compact.error.message:not(:empty) { - display: inline-block; -} - -.ui.form.error .icon.error.message:not(:empty) { - display: flex; -} - -/* On Field(s) */ - -.ui.form .fields.error .error.message:not(:empty), -.ui.form .field.error .error.message:not(:empty) { - display: block; -} - -.ui.form .fields.error .compact.error.message:not(:empty), -.ui.form .field.error .compact.error.message:not(:empty) { - display: inline-block; -} - -.ui.form .fields.error .icon.error.message:not(:empty), -.ui.form .field.error .icon.error.message:not(:empty) { - display: flex; -} - -.ui.ui.form .fields.error .field label, -.ui.ui.form .fields.error .field .ui.label:not(.corner), -.ui.ui.form .field.error label, -.ui.ui.form .field.error .ui.label:not(.corner), -.ui.ui.form .fields.error .field .input, -.ui.ui.form .field.error .input { - color: #9f3a38; -} - -@supports selector(:has(.f)) { - .ui.form .fields:has(.error) > label { - color: #9f3a38; - } -} - -.ui.form .fields.error .field .ui.label, -.ui.form .field.error .ui.label { - background-color: #ecd1d1; -} - -.ui.form .fields.error .field .corner.label, -.ui.form .field.error .corner.label { - border-color: #9f3a38; - color: #fff; -} - -.ui.form .fields.error .field textarea, -.ui.form .fields.error .field select, -.ui.form .fields.error .field input:not([type]), -.ui.form .fields.error .field input[type="color"], -.ui.form .fields.error .field input[type="date"], -.ui.form .fields.error .field input[type="datetime-local"], -.ui.form .fields.error .field input[type="email"], -.ui.form .fields.error .field input[type="month"], -.ui.form .fields.error .field input[type="number"], -.ui.form .fields.error .field input[type="password"], -.ui.form .fields.error .field input[type="search"], -.ui.form .fields.error .field input[type="tel"], -.ui.form .fields.error .field input[type="time"], -.ui.form .fields.error .field input[type="text"], -.ui.form .fields.error .field input[type="file"], -.ui.form .fields.error .field input[type="url"], -.ui.form .fields.error .field input[type="week"], -.ui.form .field.error textarea, -.ui.form .field.error select, -.ui.form .field.error input:not([type]), -.ui.form .field.error input[type="color"], -.ui.form .field.error input[type="date"], -.ui.form .field.error input[type="datetime-local"], -.ui.form .field.error input[type="email"], -.ui.form .field.error input[type="month"], -.ui.form .field.error input[type="number"], -.ui.form .field.error input[type="password"], -.ui.form .field.error input[type="search"], -.ui.form .field.error input[type="tel"], -.ui.form .field.error input[type="time"], -.ui.form .field.error input[type="text"], -.ui.form .field.error input[type="file"], -.ui.form .field.error input[type="url"], -.ui.form .field.error input[type="week"] { - color: #9f3a38; - background: #fff6f6; - border-color: #e0b4b4; - border-radius: ""; - box-shadow: none; -} - -.ui.form:not(.initial) .field input:invalid { - color: #9f3a38; - background: #fff6f6; - border-color: #e0b4b4; - border-radius: ""; - box-shadow: none; -} - -.ui.form .field.error textarea:focus, -.ui.form .field.error select:focus, -.ui.form .field.error input:not([type]):focus, -.ui.form .field.error input[type="color"]:focus, -.ui.form .field.error input[type="date"]:focus, -.ui.form .field.error input[type="datetime-local"]:focus, -.ui.form .field.error input[type="email"]:focus, -.ui.form .field.error input[type="month"]:focus, -.ui.form .field.error input[type="number"]:focus, -.ui.form .field.error input[type="password"]:focus, -.ui.form .field.error input[type="search"]:focus, -.ui.form .field.error input[type="tel"]:focus, -.ui.form .field.error input[type="time"]:focus, -.ui.form .field.error input[type="text"]:focus, -.ui.form .field.error input[type="file"]:focus, -.ui.form .field.error input[type="url"]:focus, -.ui.form .field.error input[type="week"]:focus { - background: #fff6f6; - border-color: #e0b4b4; - color: #9f3a38; - box-shadow: none; -} - -/* Preserve Native Select Stylings */ - -.ui.form .field.error select { - -webkit-appearance: menulist-button; -} - -/*------------------ - Input State - --------------------*/ - -/* Transparent */ - -.ui.form .field.error .transparent.input input, -.ui.form .field.error .transparent.input textarea, -.ui.form .field.error input.transparent, -.ui.form .field.error textarea.transparent { - background-color: #fff6f6 !important; - color: #9f3a38 !important; -} - -/* Autofilled */ - -.ui.form .error.error input:-webkit-autofill { - box-shadow: 0 0 0 100px #fffaf0 inset !important; - border-color: #e0b4b4 !important; -} - -/* Placeholder */ - -.ui.form .error :-ms-input-placeholder { - color: #e7bdbc; -} - -.ui.form .error ::-ms-input-placeholder { - color: #e7bdbc; -} - -.ui.form .error ::placeholder { - color: #e7bdbc; -} - -.ui.form .error :-ms-input-placeholder { - color: #e7bdbc !important; -} - -.ui.form .error :focus:-ms-input-placeholder { - color: #da9796; -} - -.ui.form .error :focus::-ms-input-placeholder { - color: #da9796; -} - -.ui.form .error :focus::placeholder { - color: #da9796; -} - -.ui.form .error :focus:-ms-input-placeholder { - color: #da9796 !important; -} - -/*------------------ - Dropdown State - --------------------*/ - -.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 > .text, -.ui.form .field.error .ui.dropdown .item { - background: #fff6f6; - color: #9f3a38; -} - -.ui.form .fields.error .field .ui.dropdown, -.ui.form .field.error .ui.dropdown { - border-color: #e0b4b4 !important; -} - -.ui.form .fields.error .field .ui.dropdown:hover, -.ui.form .field.error .ui.dropdown:hover { - border-color: #e0b4b4 !important; -} - -.ui.form .fields.error .field .ui.dropdown:hover .menu, -.ui.form .field.error .ui.dropdown:hover .menu { - border-color: #e0b4b4; -} - -.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label, -.ui.form .field.error .ui.multiple.selection.dropdown > .label { - background-color: #eacbcb; - color: #9f3a38; -} - -/* Hover */ - -.ui.form .fields.error .field .ui.dropdown .menu .item:hover, -.ui.form .field.error .ui.dropdown .menu .item:hover { - background-color: #fbe7e7; -} - -/* Selected */ - -.ui.form .fields.error .field .ui.dropdown .menu .selected.item, -.ui.form .field.error .ui.dropdown .menu .selected.item { - background-color: #fbe7e7; -} - -/* Active */ - -.ui.form .fields.error .field .ui.dropdown .menu .active.item, -.ui.form .field.error .ui.dropdown .menu .active.item { - background-color: #fdcfcf !important; -} - -/*-------------------- - Checkbox State - ---------------------*/ - -.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label, -.ui.form .field.error .checkbox:not(.toggle):not(.slider) label { - color: #9f3a38; -} - -.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label::before, -.ui.form .field.error .checkbox:not(.toggle):not(.slider) label::before { - background: #fff6f6; - border-color: #e0b4b4; -} - -.ui.form .fields.error .field .checkbox label::after, -.ui.form .field.error .checkbox label::after { - color: #9f3a38; -} - -.ui.inverted.form .fields.error .field label, -.ui.inverted.form .error.field label { - color: #ecd1d1; -} - -@supports selector(:has(.f)) { - .ui.inverted.form .fields:has(.error) > label { - color: #ecd1d1; - } -} - -/* On Form */ - -.ui.form.info .info.message:not(:empty) { - display: block; -} - -.ui.form.info .compact.info.message:not(:empty) { - display: inline-block; -} - -.ui.form.info .icon.info.message:not(:empty) { - display: flex; -} - -/* On Field(s) */ - -.ui.form .fields.info .info.message:not(:empty), -.ui.form .field.info .info.message:not(:empty) { - display: block; -} - -.ui.form .fields.info .compact.info.message:not(:empty), -.ui.form .field.info .compact.info.message:not(:empty) { - display: inline-block; -} - -.ui.form .fields.info .icon.info.message:not(:empty), -.ui.form .field.info .icon.info.message:not(:empty) { - display: flex; -} - -.ui.ui.form .fields.info .field label, -.ui.ui.form .fields.info .field .ui.label:not(.corner), -.ui.ui.form .field.info label, -.ui.ui.form .field.info .ui.label:not(.corner), -.ui.ui.form .fields.info .field .input, -.ui.ui.form .field.info .input { - color: #276f86; -} - -@supports selector(:has(.f)) { - .ui.form .fields:has(.info) > label { - color: #276f86; - } -} - -.ui.form .fields.info .field .ui.label, -.ui.form .field.info .ui.label { - background-color: #c6e3e9; -} - -.ui.form .fields.info .field .corner.label, -.ui.form .field.info .corner.label { - border-color: #276f86; - color: #fff; -} - -.ui.form .fields.info .field textarea, -.ui.form .fields.info .field select, -.ui.form .fields.info .field input:not([type]), -.ui.form .fields.info .field input[type="color"], -.ui.form .fields.info .field input[type="date"], -.ui.form .fields.info .field input[type="datetime-local"], -.ui.form .fields.info .field input[type="email"], -.ui.form .fields.info .field input[type="month"], -.ui.form .fields.info .field input[type="number"], -.ui.form .fields.info .field input[type="password"], -.ui.form .fields.info .field input[type="search"], -.ui.form .fields.info .field input[type="tel"], -.ui.form .fields.info .field input[type="time"], -.ui.form .fields.info .field input[type="text"], -.ui.form .fields.info .field input[type="file"], -.ui.form .fields.info .field input[type="url"], -.ui.form .fields.info .field input[type="week"], -.ui.form .field.info textarea, -.ui.form .field.info select, -.ui.form .field.info input:not([type]), -.ui.form .field.info input[type="color"], -.ui.form .field.info input[type="date"], -.ui.form .field.info input[type="datetime-local"], -.ui.form .field.info input[type="email"], -.ui.form .field.info input[type="month"], -.ui.form .field.info input[type="number"], -.ui.form .field.info input[type="password"], -.ui.form .field.info input[type="search"], -.ui.form .field.info input[type="tel"], -.ui.form .field.info input[type="time"], -.ui.form .field.info input[type="text"], -.ui.form .field.info input[type="file"], -.ui.form .field.info input[type="url"], -.ui.form .field.info input[type="week"] { - color: #276f86; - background: #f8ffff; - border-color: #a9d5de; - border-radius: ""; - box-shadow: none; -} - -.ui.form .field.info textarea:focus, -.ui.form .field.info select:focus, -.ui.form .field.info input:not([type]):focus, -.ui.form .field.info input[type="color"]:focus, -.ui.form .field.info input[type="date"]:focus, -.ui.form .field.info input[type="datetime-local"]:focus, -.ui.form .field.info input[type="email"]:focus, -.ui.form .field.info input[type="month"]:focus, -.ui.form .field.info input[type="number"]:focus, -.ui.form .field.info input[type="password"]:focus, -.ui.form .field.info input[type="search"]:focus, -.ui.form .field.info input[type="tel"]:focus, -.ui.form .field.info input[type="time"]:focus, -.ui.form .field.info input[type="text"]:focus, -.ui.form .field.info input[type="file"]:focus, -.ui.form .field.info input[type="url"]:focus, -.ui.form .field.info input[type="week"]:focus { - background: #f8ffff; - border-color: #a9d5de; - color: #276f86; - box-shadow: none; -} - -/* Preserve Native Select Stylings */ - -.ui.form .field.info select { - -webkit-appearance: menulist-button; -} - -/*------------------ - Input State - --------------------*/ - -/* Transparent */ - -.ui.form .field.info .transparent.input input, -.ui.form .field.info .transparent.input textarea, -.ui.form .field.info input.transparent, -.ui.form .field.info textarea.transparent { - background-color: #f8ffff !important; - color: #276f86 !important; -} - -/* Autofilled */ - -.ui.form .info.info input:-webkit-autofill { - box-shadow: 0 0 0 100px #f0faff inset !important; - border-color: #b3e0e0 !important; -} - -/* Placeholder */ - -.ui.form .info :-ms-input-placeholder { - color: #98cfe1; -} - -.ui.form .info ::-ms-input-placeholder { - color: #98cfe1; -} - -.ui.form .info ::placeholder { - color: #98cfe1; -} - -.ui.form .info :-ms-input-placeholder { - color: #98cfe1 !important; -} - -.ui.form .info :focus:-ms-input-placeholder { - color: #70bdd6; -} - -.ui.form .info :focus::-ms-input-placeholder { - color: #70bdd6; -} - -.ui.form .info :focus::placeholder { - color: #70bdd6; -} - -.ui.form .info :focus:-ms-input-placeholder { - color: #70bdd6 !important; -} - -/*------------------ - Dropdown State - --------------------*/ - -.ui.form .fields.info .field .ui.dropdown, -.ui.form .fields.info .field .ui.dropdown .item, -.ui.form .field.info .ui.dropdown, -.ui.form .field.info .ui.dropdown > .text, -.ui.form .field.info .ui.dropdown .item { - background: #f8ffff; - color: #276f86; -} - -.ui.form .fields.info .field .ui.dropdown, -.ui.form .field.info .ui.dropdown { - border-color: #a9d5de !important; -} - -.ui.form .fields.info .field .ui.dropdown:hover, -.ui.form .field.info .ui.dropdown:hover { - border-color: #a9d5de !important; -} - -.ui.form .fields.info .field .ui.dropdown:hover .menu, -.ui.form .field.info .ui.dropdown:hover .menu { - border-color: #a9d5de; -} - -.ui.form .fields.info .field .ui.multiple.selection.dropdown > .label, -.ui.form .field.info .ui.multiple.selection.dropdown > .label { - background-color: #cce3ea; - color: #276f86; -} - -/* Hover */ - -.ui.form .fields.info .field .ui.dropdown .menu .item:hover, -.ui.form .field.info .ui.dropdown .menu .item:hover { - background-color: #e9f2fb; -} - -/* Selected */ - -.ui.form .fields.info .field .ui.dropdown .menu .selected.item, -.ui.form .field.info .ui.dropdown .menu .selected.item { - background-color: #e9f2fb; -} - -/* Active */ - -.ui.form .fields.info .field .ui.dropdown .menu .active.item, -.ui.form .field.info .ui.dropdown .menu .active.item { - background-color: #cef1fd !important; -} - -/*-------------------- - Checkbox State - ---------------------*/ - -.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label, -.ui.form .field.info .checkbox:not(.toggle):not(.slider) label { - color: #276f86; -} - -.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label::before, -.ui.form .field.info .checkbox:not(.toggle):not(.slider) label::before { - background: #f8ffff; - border-color: #a9d5de; -} - -.ui.form .fields.info .field .checkbox label::after, -.ui.form .field.info .checkbox label::after { - color: #276f86; -} - -.ui.inverted.form .fields.info .field label, -.ui.inverted.form .info.field label { - color: #c6e3e9; -} - -@supports selector(:has(.f)) { - .ui.inverted.form .fields:has(.info) > label { - color: #c6e3e9; - } -} - -/* On Form */ - -.ui.form.success .success.message:not(:empty) { - display: block; -} - -.ui.form.success .compact.success.message:not(:empty) { - display: inline-block; -} - -.ui.form.success .icon.success.message:not(:empty) { - display: flex; -} - -/* On Field(s) */ - -.ui.form .fields.success .success.message:not(:empty), -.ui.form .field.success .success.message:not(:empty) { - display: block; -} - -.ui.form .fields.success .compact.success.message:not(:empty), -.ui.form .field.success .compact.success.message:not(:empty) { - display: inline-block; -} - -.ui.form .fields.success .icon.success.message:not(:empty), -.ui.form .field.success .icon.success.message:not(:empty) { - display: flex; -} - -.ui.ui.form .fields.success .field label, -.ui.ui.form .fields.success .field .ui.label:not(.corner), -.ui.ui.form .field.success label, -.ui.ui.form .field.success .ui.label:not(.corner), -.ui.ui.form .fields.success .field .input, -.ui.ui.form .field.success .input { - color: #2c662d; -} - -@supports selector(:has(.f)) { - .ui.form .fields:has(.success) > label { - color: #2c662d; - } -} - -.ui.form .fields.success .field .ui.label, -.ui.form .field.success .ui.label { - background-color: #b9d1ad; -} - -.ui.form .fields.success .field .corner.label, -.ui.form .field.success .corner.label { - border-color: #2c662d; - color: #fff; -} - -.ui.form .fields.success .field textarea, -.ui.form .fields.success .field select, -.ui.form .fields.success .field input:not([type]), -.ui.form .fields.success .field input[type="color"], -.ui.form .fields.success .field input[type="date"], -.ui.form .fields.success .field input[type="datetime-local"], -.ui.form .fields.success .field input[type="email"], -.ui.form .fields.success .field input[type="month"], -.ui.form .fields.success .field input[type="number"], -.ui.form .fields.success .field input[type="password"], -.ui.form .fields.success .field input[type="search"], -.ui.form .fields.success .field input[type="tel"], -.ui.form .fields.success .field input[type="time"], -.ui.form .fields.success .field input[type="text"], -.ui.form .fields.success .field input[type="file"], -.ui.form .fields.success .field input[type="url"], -.ui.form .fields.success .field input[type="week"], -.ui.form .field.success textarea, -.ui.form .field.success select, -.ui.form .field.success input:not([type]), -.ui.form .field.success input[type="color"], -.ui.form .field.success input[type="date"], -.ui.form .field.success input[type="datetime-local"], -.ui.form .field.success input[type="email"], -.ui.form .field.success input[type="month"], -.ui.form .field.success input[type="number"], -.ui.form .field.success input[type="password"], -.ui.form .field.success input[type="search"], -.ui.form .field.success input[type="tel"], -.ui.form .field.success input[type="time"], -.ui.form .field.success input[type="text"], -.ui.form .field.success input[type="file"], -.ui.form .field.success input[type="url"], -.ui.form .field.success input[type="week"] { - color: #2c662d; - background: #fcfff5; - border-color: #a3c293; - border-radius: ""; - box-shadow: none; -} - -.ui.form .field.success textarea:focus, -.ui.form .field.success select:focus, -.ui.form .field.success input:not([type]):focus, -.ui.form .field.success input[type="color"]:focus, -.ui.form .field.success input[type="date"]:focus, -.ui.form .field.success input[type="datetime-local"]:focus, -.ui.form .field.success input[type="email"]:focus, -.ui.form .field.success input[type="month"]:focus, -.ui.form .field.success input[type="number"]:focus, -.ui.form .field.success input[type="password"]:focus, -.ui.form .field.success input[type="search"]:focus, -.ui.form .field.success input[type="tel"]:focus, -.ui.form .field.success input[type="time"]:focus, -.ui.form .field.success input[type="text"]:focus, -.ui.form .field.success input[type="file"]:focus, -.ui.form .field.success input[type="url"]:focus, -.ui.form .field.success input[type="week"]:focus { - background: #fcfff5; - border-color: #a3c293; - color: #2c662d; - box-shadow: none; -} - -/* Preserve Native Select Stylings */ - -.ui.form .field.success select { - -webkit-appearance: menulist-button; -} - -/*------------------ - Input State - --------------------*/ - -/* Transparent */ - -.ui.form .field.success .transparent.input input, -.ui.form .field.success .transparent.input textarea, -.ui.form .field.success input.transparent, -.ui.form .field.success textarea.transparent { - background-color: #fcfff5 !important; - color: #2c662d !important; -} - -/* Autofilled */ - -.ui.form .success.success input:-webkit-autofill { - box-shadow: 0 0 0 100px #f0fff0 inset !important; - border-color: #bee0b3 !important; -} - -/* Placeholder */ - -.ui.form .success :-ms-input-placeholder { - color: #8fcf90; -} - -.ui.form .success ::-ms-input-placeholder { - color: #8fcf90; -} - -.ui.form .success ::placeholder { - color: #8fcf90; -} - -.ui.form .success :-ms-input-placeholder { - color: #8fcf90 !important; -} - -.ui.form .success :focus:-ms-input-placeholder { - color: #6cbf6d; -} - -.ui.form .success :focus::-ms-input-placeholder { - color: #6cbf6d; -} - -.ui.form .success :focus::placeholder { - color: #6cbf6d; -} - -.ui.form .success :focus:-ms-input-placeholder { - color: #6cbf6d !important; -} - -/*------------------ - Dropdown State - --------------------*/ - -.ui.form .fields.success .field .ui.dropdown, -.ui.form .fields.success .field .ui.dropdown .item, -.ui.form .field.success .ui.dropdown, -.ui.form .field.success .ui.dropdown > .text, -.ui.form .field.success .ui.dropdown .item { - background: #fcfff5; - color: #2c662d; -} - -.ui.form .fields.success .field .ui.dropdown, -.ui.form .field.success .ui.dropdown { - border-color: #a3c293 !important; -} - -.ui.form .fields.success .field .ui.dropdown:hover, -.ui.form .field.success .ui.dropdown:hover { - border-color: #a3c293 !important; -} - -.ui.form .fields.success .field .ui.dropdown:hover .menu, -.ui.form .field.success .ui.dropdown:hover .menu { - border-color: #a3c293; -} - -.ui.form .fields.success .field .ui.multiple.selection.dropdown > .label, -.ui.form .field.success .ui.multiple.selection.dropdown > .label { - background-color: #cceacc; - color: #2c662d; -} - -/* Hover */ - -.ui.form .fields.success .field .ui.dropdown .menu .item:hover, -.ui.form .field.success .ui.dropdown .menu .item:hover { - background-color: #e9fbe9; -} - -/* Selected */ - -.ui.form .fields.success .field .ui.dropdown .menu .selected.item, -.ui.form .field.success .ui.dropdown .menu .selected.item { - background-color: #e9fbe9; -} - -/* Active */ - -.ui.form .fields.success .field .ui.dropdown .menu .active.item, -.ui.form .field.success .ui.dropdown .menu .active.item { - background-color: #dafdce !important; -} - -/*-------------------- - Checkbox State - ---------------------*/ - -.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label, -.ui.form .field.success .checkbox:not(.toggle):not(.slider) label { - color: #2c662d; -} - -.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label::before, -.ui.form .field.success .checkbox:not(.toggle):not(.slider) label::before { - background: #fcfff5; - border-color: #a3c293; -} - -.ui.form .fields.success .field .checkbox label::after, -.ui.form .field.success .checkbox label::after { - color: #2c662d; -} - -.ui.inverted.form .fields.success .field label, -.ui.inverted.form .success.field label { - color: #b9d1ad; -} - -@supports selector(:has(.f)) { - .ui.inverted.form .fields:has(.success) > label { - color: #b9d1ad; - } -} - -/* On Form */ - -.ui.form.warning .warning.message:not(:empty) { - display: block; -} - -.ui.form.warning .compact.warning.message:not(:empty) { - display: inline-block; -} - -.ui.form.warning .icon.warning.message:not(:empty) { - display: flex; -} - -/* On Field(s) */ - -.ui.form .fields.warning .warning.message:not(:empty), -.ui.form .field.warning .warning.message:not(:empty) { - display: block; -} - -.ui.form .fields.warning .compact.warning.message:not(:empty), -.ui.form .field.warning .compact.warning.message:not(:empty) { - display: inline-block; -} - -.ui.form .fields.warning .icon.warning.message:not(:empty), -.ui.form .field.warning .icon.warning.message:not(:empty) { - display: flex; -} - -.ui.ui.form .fields.warning .field label, -.ui.ui.form .fields.warning .field .ui.label:not(.corner), -.ui.ui.form .field.warning label, -.ui.ui.form .field.warning .ui.label:not(.corner), -.ui.ui.form .fields.warning .field .input, -.ui.ui.form .field.warning .input { - color: #573a08; -} - -@supports selector(:has(.f)) { - .ui.form .fields:has(.warning) > label { - color: #573a08; - } -} - -.ui.form .fields.warning .field .ui.label, -.ui.form .field.warning .ui.label { - background-color: #d7ccb5; -} - -.ui.form .fields.warning .field .corner.label, -.ui.form .field.warning .corner.label { - border-color: #573a08; - color: #fff; -} - -.ui.form .fields.warning .field textarea, -.ui.form .fields.warning .field select, -.ui.form .fields.warning .field input:not([type]), -.ui.form .fields.warning .field input[type="color"], -.ui.form .fields.warning .field input[type="date"], -.ui.form .fields.warning .field input[type="datetime-local"], -.ui.form .fields.warning .field input[type="email"], -.ui.form .fields.warning .field input[type="month"], -.ui.form .fields.warning .field input[type="number"], -.ui.form .fields.warning .field input[type="password"], -.ui.form .fields.warning .field input[type="search"], -.ui.form .fields.warning .field input[type="tel"], -.ui.form .fields.warning .field input[type="time"], -.ui.form .fields.warning .field input[type="text"], -.ui.form .fields.warning .field input[type="file"], -.ui.form .fields.warning .field input[type="url"], -.ui.form .fields.warning .field input[type="week"], -.ui.form .field.warning textarea, -.ui.form .field.warning select, -.ui.form .field.warning input:not([type]), -.ui.form .field.warning input[type="color"], -.ui.form .field.warning input[type="date"], -.ui.form .field.warning input[type="datetime-local"], -.ui.form .field.warning input[type="email"], -.ui.form .field.warning input[type="month"], -.ui.form .field.warning input[type="number"], -.ui.form .field.warning input[type="password"], -.ui.form .field.warning input[type="search"], -.ui.form .field.warning input[type="tel"], -.ui.form .field.warning input[type="time"], -.ui.form .field.warning input[type="text"], -.ui.form .field.warning input[type="file"], -.ui.form .field.warning input[type="url"], -.ui.form .field.warning input[type="week"] { - color: #573a08; - background: #fffaf3; - border-color: #c9ba9b; - border-radius: ""; - box-shadow: none; -} - -.ui.form .field.warning textarea:focus, -.ui.form .field.warning select:focus, -.ui.form .field.warning input:not([type]):focus, -.ui.form .field.warning input[type="color"]:focus, -.ui.form .field.warning input[type="date"]:focus, -.ui.form .field.warning input[type="datetime-local"]:focus, -.ui.form .field.warning input[type="email"]:focus, -.ui.form .field.warning input[type="month"]:focus, -.ui.form .field.warning input[type="number"]:focus, -.ui.form .field.warning input[type="password"]:focus, -.ui.form .field.warning input[type="search"]:focus, -.ui.form .field.warning input[type="tel"]:focus, -.ui.form .field.warning input[type="time"]:focus, -.ui.form .field.warning input[type="text"]:focus, -.ui.form .field.warning input[type="file"]:focus, -.ui.form .field.warning input[type="url"]:focus, -.ui.form .field.warning input[type="week"]:focus { - background: #fffaf3; - border-color: #c9ba9b; - color: #573a08; - box-shadow: none; -} - -/* Preserve Native Select Stylings */ - -.ui.form .field.warning select { - -webkit-appearance: menulist-button; -} - -/*------------------ - Input State - --------------------*/ - -/* Transparent */ - -.ui.form .field.warning .transparent.input input, -.ui.form .field.warning .transparent.input textarea, -.ui.form .field.warning input.transparent, -.ui.form .field.warning textarea.transparent { - background-color: #fffaf3 !important; - color: #573a08 !important; -} - -/* Autofilled */ - -.ui.form .warning.warning input:-webkit-autofill { - box-shadow: 0 0 0 100px #ffffe0 inset !important; - border-color: #e0e0b3 !important; -} - -/* Placeholder */ - -.ui.form .warning :-ms-input-placeholder { - color: #edad3e; -} - -.ui.form .warning ::-ms-input-placeholder { - color: #edad3e; -} - -.ui.form .warning ::placeholder { - color: #edad3e; -} - -.ui.form .warning :-ms-input-placeholder { - color: #edad3e !important; -} - -.ui.form .warning :focus:-ms-input-placeholder { - color: #e39715; -} - -.ui.form .warning :focus::-ms-input-placeholder { - color: #e39715; -} - -.ui.form .warning :focus::placeholder { - color: #e39715; -} - -.ui.form .warning :focus:-ms-input-placeholder { - color: #e39715 !important; -} - -/*------------------ - Dropdown State - --------------------*/ - -.ui.form .fields.warning .field .ui.dropdown, -.ui.form .fields.warning .field .ui.dropdown .item, -.ui.form .field.warning .ui.dropdown, -.ui.form .field.warning .ui.dropdown > .text, -.ui.form .field.warning .ui.dropdown .item { - background: #fffaf3; - color: #573a08; -} - -.ui.form .fields.warning .field .ui.dropdown, -.ui.form .field.warning .ui.dropdown { - border-color: #c9ba9b !important; -} - -.ui.form .fields.warning .field .ui.dropdown:hover, -.ui.form .field.warning .ui.dropdown:hover { - border-color: #c9ba9b !important; -} - -.ui.form .fields.warning .field .ui.dropdown:hover .menu, -.ui.form .field.warning .ui.dropdown:hover .menu { - border-color: #c9ba9b; -} - -.ui.form .fields.warning .field .ui.multiple.selection.dropdown > .label, -.ui.form .field.warning .ui.multiple.selection.dropdown > .label { - background-color: #eaeacc; - color: #573a08; -} - -/* Hover */ - -.ui.form .fields.warning .field .ui.dropdown .menu .item:hover, -.ui.form .field.warning .ui.dropdown .menu .item:hover { - background-color: #fbfbe9; -} - -/* Selected */ - -.ui.form .fields.warning .field .ui.dropdown .menu .selected.item, -.ui.form .field.warning .ui.dropdown .menu .selected.item { - background-color: #fbfbe9; -} - -/* Active */ - -.ui.form .fields.warning .field .ui.dropdown .menu .active.item, -.ui.form .field.warning .ui.dropdown .menu .active.item { - background-color: #fdfdce !important; -} - -/*-------------------- - Checkbox State - ---------------------*/ - -.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label, -.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label { - color: #573a08; -} - -.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label::before, -.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label::before { - background: #fffaf3; - border-color: #c9ba9b; -} - -.ui.form .fields.warning .field .checkbox label::after, -.ui.form .field.warning .checkbox label::after { - color: #573a08; -} - -.ui.inverted.form .fields.warning .field label, -.ui.inverted.form .warning.field label { - color: #d7ccb5; -} - -@supports selector(:has(.f)) { - .ui.inverted.form .fields:has(.warning) > label { - color: #d7ccb5; - } -} - -/* -------------------- - Disabled - --------------------- */ - -.ui.form .disabled.fields .field, -.ui.form .disabled.field, -.ui.form .field :disabled { - pointer-events: none; - opacity: 0.45; -} - -.ui.form .field.disabled > label, -.ui.form .fields.disabled > label { - opacity: 0.45; -} - -.ui.form .field.disabled :disabled { - opacity: 1; -} - -/* -------------- - Loading - --------------- */ - -.ui.loading.form { - position: relative; - cursor: default; - pointer-events: none; -} - -.ui.loading.form::before { - position: absolute; - content: ""; - top: 0; - left: 0; - background: rgba(255, 255, 255, 0.8); - width: 100%; - height: 100%; - z-index: 100; -} - -.ui.loading.form.segments::before { - border-radius: 0.28571429rem; -} - -.ui.loading.form::after { - position: absolute; - content: ""; - top: 50%; - left: 50%; - margin: -1.5em 0 0 -1.5em; - width: 3em; - height: 3em; - animation: loader 0.6s infinite linear; - border: 0.2em solid #767676; - border-radius: 500rem; - box-shadow: 0 0 0 1px transparent; - visibility: visible; - z-index: 101; -} - -/******************************* - Element Types -*******************************/ - -/* -------------------- - Required Field - --------------------- */ - -.ui.form .required.fields:not(.grouped):not(.inline) > .field > label::after, -.ui.form .required.fields.inline > label::after, -.ui.form .required.fields.grouped > label::after, -.ui.form .required.field > label::after, -.ui.form .required.fields:not(.grouped):not(.inline) > .field > .checkbox::after, -.ui.form .required.field > .checkbox::after, -.ui.form label.required::after { - margin: -0.2em 0 0 0.2em; - content: "*"; - color: #db2828; -} - -.ui.form .required.fields:not(.grouped):not(.inline) > .field > label::after, -.ui.form .required.fields.inline > label::after, -.ui.form .required.fields.grouped > label::after, -.ui.form .required.field > label::after, -.ui.form label.required::after { - display: inline-block; - vertical-align: top; -} - -.ui.form .required.fields:not(.grouped):not(.inline) > .field > .checkbox::after, -.ui.form .required.field > .checkbox::after { - position: absolute; - top: 0; - left: 100%; -} - -.ui.ui.ui.ui.form .fields > label:empty::after, -.ui.ui.ui.ui.form .field > label:empty::after { - content: " "; - display: inline-block; -} - -/******************************* - Variations -*******************************/ - -/* -------------------- - Inverted Colors - --------------------- */ - -.ui.inverted.form label, -.ui.form .inverted.segment label, -.ui.form .inverted.segment .ui.checkbox label, -.ui.inverted.form .ui.checkbox label, -.ui.inverted.form .inline.fields > label, -.ui.inverted.form .inline.fields .field > label, -.ui.inverted.form .inline.fields .field > p, -.ui.inverted.form .inline.field > label, -.ui.inverted.form .inline.field > p { - color: rgba(255, 255, 255, 0.9); -} - -.ui.inverted.loading.form { - color: #fff; -} - -.ui.inverted.loading.form::before { - background: rgba(0, 0, 0, 0.85); -} - -/* Inverted Field */ - -.ui.inverted.form input:not([type]), -.ui.inverted.form input[type="color"], -.ui.inverted.form input[type="date"], -.ui.inverted.form input[type="datetime-local"], -.ui.inverted.form input[type="email"], -.ui.inverted.form input[type="month"], -.ui.inverted.form input[type="number"], -.ui.inverted.form input[type="password"], -.ui.inverted.form input[type="search"], -.ui.inverted.form input[type="tel"], -.ui.inverted.form input[type="time"], -.ui.inverted.form input[type="text"], -.ui.inverted.form input[type="file"], -.ui.inverted.form input[type="url"], -.ui.inverted.form input[type="week"] { - background: #fff; - border-color: rgba(255, 255, 255, 0.1); - color: rgba(0, 0, 0, 0.87); - box-shadow: none; -} - -/* -------------------- - Field Groups - --------------------- */ - -/* Grouped Vertically */ - -.ui.form .grouped.fields { - display: block; - margin: 0 0 1em; -} - -.ui.form .grouped.fields:last-child { - margin-bottom: 0; -} - -.ui.form .grouped.fields > label { - margin: 0 0 0.28571429rem 0; - color: rgba(0, 0, 0, 0.87); - font-size: 0.92857143em; - font-weight: bold; - text-transform: none; -} - -.ui.form .grouped.fields .field, -.ui.form .grouped.inline.fields .field { - display: block; - margin: 0.5em 0; - padding: 0; -} - -.ui.form .grouped.inline.fields .ui.checkbox { - margin-bottom: 0.4em; -} - -/* -------------------- - Fields ---------------------- */ - -/* Split fields */ - -.ui.form .fields { - display: flex; - flex-direction: row; - margin: 0 -0.5em 1em; -} - -.ui.form .fields > .field { - flex: 0 1 auto; - padding-left: 0.5em; - padding-right: 0.5em; -} - -.ui.form .fields > .field:first-child { - border-left: none; - box-shadow: none; -} - -/* Other Combinations */ - -.ui.form .two.fields > .fields, -.ui.form .two.fields > .field { - width: 50%; -} - -.ui.form .three.fields > .fields, -.ui.form .three.fields > .field { - width: 33.33333333%; -} - -.ui.form .four.fields > .fields, -.ui.form .four.fields > .field { - width: 25%; -} - -.ui.form .five.fields > .fields, -.ui.form .five.fields > .field { - width: 20%; -} - -.ui.form .six.fields > .fields, -.ui.form .six.fields > .field { - width: 16.66666667%; -} - -.ui.form .seven.fields > .fields, -.ui.form .seven.fields > .field { - width: 14.28571429%; -} - -.ui.form .eight.fields > .fields, -.ui.form .eight.fields > .field { - width: 12.5%; -} - -.ui.form .nine.fields > .fields, -.ui.form .nine.fields > .field { - width: 11.11111111%; -} - -.ui.form .ten.fields > .fields, -.ui.form .ten.fields > .field { - width: 10%; -} - -/* Swap to full width on mobile */ - -@media only screen and (max-width: 767.98px) { - .ui.form .fields { - flex-wrap: wrap; - margin-bottom: 0; - } - - .ui.form:not(.unstackable) .fields:not(.unstackable) > .fields, - .ui.form:not(.unstackable) .fields:not(.unstackable) > .field { - width: 100%; - margin: 0 0 1em; - } -} - -/* Sizing Combinations */ - -.ui.form .fields .wide.field { - width: 6.25%; - padding-left: 0.5em; - padding-right: 0.5em; -} - -.ui.form .one.wide.field { - width: 6.25%; -} - -.ui.form .two.wide.field { - width: 12.5%; -} - -.ui.form .three.wide.field { - width: 18.75%; -} - -.ui.form .four.wide.field { - width: 25%; -} - -.ui.form .five.wide.field { - width: 31.25%; -} - -.ui.form .six.wide.field { - width: 37.5%; -} - -.ui.form .seven.wide.field { - width: 43.75%; -} - -.ui.form .eight.wide.field { - width: 50%; -} - -.ui.form .nine.wide.field { - width: 56.25%; -} - -.ui.form .ten.wide.field { - width: 62.5%; -} - -.ui.form .eleven.wide.field { - width: 68.75%; -} - -.ui.form .twelve.wide.field { - width: 75%; -} - -.ui.form .thirteen.wide.field { - width: 81.25%; -} - -.ui.form .fourteen.wide.field { - width: 87.5%; -} - -.ui.form .fifteen.wide.field { - width: 93.75%; -} - -.ui.form .sixteen.wide.field { - width: 100%; -} - -/* -------------------- - Equal Width ---------------------- */ - -.ui[class*="equal width"].form .fields > .field, -.ui.form [class*="equal width"].fields > .field { - width: 100%; - flex: 1 1 auto; -} - -/* -------------------- - Inline Fields - --------------------- */ - -.ui.form .inline.fields { - margin: 0 0 1em; - align-items: center; -} - -.ui.form .inline.fields .field { - margin: 0; - padding: 0 1em 0 0; -} - -/* Inline Label */ - -.ui.form .inline.fields > label, -.ui.form .inline.fields .field > label, -.ui.form .inline.fields .field > p, -.ui.form .inline.field > label, -.ui.form .inline.field > p { - display: inline-block; - width: auto; - margin-top: 0; - margin-bottom: 0; - vertical-align: baseline; - font-size: 0.92857143em; - font-weight: bold; - color: rgba(0, 0, 0, 0.87); - text-transform: none; -} - -/* Grouped Inline Label */ - -.ui.form .inline.fields > label { - margin: 0.03571em 1em 0 0; -} - -/* Inline Input */ - -.ui.form .inline.fields .field > input, -.ui.form .inline.fields .field > select, -.ui.form .inline.field > input, -.ui.form .inline.field > select { - display: inline-block; - width: auto; - margin-top: 0; - margin-bottom: 0; - vertical-align: middle; - font-size: 1em; -} - -.ui.form .inline.fields .field .calendar:not(.popup), -.ui.form .inline.field .calendar:not(.popup) { - display: inline-block; -} - -.ui.form .inline.fields .field .calendar:not(.popup) > .input > input, -.ui.form .inline.field .calendar:not(.popup) > .input > input { - width: 13.11em; -} - -/* Label */ - -.ui.form .inline.fields .field > :first-child, -.ui.form .inline.field > :first-child { - margin: 0 0.85714286em 0 0; -} - -.ui.form .inline.fields .field > :only-child, -.ui.form .inline.field > :only-child { - margin: 0; -} - -/* Wide */ - -.ui.form .inline.fields .wide.field { - display: flex; - align-items: center; -} - -.ui.form .inline.fields .wide.field > input, -.ui.form .inline.fields .wide.field > select { - width: 100%; -} - -/* -------------------- - Sizes ---------------------- */ - -.ui.form, -.ui.form .field .dropdown, -.ui.form .field .dropdown .menu > .item { - font-size: 1rem; -} - -.ui.mini.form, -.ui.mini.form .field .dropdown, -.ui.mini.form .field .dropdown .menu > .item { - font-size: 0.78571429rem; -} - -.ui.tiny.form, -.ui.tiny.form .field .dropdown, -.ui.tiny.form .field .dropdown .menu > .item { - font-size: 0.85714286rem; -} - -.ui.small.form, -.ui.small.form .field .dropdown, -.ui.small.form .field .dropdown .menu > .item { - font-size: 0.92857143rem; -} - -.ui.large.form, -.ui.large.form .field .dropdown, -.ui.large.form .field .dropdown .menu > .item { - font-size: 1.14285714rem; -} - -.ui.big.form, -.ui.big.form .field .dropdown, -.ui.big.form .field .dropdown .menu > .item { - font-size: 1.28571429rem; -} - -.ui.huge.form, -.ui.huge.form .field .dropdown, -.ui.huge.form .field .dropdown .menu > .item { - font-size: 1.42857143rem; -} - -.ui.massive.form, -.ui.massive.form .field .dropdown, -.ui.massive.form .field .dropdown .menu > .item { - font-size: 1.71428571rem; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Grid - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Standard -*******************************/ - -.ui.grid { - display: flex; - flex-flow: row wrap; - align-items: stretch; - padding: 0; -} - -/* ---------------------- - Remove Gutters ------------------------ */ - -.ui.grid { - margin: -1rem -1rem; -} - -.ui.relaxed.grid { - margin-left: -1.5rem; - margin-right: -1.5rem; -} - -.ui[class*="very relaxed"].grid { - margin-left: -2.5rem; - margin-right: -2.5rem; -} - -/* Preserve Rows Spacing on Consecutive Grids */ - -.ui.grid + .grid { - margin-top: 1rem; -} - -/* ------------------- - Columns --------------------- */ - -/* Standard 16 column */ - -.ui.grid > .column:not(.row), -.ui.grid > .row > .column { - position: relative; - display: inline-block; - width: 6.25%; - padding-left: 1rem; - padding-right: 1rem; - vertical-align: top; -} - -.ui.grid > * { - padding-left: 1rem; - padding-right: 1rem; -} - -/* ------------------- - Rows --------------------- */ - -.ui.grid > .row { - position: relative; - display: flex; - flex-flow: row wrap; - justify-content: inherit; - align-items: stretch; - width: 100% !important; - padding: 0; - padding-top: 1rem; - padding-bottom: 1rem; -} - -/* ------------------- - Columns --------------------- */ - -/* Vertical padding when no rows */ - -.ui.grid > .column:not(.row) { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.ui.grid > .row > .column { - margin-top: 0; - margin-bottom: 0; -} - -/* ------------------- - Content --------------------- */ - -.ui.grid > .row > img, -.ui.grid > .row > .column > img { - max-width: 100%; -} - -/* ------------------- - Loose Coupling --------------------- */ - -/* Collapse Margin on Consecutive Grid */ - -.ui.grid > .ui.grid:first-child { - margin-top: 0; -} - -.ui.grid > .ui.grid:last-child { - margin-bottom: 0; -} - -/* Segment inside Aligned Grid */ - -.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached), -.ui.aligned.grid .column > .segment:not(.compact):not(.attached) { - width: 100%; -} - -/* Align Dividers with Gutter */ - -.ui.grid .row + .ui.divider { - flex-grow: 1; - margin: 1rem 1rem; -} - -.ui.grid .column + .ui.vertical.divider { - height: calc(50% - 1rem); -} - -/* Remove Border on Last Horizontal Segment */ - -.ui.grid > .row > .column:last-child > .horizontal.segment, -.ui.grid > .column:last-child > .horizontal.segment { - box-shadow: none; -} - -/******************************* - Variations -*******************************/ - -/* ----------------------- - Page Grid - ------------------------- */ - -@media only screen and (max-width: 767.98px) { - .ui.page.grid { - width: auto; - padding-left: 0; - padding-right: 0; - margin-left: 0; - margin-right: 0; - } -} - -@media only screen and (min-width: 768px) and (max-width: 991.98px) { - .ui.page.grid { - width: auto; - margin-left: 0; - margin-right: 0; - padding-left: 2em; - padding-right: 2em; - } -} - -@media only screen and (min-width: 992px) and (max-width: 1199.98px) { - .ui.page.grid { - width: auto; - margin-left: 0; - margin-right: 0; - padding-left: 3%; - padding-right: 3%; - } -} - -@media only screen and (min-width: 1200px) and (max-width: 1919.98px) { - .ui.page.grid { - width: auto; - margin-left: 0; - margin-right: 0; - padding-left: 15%; - padding-right: 15%; - } -} - -@media only screen and (min-width: 1920px) { - .ui.page.grid { - width: auto; - margin-left: 0; - margin-right: 0; - padding-left: 23%; - padding-right: 23%; - } -} - -/* ------------------- - Column Count --------------------- */ - -/* Assume full width with one column */ - -.ui.grid > .column:only-child, -.ui.grid > .row > .column:only-child { - width: 100%; -} - -/* Grid Based */ - -.ui[class*="one column"].grid > .row > .column, -.ui[class*="one column"].grid > .column:not(.row) { - width: 100%; -} - -.ui[class*="two column"].grid > .row > .column, -.ui[class*="two column"].grid > .column:not(.row) { - width: 50%; -} - -.ui[class*="three column"].grid > .row > .column, -.ui[class*="three column"].grid > .column:not(.row) { - width: 33.33333333%; -} - -.ui[class*="four column"].grid > .row > .column, -.ui[class*="four column"].grid > .column:not(.row) { - width: 25%; -} - -.ui[class*="five column"].grid > .row > .column, -.ui[class*="five column"].grid > .column:not(.row) { - width: 20%; -} - -.ui[class*="six column"].grid > .row > .column, -.ui[class*="six column"].grid > .column:not(.row) { - width: 16.66666667%; -} - -.ui[class*="seven column"].grid > .row > .column, -.ui[class*="seven column"].grid > .column:not(.row) { - width: 14.28571429%; -} - -.ui[class*="eight column"].grid > .row > .column, -.ui[class*="eight column"].grid > .column:not(.row) { - width: 12.5%; -} - -.ui[class*="nine column"].grid > .row > .column, -.ui[class*="nine column"].grid > .column:not(.row) { - width: 11.11111111%; -} - -.ui[class*="ten column"].grid > .row > .column, -.ui[class*="ten column"].grid > .column:not(.row) { - width: 10%; -} - -.ui[class*="eleven column"].grid > .row > .column, -.ui[class*="eleven column"].grid > .column:not(.row) { - width: 9.09090909%; -} - -.ui[class*="twelve column"].grid > .row > .column, -.ui[class*="twelve column"].grid > .column:not(.row) { - width: 8.33333333%; -} - -.ui[class*="thirteen column"].grid > .row > .column, -.ui[class*="thirteen column"].grid > .column:not(.row) { - width: 7.69230769%; -} - -.ui[class*="fourteen column"].grid > .row > .column, -.ui[class*="fourteen column"].grid > .column:not(.row) { - width: 7.14285714%; -} - -.ui[class*="fifteen column"].grid > .row > .column, -.ui[class*="fifteen column"].grid > .column:not(.row) { - width: 6.66666667%; -} - -.ui[class*="sixteen column"].grid > .row > .column, -.ui[class*="sixteen column"].grid > .column:not(.row) { - width: 6.25%; -} - -/* Row Based Overrides */ - -.ui.grid > [class*="one column"].row > .column { - width: 100% !important; -} - -.ui.grid > [class*="two column"].row > .column { - width: 50% !important; -} - -.ui.grid > [class*="three column"].row > .column { - width: 33.33333333% !important; -} - -.ui.grid > [class*="four column"].row > .column { - width: 25% !important; -} - -.ui.grid > [class*="five column"].row > .column { - width: 20% !important; -} - -.ui.grid > [class*="six column"].row > .column { - width: 16.66666667% !important; -} - -.ui.grid > [class*="seven column"].row > .column { - width: 14.28571429% !important; -} - -.ui.grid > [class*="eight column"].row > .column { - width: 12.5% !important; -} - -.ui.grid > [class*="nine column"].row > .column { - width: 11.11111111% !important; -} - -.ui.grid > [class*="ten column"].row > .column { - width: 10% !important; -} - -.ui.grid > [class*="eleven column"].row > .column { - width: 9.09090909% !important; -} - -.ui.grid > [class*="twelve column"].row > .column { - width: 8.33333333% !important; -} - -.ui.grid > [class*="thirteen column"].row > .column { - width: 7.69230769% !important; -} - -.ui.grid > [class*="fourteen column"].row > .column { - width: 7.14285714% !important; -} - -.ui.grid > [class*="fifteen column"].row > .column { - width: 6.66666667% !important; -} - -.ui.grid > [class*="sixteen column"].row > .column { - width: 6.25% !important; -} - -/* Celled Page */ - -.ui.celled.page.grid { - box-shadow: none; -} - -/* ------------------- - Column Width - -------------------- */ - -/* Sizing Combinations */ - -.ui.grid > .row > [class*="one wide"].column, -.ui.grid > .column.row > [class*="one wide"].column, -.ui.grid > [class*="one wide"].column, -.ui.column.grid > [class*="one wide"].column { - width: 6.25% !important; -} - -.ui.grid > .row > [class*="two wide"].column, -.ui.grid > .column.row > [class*="two wide"].column, -.ui.grid > [class*="two wide"].column, -.ui.column.grid > [class*="two wide"].column { - width: 12.5% !important; -} - -.ui.grid > .row > [class*="three wide"].column, -.ui.grid > .column.row > [class*="three wide"].column, -.ui.grid > [class*="three wide"].column, -.ui.column.grid > [class*="three wide"].column { - width: 18.75% !important; -} - -.ui.grid > .row > [class*="four wide"].column, -.ui.grid > .column.row > [class*="four wide"].column, -.ui.grid > [class*="four wide"].column, -.ui.column.grid > [class*="four wide"].column { - width: 25% !important; -} - -.ui.grid > .row > [class*="five wide"].column, -.ui.grid > .column.row > [class*="five wide"].column, -.ui.grid > [class*="five wide"].column, -.ui.column.grid > [class*="five wide"].column { - width: 31.25% !important; -} - -.ui.grid > .row > [class*="six wide"].column, -.ui.grid > .column.row > [class*="six wide"].column, -.ui.grid > [class*="six wide"].column, -.ui.column.grid > [class*="six wide"].column { - width: 37.5% !important; -} - -.ui.grid > .row > [class*="seven wide"].column, -.ui.grid > .column.row > [class*="seven wide"].column, -.ui.grid > [class*="seven wide"].column, -.ui.column.grid > [class*="seven wide"].column { - width: 43.75% !important; -} - -.ui.grid > .row > [class*="eight wide"].column, -.ui.grid > .column.row > [class*="eight wide"].column, -.ui.grid > [class*="eight wide"].column, -.ui.column.grid > [class*="eight wide"].column { - width: 50% !important; -} - -.ui.grid > .row > [class*="nine wide"].column, -.ui.grid > .column.row > [class*="nine wide"].column, -.ui.grid > [class*="nine wide"].column, -.ui.column.grid > [class*="nine wide"].column { - width: 56.25% !important; -} - -.ui.grid > .row > [class*="ten wide"].column, -.ui.grid > .column.row > [class*="ten wide"].column, -.ui.grid > [class*="ten wide"].column, -.ui.column.grid > [class*="ten wide"].column { - width: 62.5% !important; -} - -.ui.grid > .row > [class*="eleven wide"].column, -.ui.grid > .column.row > [class*="eleven wide"].column, -.ui.grid > [class*="eleven wide"].column, -.ui.column.grid > [class*="eleven wide"].column { - width: 68.75% !important; -} - -.ui.grid > .row > [class*="twelve wide"].column, -.ui.grid > .column.row > [class*="twelve wide"].column, -.ui.grid > [class*="twelve wide"].column, -.ui.column.grid > [class*="twelve wide"].column { - width: 75% !important; -} - -.ui.grid > .row > [class*="thirteen wide"].column, -.ui.grid > .column.row > [class*="thirteen wide"].column, -.ui.grid > [class*="thirteen wide"].column, -.ui.column.grid > [class*="thirteen wide"].column { - width: 81.25% !important; -} - -.ui.grid > .row > [class*="fourteen wide"].column, -.ui.grid > .column.row > [class*="fourteen wide"].column, -.ui.grid > [class*="fourteen wide"].column, -.ui.column.grid > [class*="fourteen wide"].column { - width: 87.5% !important; -} - -.ui.grid > .row > [class*="fifteen wide"].column, -.ui.grid > .column.row > [class*="fifteen wide"].column, -.ui.grid > [class*="fifteen wide"].column, -.ui.column.grid > [class*="fifteen wide"].column { - width: 93.75% !important; -} - -.ui.grid > .row > [class*="sixteen wide"].column, -.ui.grid > .column.row > [class*="sixteen wide"].column, -.ui.grid > [class*="sixteen wide"].column, -.ui.column.grid > [class*="sixteen wide"].column { - width: 100% !important; -} - -/* ---------------------- - Width per Device - ----------------------- */ - -/* Mobile Sizing Combinations */ - -@media only screen and (min-width: 320px) and (max-width: 767.98px) { - .ui.grid > .row > [class*="one wide mobile"].column, - .ui.grid > .column.row > [class*="one wide mobile"].column, - .ui.grid > [class*="one wide mobile"].column, - .ui.column.grid > [class*="one wide mobile"].column { - width: 6.25% !important; - } - - .ui.grid > .row > [class*="two wide mobile"].column, - .ui.grid > .column.row > [class*="two wide mobile"].column, - .ui.grid > [class*="two wide mobile"].column, - .ui.column.grid > [class*="two wide mobile"].column { - width: 12.5% !important; - } - - .ui.grid > .row > [class*="three wide mobile"].column, - .ui.grid > .column.row > [class*="three wide mobile"].column, - .ui.grid > [class*="three wide mobile"].column, - .ui.column.grid > [class*="three wide mobile"].column { - width: 18.75% !important; - } - - .ui.grid > .row > [class*="four wide mobile"].column, - .ui.grid > .column.row > [class*="four wide mobile"].column, - .ui.grid > [class*="four wide mobile"].column, - .ui.column.grid > [class*="four wide mobile"].column { - width: 25% !important; - } - - .ui.grid > .row > [class*="five wide mobile"].column, - .ui.grid > .column.row > [class*="five wide mobile"].column, - .ui.grid > [class*="five wide mobile"].column, - .ui.column.grid > [class*="five wide mobile"].column { - width: 31.25% !important; - } - - .ui.grid > .row > [class*="six wide mobile"].column, - .ui.grid > .column.row > [class*="six wide mobile"].column, - .ui.grid > [class*="six wide mobile"].column, - .ui.column.grid > [class*="six wide mobile"].column { - width: 37.5% !important; - } - - .ui.grid > .row > [class*="seven wide mobile"].column, - .ui.grid > .column.row > [class*="seven wide mobile"].column, - .ui.grid > [class*="seven wide mobile"].column, - .ui.column.grid > [class*="seven wide mobile"].column { - width: 43.75% !important; - } - - .ui.grid > .row > [class*="eight wide mobile"].column, - .ui.grid > .column.row > [class*="eight wide mobile"].column, - .ui.grid > [class*="eight wide mobile"].column, - .ui.column.grid > [class*="eight wide mobile"].column { - width: 50% !important; - } - - .ui.grid > .row > [class*="nine wide mobile"].column, - .ui.grid > .column.row > [class*="nine wide mobile"].column, - .ui.grid > [class*="nine wide mobile"].column, - .ui.column.grid > [class*="nine wide mobile"].column { - width: 56.25% !important; - } - - .ui.grid > .row > [class*="ten wide mobile"].column, - .ui.grid > .column.row > [class*="ten wide mobile"].column, - .ui.grid > [class*="ten wide mobile"].column, - .ui.column.grid > [class*="ten wide mobile"].column { - width: 62.5% !important; - } - - .ui.grid > .row > [class*="eleven wide mobile"].column, - .ui.grid > .column.row > [class*="eleven wide mobile"].column, - .ui.grid > [class*="eleven wide mobile"].column, - .ui.column.grid > [class*="eleven wide mobile"].column { - width: 68.75% !important; - } - - .ui.grid > .row > [class*="twelve wide mobile"].column, - .ui.grid > .column.row > [class*="twelve wide mobile"].column, - .ui.grid > [class*="twelve wide mobile"].column, - .ui.column.grid > [class*="twelve wide mobile"].column { - width: 75% !important; - } - - .ui.grid > .row > [class*="thirteen wide mobile"].column, - .ui.grid > .column.row > [class*="thirteen wide mobile"].column, - .ui.grid > [class*="thirteen wide mobile"].column, - .ui.column.grid > [class*="thirteen wide mobile"].column { - width: 81.25% !important; - } - - .ui.grid > .row > [class*="fourteen wide mobile"].column, - .ui.grid > .column.row > [class*="fourteen wide mobile"].column, - .ui.grid > [class*="fourteen wide mobile"].column, - .ui.column.grid > [class*="fourteen wide mobile"].column { - width: 87.5% !important; - } - - .ui.grid > .row > [class*="fifteen wide mobile"].column, - .ui.grid > .column.row > [class*="fifteen wide mobile"].column, - .ui.grid > [class*="fifteen wide mobile"].column, - .ui.column.grid > [class*="fifteen wide mobile"].column { - width: 93.75% !important; - } - - .ui.grid > .row > [class*="sixteen wide mobile"].column, - .ui.grid > .column.row > [class*="sixteen wide mobile"].column, - .ui.grid > [class*="sixteen wide mobile"].column, - .ui.column.grid > [class*="sixteen wide mobile"].column { - width: 100% !important; - } -} - -/* Tablet Sizing Combinations */ - -@media only screen and (min-width: 768px) and (max-width: 991.98px) { - .ui.grid > .row > [class*="one wide tablet"].column, - .ui.grid > .column.row > [class*="one wide tablet"].column, - .ui.grid > [class*="one wide tablet"].column, - .ui.column.grid > [class*="one wide tablet"].column { - width: 6.25% !important; - } - - .ui.grid > .row > [class*="two wide tablet"].column, - .ui.grid > .column.row > [class*="two wide tablet"].column, - .ui.grid > [class*="two wide tablet"].column, - .ui.column.grid > [class*="two wide tablet"].column { - width: 12.5% !important; - } - - .ui.grid > .row > [class*="three wide tablet"].column, - .ui.grid > .column.row > [class*="three wide tablet"].column, - .ui.grid > [class*="three wide tablet"].column, - .ui.column.grid > [class*="three wide tablet"].column { - width: 18.75% !important; - } - - .ui.grid > .row > [class*="four wide tablet"].column, - .ui.grid > .column.row > [class*="four wide tablet"].column, - .ui.grid > [class*="four wide tablet"].column, - .ui.column.grid > [class*="four wide tablet"].column { - width: 25% !important; - } - - .ui.grid > .row > [class*="five wide tablet"].column, - .ui.grid > .column.row > [class*="five wide tablet"].column, - .ui.grid > [class*="five wide tablet"].column, - .ui.column.grid > [class*="five wide tablet"].column { - width: 31.25% !important; - } - - .ui.grid > .row > [class*="six wide tablet"].column, - .ui.grid > .column.row > [class*="six wide tablet"].column, - .ui.grid > [class*="six wide tablet"].column, - .ui.column.grid > [class*="six wide tablet"].column { - width: 37.5% !important; - } - - .ui.grid > .row > [class*="seven wide tablet"].column, - .ui.grid > .column.row > [class*="seven wide tablet"].column, - .ui.grid > [class*="seven wide tablet"].column, - .ui.column.grid > [class*="seven wide tablet"].column { - width: 43.75% !important; - } - - .ui.grid > .row > [class*="eight wide tablet"].column, - .ui.grid > .column.row > [class*="eight wide tablet"].column, - .ui.grid > [class*="eight wide tablet"].column, - .ui.column.grid > [class*="eight wide tablet"].column { - width: 50% !important; - } - - .ui.grid > .row > [class*="nine wide tablet"].column, - .ui.grid > .column.row > [class*="nine wide tablet"].column, - .ui.grid > [class*="nine wide tablet"].column, - .ui.column.grid > [class*="nine wide tablet"].column { - width: 56.25% !important; - } - - .ui.grid > .row > [class*="ten wide tablet"].column, - .ui.grid > .column.row > [class*="ten wide tablet"].column, - .ui.grid > [class*="ten wide tablet"].column, - .ui.column.grid > [class*="ten wide tablet"].column { - width: 62.5% !important; - } - - .ui.grid > .row > [class*="eleven wide tablet"].column, - .ui.grid > .column.row > [class*="eleven wide tablet"].column, - .ui.grid > [class*="eleven wide tablet"].column, - .ui.column.grid > [class*="eleven wide tablet"].column { - width: 68.75% !important; - } - - .ui.grid > .row > [class*="twelve wide tablet"].column, - .ui.grid > .column.row > [class*="twelve wide tablet"].column, - .ui.grid > [class*="twelve wide tablet"].column, - .ui.column.grid > [class*="twelve wide tablet"].column { - width: 75% !important; - } - - .ui.grid > .row > [class*="thirteen wide tablet"].column, - .ui.grid > .column.row > [class*="thirteen wide tablet"].column, - .ui.grid > [class*="thirteen wide tablet"].column, - .ui.column.grid > [class*="thirteen wide tablet"].column { - width: 81.25% !important; - } - - .ui.grid > .row > [class*="fourteen wide tablet"].column, - .ui.grid > .column.row > [class*="fourteen wide tablet"].column, - .ui.grid > [class*="fourteen wide tablet"].column, - .ui.column.grid > [class*="fourteen wide tablet"].column { - width: 87.5% !important; - } - - .ui.grid > .row > [class*="fifteen wide tablet"].column, - .ui.grid > .column.row > [class*="fifteen wide tablet"].column, - .ui.grid > [class*="fifteen wide tablet"].column, - .ui.column.grid > [class*="fifteen wide tablet"].column { - width: 93.75% !important; - } - - .ui.grid > .row > [class*="sixteen wide tablet"].column, - .ui.grid > .column.row > [class*="sixteen wide tablet"].column, - .ui.grid > [class*="sixteen wide tablet"].column, - .ui.column.grid > [class*="sixteen wide tablet"].column { - width: 100% !important; - } -} - -/* Computer/Desktop Sizing Combinations */ - -@media only screen and (min-width: 992px) { - .ui.grid > .row > [class*="one wide computer"].column, - .ui.grid > .column.row > [class*="one wide computer"].column, - .ui.grid > [class*="one wide computer"].column, - .ui.column.grid > [class*="one wide computer"].column { - width: 6.25% !important; - } - - .ui.grid > .row > [class*="two wide computer"].column, - .ui.grid > .column.row > [class*="two wide computer"].column, - .ui.grid > [class*="two wide computer"].column, - .ui.column.grid > [class*="two wide computer"].column { - width: 12.5% !important; - } - - .ui.grid > .row > [class*="three wide computer"].column, - .ui.grid > .column.row > [class*="three wide computer"].column, - .ui.grid > [class*="three wide computer"].column, - .ui.column.grid > [class*="three wide computer"].column { - width: 18.75% !important; - } - - .ui.grid > .row > [class*="four wide computer"].column, - .ui.grid > .column.row > [class*="four wide computer"].column, - .ui.grid > [class*="four wide computer"].column, - .ui.column.grid > [class*="four wide computer"].column { - width: 25% !important; - } - - .ui.grid > .row > [class*="five wide computer"].column, - .ui.grid > .column.row > [class*="five wide computer"].column, - .ui.grid > [class*="five wide computer"].column, - .ui.column.grid > [class*="five wide computer"].column { - width: 31.25% !important; - } - - .ui.grid > .row > [class*="six wide computer"].column, - .ui.grid > .column.row > [class*="six wide computer"].column, - .ui.grid > [class*="six wide computer"].column, - .ui.column.grid > [class*="six wide computer"].column { - width: 37.5% !important; - } - - .ui.grid > .row > [class*="seven wide computer"].column, - .ui.grid > .column.row > [class*="seven wide computer"].column, - .ui.grid > [class*="seven wide computer"].column, - .ui.column.grid > [class*="seven wide computer"].column { - width: 43.75% !important; - } - - .ui.grid > .row > [class*="eight wide computer"].column, - .ui.grid > .column.row > [class*="eight wide computer"].column, - .ui.grid > [class*="eight wide computer"].column, - .ui.column.grid > [class*="eight wide computer"].column { - width: 50% !important; - } - - .ui.grid > .row > [class*="nine wide computer"].column, - .ui.grid > .column.row > [class*="nine wide computer"].column, - .ui.grid > [class*="nine wide computer"].column, - .ui.column.grid > [class*="nine wide computer"].column { - width: 56.25% !important; - } - - .ui.grid > .row > [class*="ten wide computer"].column, - .ui.grid > .column.row > [class*="ten wide computer"].column, - .ui.grid > [class*="ten wide computer"].column, - .ui.column.grid > [class*="ten wide computer"].column { - width: 62.5% !important; - } - - .ui.grid > .row > [class*="eleven wide computer"].column, - .ui.grid > .column.row > [class*="eleven wide computer"].column, - .ui.grid > [class*="eleven wide computer"].column, - .ui.column.grid > [class*="eleven wide computer"].column { - width: 68.75% !important; - } - - .ui.grid > .row > [class*="twelve wide computer"].column, - .ui.grid > .column.row > [class*="twelve wide computer"].column, - .ui.grid > [class*="twelve wide computer"].column, - .ui.column.grid > [class*="twelve wide computer"].column { - width: 75% !important; - } - - .ui.grid > .row > [class*="thirteen wide computer"].column, - .ui.grid > .column.row > [class*="thirteen wide computer"].column, - .ui.grid > [class*="thirteen wide computer"].column, - .ui.column.grid > [class*="thirteen wide computer"].column { - width: 81.25% !important; - } - - .ui.grid > .row > [class*="fourteen wide computer"].column, - .ui.grid > .column.row > [class*="fourteen wide computer"].column, - .ui.grid > [class*="fourteen wide computer"].column, - .ui.column.grid > [class*="fourteen wide computer"].column { - width: 87.5% !important; - } - - .ui.grid > .row > [class*="fifteen wide computer"].column, - .ui.grid > .column.row > [class*="fifteen wide computer"].column, - .ui.grid > [class*="fifteen wide computer"].column, - .ui.column.grid > [class*="fifteen wide computer"].column { - width: 93.75% !important; - } - - .ui.grid > .row > [class*="sixteen wide computer"].column, - .ui.grid > .column.row > [class*="sixteen wide computer"].column, - .ui.grid > [class*="sixteen wide computer"].column, - .ui.column.grid > [class*="sixteen wide computer"].column { - width: 100% !important; - } -} - -/* Large Monitor Sizing Combinations */ - -@media only screen and (min-width: 1200px) and (max-width: 1919.98px) { - .ui.grid > .row > [class*="one wide large screen"].column, - .ui.grid > .column.row > [class*="one wide large screen"].column, - .ui.grid > [class*="one wide large screen"].column, - .ui.column.grid > [class*="one wide large screen"].column { - width: 6.25% !important; - } - - .ui.grid > .row > [class*="two wide large screen"].column, - .ui.grid > .column.row > [class*="two wide large screen"].column, - .ui.grid > [class*="two wide large screen"].column, - .ui.column.grid > [class*="two wide large screen"].column { - width: 12.5% !important; - } - - .ui.grid > .row > [class*="three wide large screen"].column, - .ui.grid > .column.row > [class*="three wide large screen"].column, - .ui.grid > [class*="three wide large screen"].column, - .ui.column.grid > [class*="three wide large screen"].column { - width: 18.75% !important; - } - - .ui.grid > .row > [class*="four wide large screen"].column, - .ui.grid > .column.row > [class*="four wide large screen"].column, - .ui.grid > [class*="four wide large screen"].column, - .ui.column.grid > [class*="four wide large screen"].column { - width: 25% !important; - } - - .ui.grid > .row > [class*="five wide large screen"].column, - .ui.grid > .column.row > [class*="five wide large screen"].column, - .ui.grid > [class*="five wide large screen"].column, - .ui.column.grid > [class*="five wide large screen"].column { - width: 31.25% !important; - } - - .ui.grid > .row > [class*="six wide large screen"].column, - .ui.grid > .column.row > [class*="six wide large screen"].column, - .ui.grid > [class*="six wide large screen"].column, - .ui.column.grid > [class*="six wide large screen"].column { - width: 37.5% !important; - } - - .ui.grid > .row > [class*="seven wide large screen"].column, - .ui.grid > .column.row > [class*="seven wide large screen"].column, - .ui.grid > [class*="seven wide large screen"].column, - .ui.column.grid > [class*="seven wide large screen"].column { - width: 43.75% !important; - } - - .ui.grid > .row > [class*="eight wide large screen"].column, - .ui.grid > .column.row > [class*="eight wide large screen"].column, - .ui.grid > [class*="eight wide large screen"].column, - .ui.column.grid > [class*="eight wide large screen"].column { - width: 50% !important; - } - - .ui.grid > .row > [class*="nine wide large screen"].column, - .ui.grid > .column.row > [class*="nine wide large screen"].column, - .ui.grid > [class*="nine wide large screen"].column, - .ui.column.grid > [class*="nine wide large screen"].column { - width: 56.25% !important; - } - - .ui.grid > .row > [class*="ten wide large screen"].column, - .ui.grid > .column.row > [class*="ten wide large screen"].column, - .ui.grid > [class*="ten wide large screen"].column, - .ui.column.grid > [class*="ten wide large screen"].column { - width: 62.5% !important; - } - - .ui.grid > .row > [class*="eleven wide large screen"].column, - .ui.grid > .column.row > [class*="eleven wide large screen"].column, - .ui.grid > [class*="eleven wide large screen"].column, - .ui.column.grid > [class*="eleven wide large screen"].column { - width: 68.75% !important; - } - - .ui.grid > .row > [class*="twelve wide large screen"].column, - .ui.grid > .column.row > [class*="twelve wide large screen"].column, - .ui.grid > [class*="twelve wide large screen"].column, - .ui.column.grid > [class*="twelve wide large screen"].column { - width: 75% !important; - } - - .ui.grid > .row > [class*="thirteen wide large screen"].column, - .ui.grid > .column.row > [class*="thirteen wide large screen"].column, - .ui.grid > [class*="thirteen wide large screen"].column, - .ui.column.grid > [class*="thirteen wide large screen"].column { - width: 81.25% !important; - } - - .ui.grid > .row > [class*="fourteen wide large screen"].column, - .ui.grid > .column.row > [class*="fourteen wide large screen"].column, - .ui.grid > [class*="fourteen wide large screen"].column, - .ui.column.grid > [class*="fourteen wide large screen"].column { - width: 87.5% !important; - } - - .ui.grid > .row > [class*="fifteen wide large screen"].column, - .ui.grid > .column.row > [class*="fifteen wide large screen"].column, - .ui.grid > [class*="fifteen wide large screen"].column, - .ui.column.grid > [class*="fifteen wide large screen"].column { - width: 93.75% !important; - } - - .ui.grid > .row > [class*="sixteen wide large screen"].column, - .ui.grid > .column.row > [class*="sixteen wide large screen"].column, - .ui.grid > [class*="sixteen wide large screen"].column, - .ui.column.grid > [class*="sixteen wide large screen"].column { - width: 100% !important; - } -} - -/* Widescreen Sizing Combinations */ - -@media only screen and (min-width: 1920px) { - .ui.grid > .row > [class*="one wide widescreen"].column, - .ui.grid > .column.row > [class*="one wide widescreen"].column, - .ui.grid > [class*="one wide widescreen"].column, - .ui.column.grid > [class*="one wide widescreen"].column { - width: 6.25% !important; - } - - .ui.grid > .row > [class*="two wide widescreen"].column, - .ui.grid > .column.row > [class*="two wide widescreen"].column, - .ui.grid > [class*="two wide widescreen"].column, - .ui.column.grid > [class*="two wide widescreen"].column { - width: 12.5% !important; - } - - .ui.grid > .row > [class*="three wide widescreen"].column, - .ui.grid > .column.row > [class*="three wide widescreen"].column, - .ui.grid > [class*="three wide widescreen"].column, - .ui.column.grid > [class*="three wide widescreen"].column { - width: 18.75% !important; - } - - .ui.grid > .row > [class*="four wide widescreen"].column, - .ui.grid > .column.row > [class*="four wide widescreen"].column, - .ui.grid > [class*="four wide widescreen"].column, - .ui.column.grid > [class*="four wide widescreen"].column { - width: 25% !important; - } - - .ui.grid > .row > [class*="five wide widescreen"].column, - .ui.grid > .column.row > [class*="five wide widescreen"].column, - .ui.grid > [class*="five wide widescreen"].column, - .ui.column.grid > [class*="five wide widescreen"].column { - width: 31.25% !important; - } - - .ui.grid > .row > [class*="six wide widescreen"].column, - .ui.grid > .column.row > [class*="six wide widescreen"].column, - .ui.grid > [class*="six wide widescreen"].column, - .ui.column.grid > [class*="six wide widescreen"].column { - width: 37.5% !important; - } - - .ui.grid > .row > [class*="seven wide widescreen"].column, - .ui.grid > .column.row > [class*="seven wide widescreen"].column, - .ui.grid > [class*="seven wide widescreen"].column, - .ui.column.grid > [class*="seven wide widescreen"].column { - width: 43.75% !important; - } - - .ui.grid > .row > [class*="eight wide widescreen"].column, - .ui.grid > .column.row > [class*="eight wide widescreen"].column, - .ui.grid > [class*="eight wide widescreen"].column, - .ui.column.grid > [class*="eight wide widescreen"].column { - width: 50% !important; - } - - .ui.grid > .row > [class*="nine wide widescreen"].column, - .ui.grid > .column.row > [class*="nine wide widescreen"].column, - .ui.grid > [class*="nine wide widescreen"].column, - .ui.column.grid > [class*="nine wide widescreen"].column { - width: 56.25% !important; - } - - .ui.grid > .row > [class*="ten wide widescreen"].column, - .ui.grid > .column.row > [class*="ten wide widescreen"].column, - .ui.grid > [class*="ten wide widescreen"].column, - .ui.column.grid > [class*="ten wide widescreen"].column { - width: 62.5% !important; - } - - .ui.grid > .row > [class*="eleven wide widescreen"].column, - .ui.grid > .column.row > [class*="eleven wide widescreen"].column, - .ui.grid > [class*="eleven wide widescreen"].column, - .ui.column.grid > [class*="eleven wide widescreen"].column { - width: 68.75% !important; - } - - .ui.grid > .row > [class*="twelve wide widescreen"].column, - .ui.grid > .column.row > [class*="twelve wide widescreen"].column, - .ui.grid > [class*="twelve wide widescreen"].column, - .ui.column.grid > [class*="twelve wide widescreen"].column { - width: 75% !important; - } - - .ui.grid > .row > [class*="thirteen wide widescreen"].column, - .ui.grid > .column.row > [class*="thirteen wide widescreen"].column, - .ui.grid > [class*="thirteen wide widescreen"].column, - .ui.column.grid > [class*="thirteen wide widescreen"].column { - width: 81.25% !important; - } - - .ui.grid > .row > [class*="fourteen wide widescreen"].column, - .ui.grid > .column.row > [class*="fourteen wide widescreen"].column, - .ui.grid > [class*="fourteen wide widescreen"].column, - .ui.column.grid > [class*="fourteen wide widescreen"].column { - width: 87.5% !important; - } - - .ui.grid > .row > [class*="fifteen wide widescreen"].column, - .ui.grid > .column.row > [class*="fifteen wide widescreen"].column, - .ui.grid > [class*="fifteen wide widescreen"].column, - .ui.column.grid > [class*="fifteen wide widescreen"].column { - width: 93.75% !important; - } - - .ui.grid > .row > [class*="sixteen wide widescreen"].column, - .ui.grid > .column.row > [class*="sixteen wide widescreen"].column, - .ui.grid > [class*="sixteen wide widescreen"].column, - .ui.column.grid > [class*="sixteen wide widescreen"].column { - width: 100% !important; - } -} - -/* ---------------------- - Centered - ----------------------- */ - -.ui.centered.grid, -.ui.centered.grid > .row, -.ui.grid > .centered.row { - text-align: center; - justify-content: center; -} - -.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row), -.ui.centered.grid > .row > .column:not(.aligned):not(.justified), -.ui.grid .centered.row > .column:not(.aligned):not(.justified) { - text-align: left; -} - -.ui.grid > .centered.column, -.ui.grid > .row > .centered.column { - display: block; - margin-left: auto; - margin-right: auto; -} - -/* ---------------------- - Relaxed - ----------------------- */ - -.ui.relaxed.grid > .column:not(.row), -.ui.relaxed.grid > .row > .column, -.ui.grid > .relaxed.row > .column { - padding-left: 1.5rem; - padding-right: 1.5rem; -} - -.ui[class*="very relaxed"].grid > .column:not(.row), -.ui[class*="very relaxed"].grid > .row > .column, -.ui.grid > [class*="very relaxed"].row > .column { - padding-left: 2.5rem; - padding-right: 2.5rem; -} - -/* Coupling with UI Divider */ - -.ui.relaxed.grid .row + .ui.divider, -.ui.grid .relaxed.row + .ui.divider { - margin-left: 1.5rem; - margin-right: 1.5rem; -} - -.ui[class*="very relaxed"].grid .row + .ui.divider, -.ui.grid [class*="very relaxed"].row + .ui.divider { - margin-left: 2.5rem; - margin-right: 2.5rem; -} - -/* ---------------------- - Padded - ----------------------- */ - -.ui.padded.grid:not(.vertically):not(.horizontally) { - margin: 0; -} - -[class*="horizontally padded"].ui.grid { - margin-left: 0; - margin-right: 0; -} - -[class*="vertically padded"].ui.grid { - margin-top: 0; - margin-bottom: 0; -} - -/* ---------------------- - "Floated" - ----------------------- */ - -.ui.grid [class*="left floated"].column { - margin-right: auto; -} - -.ui.grid [class*="right floated"].column { - margin-left: auto; -} - -/* ---------------------- - Divided - ----------------------- */ - -.ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row), -.ui.divided.grid:not([class*="vertically divided"]) > .row > .column { - box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15); -} - -/* Swap from padding to margin on columns to have dividers align */ - -.ui[class*="vertically divided"].grid > .column:not(.row), -.ui[class*="vertically divided"].grid > .row > .column { - margin-top: 1rem; - margin-bottom: 1rem; - padding-top: 0; - padding-bottom: 0; -} - -.ui[class*="vertically divided"].grid > .row { - margin-top: 0; - margin-bottom: 0; -} - -/* No divider on first column on row */ - -.ui.divided.grid:not([class*="vertically divided"]) > .column:first-child, -.ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { - box-shadow: none; -} - -/* No space on top of first row */ - -.ui[class*="vertically divided"].grid > .row:first-child > .column { - margin-top: 0; -} - -/* Divided Row */ - -.ui.grid > .divided.row > .column { - box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15); -} - -.ui.grid > .divided.row > .column:first-child { - box-shadow: none; -} - -/* Vertically Divided */ - -.ui[class*="vertically divided"].grid > .row { - position: relative; -} - -.ui[class*="vertically divided"].grid > .row::before { - position: absolute; - content: ""; - top: 0; - left: 0; - width: calc(100% - 2rem); - height: 1px; - margin: 0 1rem; - box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15); -} - -/* Padded Horizontally Divided */ - -[class*="horizontally padded"].ui.divided.grid, -.ui.padded.divided.grid:not(.vertically):not(.horizontally) { - width: 100%; -} - -/* First Row Vertically Divided */ - -.ui[class*="vertically divided"].grid > .row:first-child::before { - box-shadow: none; -} - -/* Inverted Divided */ - -.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row), -.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column { - box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.1); -} - -.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child, -.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { - box-shadow: none; -} - -.ui.inverted[class*="vertically divided"].grid > .row::before { - box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.1); -} - -/* Relaxed */ - -.ui.relaxed[class*="vertically divided"].grid > .row::before { - margin-left: 1.5rem; - margin-right: 1.5rem; - width: calc(100% - 3rem); -} - -.ui[class*="very relaxed"][class*="vertically divided"].grid > .row::before { - margin-left: 2.5rem; - margin-right: 2.5rem; - width: calc(100% - 5rem); -} - -/* ---------------------- - Celled - ----------------------- */ - -.ui.celled.grid { - width: 100%; - margin: 1em 0; - box-shadow: 0 0 0 1px #d4d4d5; -} - -.ui.celled.grid > .row { - width: 100% !important; - margin: 0; - padding: 0; - box-shadow: 0 -1px 0 0 #d4d4d5; -} - -.ui.celled.grid > .column:not(.row), -.ui.celled.grid > .row > .column { - box-shadow: -1px 0 0 0 #d4d4d5; -} - -.ui.celled.grid > .column:first-child, -.ui.celled.grid > .row > .column:first-child { - box-shadow: none; -} - -.ui.celled.grid > .column:not(.row), -.ui.celled.grid > .row > .column { - padding: 1em; -} - -.ui.relaxed.celled.grid > .column:not(.row), -.ui.relaxed.celled.grid > .row > .column { - padding: 1.5em; -} - -.ui[class*="very relaxed"].celled.grid > .column:not(.row), -.ui[class*="very relaxed"].celled.grid > .row > .column { - padding: 2em; -} - -/* Internally Celled */ - -.ui[class*="internally celled"].grid { - box-shadow: none; - margin: 0; -} - -.ui[class*="internally celled"].grid > .row:first-child { - box-shadow: none; -} - -.ui[class*="internally celled"].grid > .row > .column:first-child { - box-shadow: none; -} - -/* ---------------------- - Vertically Aligned - ----------------------- */ - -/* Top Aligned */ - -.ui[class*="top aligned"].grid > .column:not(.row), -.ui[class*="top aligned"].grid > .row > .column, -.ui.grid > [class*="top aligned"].row > .column, -.ui.grid > [class*="top aligned"].column:not(.row), -.ui.grid > .row > [class*="top aligned"].column { - flex-direction: column; - vertical-align: top; - align-self: flex-start !important; -} - -/* Middle Aligned */ - -.ui[class*="middle aligned"].grid > .column:not(.row), -.ui[class*="middle aligned"].grid > .row > .column, -.ui.grid > [class*="middle aligned"].row > .column, -.ui.grid > [class*="middle aligned"].column:not(.row), -.ui.grid > .row > [class*="middle aligned"].column { - flex-direction: column; - vertical-align: middle; - align-self: center !important; -} - -/* Bottom Aligned */ - -.ui[class*="bottom aligned"].grid > .column:not(.row), -.ui[class*="bottom aligned"].grid > .row > .column, -.ui.grid > [class*="bottom aligned"].row > .column, -.ui.grid > [class*="bottom aligned"].column:not(.row), -.ui.grid > .row > [class*="bottom aligned"].column { - flex-direction: column; - vertical-align: bottom; - align-self: flex-end !important; -} - -/* Stretched */ - -.ui.stretched.grid > .row > .column, -.ui.stretched.grid > .column, -.ui.grid > .stretched.row > .column, -.ui.grid > .stretched.column:not(.row), -.ui.grid > .row > .stretched.column { - display: inline-flex !important; - align-self: stretch; - flex-direction: column; -} - -.ui.stretched.grid > .row > .column > *, -.ui.stretched.grid > .column > *, -.ui.grid > .stretched.row > .column > *, -.ui.grid > .stretched.column:not(.row) > *, -.ui.grid > .row > .stretched.column > * { - flex-grow: 1; -} - -/* ---------------------- - Horizontally Centered - ----------------------- */ - -/* Left Aligned */ - -.ui[class*="left aligned"].grid > .column, -.ui[class*="left aligned"].grid > .row > .column, -.ui.grid > [class*="left aligned"].row > .column, -.ui.ui.grid > [class*="left aligned"].column, -.ui.ui.grid > .row > [class*="left aligned"].column { - text-align: left; - align-self: inherit; -} - -/* Center Aligned */ - -.ui[class*="center aligned"].grid > .column, -.ui[class*="center aligned"].grid > .row > .column, -.ui.grid > [class*="center aligned"].row > .column, -.ui.ui.grid > [class*="center aligned"].column, -.ui.ui.grid > .row > [class*="center aligned"].column { - text-align: center; - align-self: inherit; -} - -.ui[class*="center aligned"].grid { - justify-content: center; -} - -/* Right Aligned */ - -.ui[class*="right aligned"].grid > .column, -.ui[class*="right aligned"].grid > .row > .column, -.ui.grid > [class*="right aligned"].row > .column, -.ui.ui.grid > [class*="right aligned"].column, -.ui.ui.grid > .row > [class*="right aligned"].column { - text-align: right; - align-self: inherit; -} - -/* Justified */ - -.ui.justified.grid > .column, -.ui.justified.grid > .row > .column, -.ui.grid > .justified.row > .column, -.ui.ui.grid > .justified.column, -.ui.ui.grid > .row > .justified.column { - text-align: justify; - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; -} - -/* ---------------------- - Colored ------------------------ */ - -.ui.grid > .primary.row, -.ui.grid > .primary.column, -.ui.grid > .row > .primary.column { - background-color: #2185d0; - color: #fff; -} - -.ui.grid > .secondary.row, -.ui.grid > .secondary.column, -.ui.grid > .row > .secondary.column { - background-color: #1b1c1d; - color: #fff; -} - -.ui.grid > .red.row, -.ui.grid > .red.column, -.ui.grid > .row > .red.column { - background-color: #db2828; - color: #fff; -} - -.ui.grid > .orange.row, -.ui.grid > .orange.column, -.ui.grid > .row > .orange.column { - background-color: #f2711c; - color: #fff; -} - -.ui.grid > .yellow.row, -.ui.grid > .yellow.column, -.ui.grid > .row > .yellow.column { - background-color: #fbbd08; - color: #fff; -} - -.ui.grid > .olive.row, -.ui.grid > .olive.column, -.ui.grid > .row > .olive.column { - background-color: #b5cc18; - color: #fff; -} - -.ui.grid > .green.row, -.ui.grid > .green.column, -.ui.grid > .row > .green.column { - background-color: #21ba45; - color: #fff; -} - -.ui.grid > .teal.row, -.ui.grid > .teal.column, -.ui.grid > .row > .teal.column { - background-color: #00b5ad; - color: #fff; -} - -.ui.grid > .blue.row, -.ui.grid > .blue.column, -.ui.grid > .row > .blue.column { - background-color: #2185d0; - color: #fff; -} - -.ui.grid > .violet.row, -.ui.grid > .violet.column, -.ui.grid > .row > .violet.column { - background-color: #6435c9; - color: #fff; -} - -.ui.grid > .purple.row, -.ui.grid > .purple.column, -.ui.grid > .row > .purple.column { - background-color: #a333c8; - color: #fff; -} - -.ui.grid > .pink.row, -.ui.grid > .pink.column, -.ui.grid > .row > .pink.column { - background-color: #e03997; - color: #fff; -} - -.ui.grid > .brown.row, -.ui.grid > .brown.column, -.ui.grid > .row > .brown.column { - background-color: #a5673f; - color: #fff; -} - -.ui.grid > .grey.row, -.ui.grid > .grey.column, -.ui.grid > .row > .grey.column { - background-color: #767676; - color: #fff; -} - -.ui.grid > .black.row, -.ui.grid > .black.column, -.ui.grid > .row > .black.column { - background-color: #1b1c1d; - color: #fff; -} - -/* ---------------------- - Equal Width - ----------------------- */ - -.ui[class*="equal width"].grid > .column:not(.row), -.ui[class*="equal width"].grid > .row > .column, -.ui.grid > [class*="equal width"].row > .column { - display: inline-block; - flex-grow: 1; -} - -.ui[class*="equal width"].grid > .wide.column, -.ui[class*="equal width"].grid > .row > .wide.column, -.ui.grid > [class*="equal width"].row > .wide.column { - flex-grow: 0; -} - -/* ---------------------- - Reverse - ----------------------- */ - -/* Mobile */ - -@media only screen and (max-width: 767.98px) { - .ui[class*="mobile reversed"].grid, - .ui[class*="mobile reversed"].grid > .row, - .ui.grid > [class*="mobile reversed"].row { - flex-direction: row-reverse; - } - - .ui[class*="mobile vertically reversed"].grid, - .ui.stackable[class*="mobile reversed"] { - flex-direction: column-reverse; - } - - /* Divided Reversed */ - - .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, - .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { - box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15); - } - - .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, - .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { - box-shadow: none; - } - - /* Vertically Divided Reversed */ - - .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child::before { - box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15); - } - - .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child::before { - box-shadow: none; - } - - /* Celled Reversed */ - - .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child { - box-shadow: -1px 0 0 0 #d4d4d5; - } - - .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child { - box-shadow: none; - } -} - -/* Tablet */ - -@media only screen and (min-width: 768px) and (max-width: 991.98px) { - .ui[class*="tablet reversed"].grid, - .ui[class*="tablet reversed"].grid > .row, - .ui.grid > [class*="tablet reversed"].row { - flex-direction: row-reverse; - } - - .ui[class*="tablet vertically reversed"].grid { - flex-direction: column-reverse; - } - - /* Divided Reversed */ - - .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, - .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { - box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15); - } - - .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, - .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { - box-shadow: none; - } - - /* Vertically Divided Reversed */ - - .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child::before { - box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15); - } - - .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child::before { - box-shadow: none; - } - - /* Celled Reversed */ - - .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child { - box-shadow: -1px 0 0 0 #d4d4d5; - } - - .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child { - box-shadow: none; - } -} - -/* Computer */ - -@media only screen and (min-width: 992px) { - .ui[class*="computer reversed"].grid, - .ui[class*="computer reversed"].grid > .row, - .ui.grid > [class*="computer reversed"].row { - flex-direction: row-reverse; - } - - .ui[class*="computer vertically reversed"].grid { - flex-direction: column-reverse; - } - - /* Divided Reversed */ - - .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, - .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { - box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15); - } - - .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, - .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { - box-shadow: none; - } - - /* Vertically Divided Reversed */ - - .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child::before { - box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15); - } - - .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child::before { - box-shadow: none; - } - - /* Celled Reversed */ - - .ui[class*="computer reversed"].celled.grid > .row > .column:first-child { - box-shadow: -1px 0 0 0 #d4d4d5; - } - - .ui[class*="computer reversed"].celled.grid > .row > .column:last-child { - box-shadow: none; - } -} - -/* ------------------- - Doubling - -------------------- */ - -/* Tablet Only */ - -@media only screen and (min-width: 768px) and (max-width: 991.98px) { - .ui.doubling.grid { - width: auto; - } - - .ui.grid > .doubling.row, - .ui.doubling.grid > .row { - margin: 0 !important; - padding: 0 !important; - } - - .ui.grid > .doubling.row > .column, - .ui.doubling.grid > .row > .column { - padding-top: 1rem !important; - padding-bottom: 1rem !important; - box-shadow: none !important; - margin: 0; - } - - .ui.grid:not(.stretched) > .doubling.row:not(.stretched) > .column:not(.stretched), - .ui.doubling.grid:not(.stretched) > .row:not(.stretched) > .column:not(.stretched) { - display: inline-block !important; - } - - .ui[class*="two column"].doubling.grid > .row > .column, - .ui[class*="two column"].doubling.grid > .column:not(.row), - .ui.ui.grid > [class*="two column"].doubling.row > .column { - width: 100% !important; - } - - .ui[class*="three column"].doubling.grid > .row > .column, - .ui[class*="three column"].doubling.grid > .column:not(.row), - .ui.ui.grid > [class*="three column"].doubling.row > .column { - width: 50% !important; - } - - .ui[class*="four column"].doubling.grid > .row > .column, - .ui[class*="four column"].doubling.grid > .column:not(.row), - .ui.ui.grid > [class*="four column"].doubling.row > .column { - width: 50% !important; - } - - .ui[class*="five column"].doubling.grid > .row > .column, - .ui[class*="five column"].doubling.grid > .column:not(.row), - .ui.ui.grid > [class*="five column"].doubling.row > .column { - width: 33.33333333% !important; - } - - .ui[class*="six column"].doubling.grid > .row > .column, - .ui[class*="six column"].doubling.grid > .column:not(.row), - .ui.ui.grid > [class*="six column"].doubling.row > .column { - width: 33.33333333% !important; - } - - .ui[class*="seven column"].doubling.grid > .row > .column, - .ui[class*="seven column"].doubling.grid > .column:not(.row), - .ui.ui.grid > [class*="seven column"].doubling.row > .column { - width: 33.33333333% !important; - } - - .ui[class*="eight column"].doubling.grid > .row > .column, - .ui[class*="eight column"].doubling.grid > .column:not(.row), - .ui.ui.grid > [class*="eight column"].doubling.row > .column { - width: 25% !important; - } - - .ui[class*="nine column"].doubling.grid > .row > .column, - .ui[class*="nine column"].doubling.grid > .column:not(.row), - .ui.ui.grid > [class*="nine column"].doubling.row > .column { - width: 25% !important; - } - - .ui[class*="ten column"].doubling.grid > .row > .column, - .ui[class*="ten column"].doubling.grid > .column:not(.row), - .ui.ui.grid > [class*="ten column"].doubling.row > .column { - width: 20% !important; - } - - .ui[class*="eleven column"].doubling.grid > .row > .column, - .ui[class*="eleven column"].doubling.grid > .column:not(.row), - .ui.ui.grid > [class*="eleven column"].doubling.row > .column { - width: 20% !important; - } - - .ui[class*="twelve column"].doubling.grid > .row > .column, - .ui[class*="twelve column"].doubling.grid > .column:not(.row), - .ui.ui.grid > [class*="twelve column"].doubling.row > .column { - width: 16.66666667% !important; - } - - .ui[class*="thirteen column"].doubling.grid > .row > .column, - .ui[class*="thirteen column"].doubling.grid > .column:not(.row), - .ui.ui.grid > [class*="thirteen column"].doubling.row > .column { - width: 16.66666667% !important; - } - - .ui[class*="fourteen column"].doubling.grid > .row > .column, - .ui[class*="fourteen column"].doubling.grid > .column:not(.row), - .ui.ui.grid > [class*="fourteen column"].doubling.row > .column { - width: 14.28571429% !important; - } - - .ui[class*="fifteen column"].doubling.grid > .row > .column, - .ui[class*="fifteen column"].doubling.grid > .column:not(.row), - .ui.ui.grid > [class*="fifteen column"].doubling.row > .column { - width: 14.28571429% !important; - } - - .ui[class*="sixteen column"].doubling.grid > .row > .column, - .ui[class*="sixteen column"].doubling.grid > .column:not(.row), - .ui.ui.grid > [class*="sixteen column"].doubling.row > .column { - width: 12.5% !important; - } -} - -/* Mobile Only */ - -@media only screen and (max-width: 767.98px) { - .ui.grid > .doubling.row, - .ui.doubling.grid > .row { - margin: 0 !important; - padding: 0 !important; - } - - .ui.grid > .doubling.row > .column, - .ui.doubling.grid > .row > .column { - padding-top: 1rem !important; - padding-bottom: 1rem !important; - margin: 0 !important; - box-shadow: none !important; - } - - .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.ui.grid > [class*="two column"].doubling:not(.stackable).row > .column { - width: 100% !important; - } - - .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.ui.grid > [class*="three column"].doubling:not(.stackable).row > .column { - width: 50% !important; - } - - .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.ui.grid > [class*="four column"].doubling:not(.stackable).row > .column { - width: 50% !important; - } - - .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.ui.grid > [class*="five column"].doubling:not(.stackable).row > .column { - width: 50% !important; - } - - .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.ui.grid > [class*="six column"].doubling:not(.stackable).row > .column { - width: 50% !important; - } - - .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.ui.grid > [class*="seven column"].doubling:not(.stackable).row > .column { - width: 50% !important; - } - - .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.ui.grid > [class*="eight column"].doubling:not(.stackable).row > .column { - width: 50% !important; - } - - .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.ui.grid > [class*="nine column"].doubling:not(.stackable).row > .column { - width: 33.33333333% !important; - } - - .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.ui.grid > [class*="ten column"].doubling:not(.stackable).row > .column { - width: 33.33333333% !important; - } - - .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.ui.grid > [class*="eleven column"].doubling:not(.stackable).row > .column { - width: 33.33333333% !important; - } - - .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.ui.grid > [class*="twelve column"].doubling:not(.stackable).row > .column { - width: 33.33333333% !important; - } - - .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.ui.grid > [class*="thirteen column"].doubling:not(.stackable).row > .column { - width: 33.33333333% !important; - } - - .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.ui.grid > [class*="fourteen column"].doubling:not(.stackable).row > .column { - width: 25% !important; - } - - .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.ui.grid > [class*="fifteen column"].doubling:not(.stackable).row > .column { - width: 25% !important; - } - - .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.ui.grid > [class*="sixteen column"].doubling:not(.stackable).row > .column { - width: 25% !important; - } -} - -/* ------------------- - Stackable - -------------------- */ - -@media only screen and (max-width: 767.98px) { - body > .ui.stackable.grid, - .ui:not(.segment):not(.grid) .ui.stackable.grid { - width: auto; - margin-left: 0; - margin-right: 0; - } - - .ui.stackable.grid > .row > .wide.column, - .ui.stackable.grid > .wide.column, - .ui.stackable.grid > .column.grid > .column, - .ui.stackable.grid > .column.row > .column, - .ui.stackable.grid > .row > .column, - .ui.stackable.grid > .column:not(.row), - .ui.grid > .stackable.stackable.stackable.row > .column { - width: 100% !important; - margin: 0 !important; - box-shadow: none !important; - padding: 1rem 1rem; - } - - .ui.stackable.grid:not(.vertically) > .row { - margin: 0; - padding: 0; - } - - /* Coupling */ - - .ui.container > .ui.stackable.grid > .column, - .ui.container > .ui.stackable.grid > .row > .column { - padding-left: 0 !important; - padding-right: 0 !important; - } - - /* Don't pad inside segment or nested grid */ - - .ui.grid .ui.stackable.grid, - .ui.segment:not(.vertical) .ui.stackable.page.grid { - margin-left: -1rem; - margin-right: -1rem; - } - - /* Divided Stackable */ - - .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:not(.row):first-child, - .ui.stackable.celled.grid > .column:not(.row):first-child { - border-top: none !important; - } - - .ui.inverted.stackable.celled.grid > .column:not(.row), - .ui.inverted.stackable.divided.grid > .column:not(.row), - .ui.inverted.stackable.celled.grid > .row > .column, - .ui.inverted.stackable.divided.grid > .row > .column { - border-top: 1px solid rgba(255, 255, 255, 0.1); - } - - .ui.stackable.celled.grid > .column:not(.row), - .ui.stackable.divided:not(.vertically).grid > .column:not(.row), - .ui.stackable.celled.grid > .row > .column, - .ui.stackable.divided:not(.vertically).grid > .row > .column { - border-top: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: none !important; - padding-top: 2rem !important; - padding-bottom: 2rem !important; - } - - .ui.stackable.celled.grid > .row { - box-shadow: none !important; - } - - .ui.stackable.divided:not(.vertically).grid > .column:not(.row), - .ui.stackable.divided:not(.vertically).grid > .row > .column { - padding-left: 0 !important; - padding-right: 0 !important; - } -} - -/* ---------------------- - Only (Device) ------------------------ */ - -/* These include arbitrary class repetitions for forced specificity */ - -/* Mobile Only Hide */ - -@media only screen and (max-width: 767.98px) { - .ui.ui.ui[class*="tablet only"].grid:not(.mobile), - .ui.ui.ui.grid > [class*="tablet only"].row:not(.mobile), - .ui.ui.ui.grid > [class*="tablet only"].column:not(.mobile), - .ui.ui.ui.grid > .row > [class*="tablet only"].column:not(.mobile) { - display: none !important; - } - - .ui.ui.ui[class*="computer only"].grid:not(.mobile), - .ui.ui.ui.grid > [class*="computer only"].row:not(.mobile), - .ui.ui.ui.grid > [class*="computer only"].column:not(.mobile), - .ui.ui.ui.grid > .row > [class*="computer only"].column:not(.mobile) { - display: none !important; - } - - .ui.ui.ui[class*="large screen only"].grid:not(.mobile), - .ui.ui.ui.grid > [class*="large screen only"].row:not(.mobile), - .ui.ui.ui.grid > [class*="large screen only"].column:not(.mobile), - .ui.ui.ui.grid > .row > [class*="large screen only"].column:not(.mobile) { - display: none !important; - } - - .ui.ui.ui[class*="widescreen only"].grid:not(.mobile), - .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile), - .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile), - .ui.ui.ui.grid > .row > [class*="widescreen only"].column:not(.mobile) { - display: none !important; - } -} - -/* Tablet Only Hide */ - -@media only screen and (min-width: 768px) and (max-width: 991.98px) { - .ui.ui.ui[class*="mobile only"].grid:not(.tablet), - .ui.ui.ui.grid > [class*="mobile only"].row:not(.tablet), - .ui.ui.ui.grid > [class*="mobile only"].column:not(.tablet), - .ui.ui.ui.grid > .row > [class*="mobile only"].column:not(.tablet) { - display: none !important; - } - - .ui.ui.ui[class*="computer only"].grid:not(.tablet), - .ui.ui.ui.grid > [class*="computer only"].row:not(.tablet), - .ui.ui.ui.grid > [class*="computer only"].column:not(.tablet), - .ui.ui.ui.grid > .row > [class*="computer only"].column:not(.tablet) { - display: none !important; - } - - .ui.ui.ui[class*="large screen only"].grid:not(.mobile), - .ui.ui.ui.grid > [class*="large screen only"].row:not(.mobile), - .ui.ui.ui.grid > [class*="large screen only"].column:not(.mobile), - .ui.ui.ui.grid > .row > [class*="large screen only"].column:not(.mobile) { - display: none !important; - } - - .ui.ui.ui[class*="widescreen only"].grid:not(.mobile), - .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile), - .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile), - .ui.ui.ui.grid > .row > [class*="widescreen only"].column:not(.mobile) { - display: none !important; - } -} - -/* Computer Only Hide */ - -@media only screen and (min-width: 992px) and (max-width: 1199.98px) { - .ui.ui.ui[class*="mobile only"].grid:not(.computer), - .ui.ui.ui.grid > [class*="mobile only"].row:not(.computer), - .ui.ui.ui.grid > [class*="mobile only"].column:not(.computer), - .ui.ui.ui.grid > .row > [class*="mobile only"].column:not(.computer) { - display: none !important; - } - - .ui.ui.ui[class*="tablet only"].grid:not(.computer), - .ui.ui.ui.grid > [class*="tablet only"].row:not(.computer), - .ui.ui.ui.grid > [class*="tablet only"].column:not(.computer), - .ui.ui.ui.grid > .row > [class*="tablet only"].column:not(.computer) { - display: none !important; - } - - .ui.ui.ui[class*="large screen only"].grid:not(.mobile), - .ui.ui.ui.grid > [class*="large screen only"].row:not(.mobile), - .ui.ui.ui.grid > [class*="large screen only"].column:not(.mobile), - .ui.ui.ui.grid > .row > [class*="large screen only"].column:not(.mobile) { - display: none !important; - } - - .ui.ui.ui[class*="widescreen only"].grid:not(.mobile), - .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile), - .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile), - .ui.ui.ui.grid > .row > [class*="widescreen only"].column:not(.mobile) { - display: none !important; - } -} - -/* Large Screen Only Hide */ - -@media only screen and (min-width: 1200px) and (max-width: 1919.98px) { - .ui.ui.ui[class*="mobile only"].grid:not(.computer), - .ui.ui.ui.grid > [class*="mobile only"].row:not(.computer), - .ui.ui.ui.grid > [class*="mobile only"].column:not(.computer), - .ui.ui.ui.grid > .row > [class*="mobile only"].column:not(.computer) { - display: none !important; - } - - .ui.ui.ui[class*="tablet only"].grid:not(.computer), - .ui.ui.ui.grid > [class*="tablet only"].row:not(.computer), - .ui.ui.ui.grid > [class*="tablet only"].column:not(.computer), - .ui.ui.ui.grid > .row > [class*="tablet only"].column:not(.computer) { - display: none !important; - } - - .ui.ui.ui[class*="widescreen only"].grid:not(.mobile), - .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile), - .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile), - .ui.ui.ui.grid > .row > [class*="widescreen only"].column:not(.mobile) { - display: none !important; - } -} - -/* Widescreen Only Hide */ - -@media only screen and (min-width: 1920px) { - .ui.ui.ui[class*="mobile only"].grid:not(.computer), - .ui.ui.ui.grid > [class*="mobile only"].row:not(.computer), - .ui.ui.ui.grid > [class*="mobile only"].column:not(.computer), - .ui.ui.ui.grid > .row > [class*="mobile only"].column:not(.computer) { - display: none !important; - } - - .ui.ui.ui[class*="tablet only"].grid:not(.computer), - .ui.ui.ui.grid > [class*="tablet only"].row:not(.computer), - .ui.ui.ui.grid > [class*="tablet only"].column:not(.computer), - .ui.ui.ui.grid > .row > [class*="tablet only"].column:not(.computer) { - display: none !important; - } -} - -/* ----------------- - Compact - ----------------- */ - -.ui.ui.ui.compact.grid { - margin: -0.5rem; -} - -.ui.ui.ui.compact.grid > .column:not(.row), -.ui.ui.ui.compact.grid > .row > .column { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.ui.ui.ui.compact.grid > * { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -/* Row */ - -.ui.ui.ui.compact.grid > .row { - padding: 0.5rem 0; -} - -/* Columns */ - -.ui.ui.ui.compact.grid > .column:not(.row) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -/* Relaxed + Celled */ - -.ui.compact.relaxed.celled.grid > .column:not(.row), -.ui.compact.relaxed.celled.grid > .row > .column { - padding: 0.75em; -} - -.ui.compact[class*="very relaxed"].celled.grid > .column:not(.row), -.ui.compact[class*="very relaxed"].celled.grid > .row > .column { - padding: 1em; -} - -/* ----------------- - Very compact - ----------------- */ - -.ui.ui.ui[class*="very compact"].grid { - margin: -0.25rem; -} - -.ui.ui.ui[class*="very compact"].grid > .column:not(.row), -.ui.ui.ui[class*="very compact"].grid > .row > .column { - padding-left: 0.25rem; - padding-right: 0.25rem; -} - -.ui.ui.ui[class*="very compact"].grid > * { - padding-left: 0.25rem; - padding-right: 0.25rem; -} - -/* Row */ - -.ui.ui.ui[class*="very compact"].grid > .row { - padding: 0.25rem 0; -} - -/* Columns */ - -.ui.ui.ui[class*="very compact"].grid > .column:not(.row) { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - -/* Relaxed + Celled */ - -.ui[class*="very compact"].relaxed.celled.grid > .column:not(.row), -.ui[class*="very compact"].relaxed.celled.grid > .row > .column { - padding: 0.375em; -} - -.ui[class*="very compact"][class*="very relaxed"].celled.grid > .column:not(.row), -.ui[class*="very compact"][class*="very relaxed"].celled.grid > .row > .column { - padding: 0.5em; -} - -.ui.grid .left.attached.column { - padding-right: 0; -} - -.ui.grid .right.attached.column { - padding-left: 0; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Menu - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Standard -*******************************/ - -/* -------------- - Menu ---------------- */ - -.ui.menu { - display: flex; - margin: 1rem 0; - font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - background: #fff; - font-weight: normal; - border: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); - border-radius: 0.28571429rem; - min-height: 2.85714286em; -} - -.ui.menu::after { - content: ""; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -.ui.menu:first-child { - margin-top: 0; -} - -.ui.menu:last-child { - margin-bottom: 0; -} - -/* -------------- - Sub-Menu ---------------- */ - -.ui.menu .menu { - margin: 0; -} - -.ui.menu:not(.vertical) > .menu { - display: flex; -} - -/* -------------- - Item ---------------- */ - -.ui.menu:not(.vertical) .item { - display: flex; - align-items: center; -} - -.ui.menu .item { - position: relative; - vertical-align: middle; - line-height: 1; - text-decoration: none; - -webkit-tap-highlight-color: transparent; - flex: 0 0 auto; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - background: none; - padding: 0.92857143em 1.14285714em; - text-transform: none; - color: rgba(0, 0, 0, 0.87); - font-weight: normal; - transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease; -} - -.ui.menu > .item:first-child { - border-radius: 0.28571429rem 0 0 0.28571429rem; -} - -/* Border */ - -.ui.menu .item::before { - position: absolute; - content: ""; - top: 0; - right: 0; - height: 100%; - width: 1px; - background: rgba(34, 36, 38, 0.1); -} - -/* -------------- - Text Content ---------------- */ - -.ui.menu .text.item > *, -.ui.menu .item > a:not(.ui), -.ui.menu .item > p:only-child { - -webkit-user-select: text; - -ms-user-select: text; - user-select: text; - line-height: 1.3; -} - -.ui.menu .item > p:first-child { - margin-top: 0; -} - -.ui.menu .item > p:last-child { - margin-bottom: 0; -} - -/* -------------- - Icons ---------------- */ - -.ui.menu .item > i.icon { - opacity: 0.9; - float: none; - margin: 0 0.35714286em 0 0; -} - -/* -------------- - Button ---------------- */ - -.ui.menu:not(.vertical) .item > .button { - position: relative; - top: 0; - margin: -0.5em 0; - padding-bottom: 0.78571429em; - padding-top: 0.78571429em; - font-size: 1em; -} - -/* ---------------- - Grid / Container ------------------ */ - -.ui.menu > .grid, -.ui.menu > .container { - display: flex; - align-items: inherit; - flex-direction: inherit; -} - -/* -------------- - Inputs ---------------- */ - -.ui.menu .item > .input { - width: 100%; -} - -.ui.menu:not(.vertical) .item > .input { - position: relative; - top: 0; - margin: -0.5em 0; -} - -.ui.menu .item > .input input { - font-size: 1em; - padding-top: 0.57142857em; - padding-bottom: 0.57142857em; -} - -/* -------------- - Header ---------------- */ - -.ui.menu .header.item, -.ui.vertical.menu .header.item { - margin: 0; - background: ""; - text-transform: normal; - font-weight: bold; -} - -.ui.vertical.menu .item > .header:not(.ui) { - margin: 0 0 0.5em; - font-size: 1em; - font-weight: bold; -} - -/* -------------- - Dropdowns ---------------- */ - -/* Dropdown Icon */ - -.ui.menu .item > i.dropdown.icon { - padding: 0; - float: right; - margin: 0 0 0 1em; -} - -/* Menu */ - -.ui.menu .dropdown.item .menu { - min-width: calc(100% - 1px); - border-radius: 0 0 0.28571429rem 0.28571429rem; - background: #fff; - margin: 0 0 0; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08); -} - -.ui.menu .dropdown.item:not(.column) .menu { - flex-direction: column; -} - -/* Menu Items */ - -.ui.menu .ui.dropdown .menu > .item { - margin: 0; - text-align: left; - font-size: 1em !important; - padding: 0.78571429em 1.14285714em !important; - background: transparent !important; - color: rgba(0, 0, 0, 0.87) !important; - text-transform: none !important; - font-weight: normal !important; - box-shadow: none !important; - transition: none !important; -} - -.ui.menu .ui.dropdown .menu > .item:hover { - background: rgba(0, 0, 0, 0.05) !important; - color: rgba(0, 0, 0, 0.95) !important; -} - -.ui.menu .ui.dropdown .menu > .selected.item { - background: rgba(0, 0, 0, 0.05) !important; - color: rgba(0, 0, 0, 0.95) !important; -} - -.ui.menu .ui.dropdown .menu > .active.item { - background: rgba(0, 0, 0, 0.03) !important; - font-weight: bold !important; - color: rgba(0, 0, 0, 0.95) !important; -} - -.ui.menu .ui.dropdown.item .menu .item:not(.filtered) { - display: block; -} - -.ui.menu .ui.dropdown .menu > .item > .icons, -.ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) { - display: inline-block; - font-size: 1em !important; - float: none; - margin: 0 0.75em 0 0 !important; -} - -/* Secondary */ - -.ui.secondary.menu .dropdown.item > .menu, -.ui.text.menu .dropdown.item > .menu { - border-radius: 0.28571429rem; - margin-top: 0.35714286em; -} - -/* Pointing */ - -.ui.menu .pointing.dropdown.item .menu { - margin-top: 0.75em; -} - -/* Inverted */ - -.ui.inverted.menu .search.dropdown.item > .search, -.ui.inverted.menu .search.dropdown.item > .text { - color: rgba(255, 255, 255, 0.9); -} - -/* Vertical */ - -.ui.vertical.menu .dropdown.item > i.icon { - float: right; - content: "\f0da"; - margin-left: 1em; -} - -.ui.vertical.menu .dropdown.item .menu { - left: 100%; - /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */ - min-width: 0; - min-width: max-content; - margin: 0 0 0 0; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08); - border-radius: 0 0.28571429rem 0.28571429rem 0.28571429rem; -} - -.ui.vertical.menu .dropdown.item.upward .menu { - bottom: 0; -} - -.ui.vertical.menu .dropdown.item:not(.upward) .menu { - top: 0; -} - -.ui.vertical.menu .active.dropdown.item { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.ui.vertical.menu .dropdown.active.item { - box-shadow: none; -} - -/* Evenly Divided */ - -.ui.item.menu .dropdown .menu .item { - width: 100%; -} - -/* -------------- - Labels ---------------- */ - -.ui.menu .item > .label:not(.floating) { - margin-left: 1em; - padding: 0.3em 0.78571429em; -} - -.ui.vertical.menu .item > .label { - margin-top: -0.15em; - margin-bottom: -0.15em; - padding: 0.3em 0.78571429em; -} - -.ui.menu .item > .floating.label { - padding: 0.3em 0.78571429em; -} - -.ui.menu .item > .label { - background: #999; - color: #fff; -} - -.ui.menu .item > .image.label img { - margin: -0.2833em 0.8em -0.2833em -0.8em; - height: 1.5666em; -} - -/* -------------- - Images ---------------- */ - -.ui.menu .item > img:not(.ui) { - display: inline-block; - vertical-align: middle; - margin: -0.3em 0; - width: 2.5em; -} - -.ui.vertical.menu .item > img:not(.ui):only-child { - display: block; - max-width: 100%; - width: auto; -} - -/******************************* - Coupling -*******************************/ - -/* -------------- - List ---------------- */ - -/* Menu divider shouldn't apply */ - -.ui.menu .list .item::before { - background: none !important; -} - -/* -------------- - Sidebar - --------------- */ - -/* Show vertical dividers below last */ - -.ui.vertical.sidebar.menu > .item:first-child::before { - display: block !important; -} - -.ui.vertical.sidebar.menu > .item::before { - top: auto; - bottom: 0; -} - -/* -------------- - Container ---------------- */ - -@media only screen and (max-width: 767.98px) { - .ui.menu > .ui.container { - width: 100% !important; - margin-left: 0 !important; - margin-right: 0 !important; - } -} - -@media only screen and (min-width: 768px) { - .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child { - border-left: 1px solid rgba(34, 36, 38, 0.1); - } - - .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.item:not(.borderless):last-child, - .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.menu > .item:not(.borderless):last-child { - border-right: 1px solid rgba(34, 36, 38, 0.1); - } -} - -/******************************* - States -*******************************/ - -/* -------------- - Hover ---------------- */ - -.ui.link.menu .item:hover, -.ui.menu .dropdown.item:hover, -.ui.menu .link.item:hover, -.ui.menu a.item:hover { - cursor: pointer; - background: rgba(0, 0, 0, 0.03); - color: rgba(0, 0, 0, 0.95); -} - -/* -------------- - Pressed ---------------- */ - -.ui.link.menu .item:active, -.ui.menu .link.item:active, -.ui.menu a.item:active { - background: rgba(0, 0, 0, 0.03); - color: rgba(0, 0, 0, 0.95); -} - -/* -------------- - Active ---------------- */ - -.ui.menu .active.item { - background: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.95); - font-weight: normal; - box-shadow: none; -} - -.ui.menu .active.item > i.icon { - opacity: 1; -} - -/* -------------- - Active Hover ---------------- */ - -.ui.menu .active.item:hover, -.ui.vertical.menu .active.item:hover { - background-color: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.95); -} - -/* -------------- - Disabled ---------------- */ - -.ui.ui.menu .item.disabled { - cursor: default; - background-color: transparent; - color: rgba(40, 40, 40, 0.3); - pointer-events: none; -} - -/******************************* - Types -*******************************/ - -/* ------------------ -Floated Menu / Item -------------------- */ - -/* Left Floated */ - -.ui.menu:not(.vertical) .left.item, -.ui.menu:not(.vertical) .left.menu { - display: flex; - margin-right: auto !important; -} - -/* Right Floated */ - -.ui.menu:not(.vertical) .right.item, -.ui.menu:not(.vertical) .right.menu { - display: flex; - margin-left: auto !important; -} - -.ui.menu:not(.vertical) :not(.dropdown) > .left.menu, -.ui.menu:not(.vertical) :not(.dropdown) > .right.menu { - display: inherit; -} - -/* Center */ - -.ui.menu:not(.vertical) .center.item, -.ui.menu:not(.vertical) .center.menu { - display: flex; - margin-left: auto !important; - margin-right: auto !important; -} - -/* Swapped Borders */ - -.ui.menu .right.item::before, -.ui.menu .right.menu > .item::before { - right: auto; - left: 0; -} - -/* Remove Outer Borders */ - -.ui.menu .center.item:last-child::before, -.ui.menu .center.menu > .item:last-child::before { - display: none; -} - -/* -------------- - Vertical - --------------- */ - -.ui.vertical.menu { - display: block; - flex-direction: column; - background: #fff; - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); -} - -/* --- Item --- */ - -.ui.vertical.menu .item { - display: block; - background: none; - border-top: none; - border-right: none; -} - -.ui.vertical.menu > .item:first-child { - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui.vertical.menu > .item:last-child { - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -/* --- Label --- */ - -.ui.vertical.menu .item > .label { - float: right; - text-align: center; -} - -/* --- Icon --- */ - -.ui.vertical.menu .item > i.icon, -.ui.vertical.menu .item > i.icons { - width: 1.18em; - float: right; - margin: 0 0 0 0.5em; -} - -.ui.vertical.menu .item > .label + i.icon { - float: none; - margin: 0 0.5em 0 0; -} - -/* --- Border --- */ - -.ui.vertical.menu .item::before { - position: absolute; - content: ""; - top: 0; - left: 0; - width: 100%; - height: 1px; - background: rgba(34, 36, 38, 0.1); -} - -.ui.vertical.menu .item:first-child::before { - display: none !important; -} - -/* --- Sub Menu --- */ - -.ui.vertical.menu .item > .menu { - margin: 0.5em -1.14285714em 0; -} - -.ui.vertical.menu .menu .item { - background: none; - padding: 0.5em 1.33333333em; - font-size: 0.85714286em; - color: rgba(0, 0, 0, 0.5); -} - -.ui.vertical.menu .item .menu a.item:hover, -.ui.vertical.menu .item .menu .link.item:hover { - color: rgba(0, 0, 0, 0.85); -} - -.ui.vertical.menu .menu .item::before { - display: none; -} - -/* Vertical Active */ - -.ui.vertical.menu .active.item { - background: rgba(0, 0, 0, 0.05); - border-radius: 0; - box-shadow: none; -} - -.ui.vertical.menu > .active.item:first-child { - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui.vertical.menu > .active.item:last-child { - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -.ui.vertical.menu > .active.item:only-child { - border-radius: 0.28571429rem; -} - -.ui.vertical.menu .active.item .menu .active.item { - border-left: none; -} - -.ui.vertical.menu .item .menu .active.item { - background-color: transparent; - font-weight: bold; - color: rgba(0, 0, 0, 0.95); -} - -/* -------------- - Tabular - --------------- */ - -.ui.tabular.menu { - border-radius: 0; - box-shadow: none !important; - border: none; - background: none transparent; - border-bottom: 1px solid #d4d4d5; -} - -.ui.tabular.fluid.menu { - width: calc(100% + 2px) !important; -} - -.ui.tabular.menu .item { - background: transparent; - border-bottom: none; - border-left: 1px solid transparent; - border-right: 1px solid transparent; - border-top: 2px solid transparent; - padding: 0.92857143em 1.42857143em; - color: rgba(0, 0, 0, 0.87); -} - -.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 { - background: none #fff; - color: rgba(0, 0, 0, 0.95); - border-top-width: 1px; - border-color: #d4d4d5; - font-weight: bold; - margin-bottom: -1px; - box-shadow: none; - border-radius: 0.28571429rem 0.28571429rem 0 0 !important; -} - -.ui.tabular.menu .active.item:hover { - cursor: default; -} - -/* Coupling with segment for attachment */ - -.ui.tabular.menu ~ .attached:not(.top).segment { - border-top: none; - margin-left: 0; - margin-top: 0; - margin-right: 0; - width: 100%; -} - -.top.attached.segment + .ui.bottom.tabular.menu { - position: relative; - width: calc(100% + 2px); - left: -1px; -} - -/* Bottom Vertical Tabular */ - -.ui.bottom.tabular.menu { - background: none transparent; - border-radius: 0; - box-shadow: none !important; - border-bottom: none; - border-top: 1px solid #d4d4d5; -} - -.ui.bottom.tabular.menu .item { - background: none; - border-left: 1px solid transparent; - border-right: 1px solid transparent; - border-bottom: 1px solid transparent; - border-top: none; -} - -.ui.bottom.tabular.menu .active.item { - background: none #fff; - color: rgba(0, 0, 0, 0.95); - border-color: #d4d4d5; - margin: -1px 0 0 0; - border-radius: 0 0 0.28571429rem 0.28571429rem !important; -} - -/* Vertical Tabular (Left) */ - -.ui.vertical.tabular.menu { - background: none transparent; - border-radius: 0; - box-shadow: none !important; - border-bottom: none; - border-right: 1px solid #d4d4d5; -} - -.ui.vertical.tabular.menu .item { - background: none; - border-left: 1px solid transparent; - border-bottom: 1px solid transparent; - border-top: 1px solid transparent; - border-right: none; -} - -.ui.vertical.tabular.menu .active.item { - background: none #fff; - color: rgba(0, 0, 0, 0.95); - border-color: #d4d4d5; - margin: 0 -1px 0 0; - border-radius: 0.28571429rem 0 0 0.28571429rem !important; -} - -/* Vertical Right Tabular */ - -.ui.vertical.right.tabular.menu { - background: none transparent; - border-radius: 0; - box-shadow: none !important; - border-bottom: none; - border-right: none; - border-left: 1px solid #d4d4d5; -} - -.ui.vertical.right.tabular.menu .item { - background: none; - border-right: 1px solid transparent; - border-bottom: 1px solid transparent; - border-top: 1px solid transparent; - border-left: none; -} - -.ui.vertical.right.tabular.menu .active.item { - background: none #fff; - color: rgba(0, 0, 0, 0.95); - border-color: #d4d4d5; - margin: 0 0 0 -1px; - border-radius: 0 0.28571429rem 0.28571429rem 0 !important; -} - -/* Dropdown */ - -.ui.tabular.menu .active.dropdown.item { - margin-bottom: 0; - border-left: 1px solid transparent; - border-right: 1px solid transparent; - border-top: 2px solid transparent; - border-bottom: none; -} - -.ui.inverted.tabular.menu .active.item, -.ui.inverted.tabular.menu .active.item:hover { - background: none #1b1c1d; - border-color: #555; -} - -.ui.inverted.tabular.menu .item:not(.active):hover { - color: #ffffff; - background: transparent; - cursor: pointer; -} - -/* -------------- - Pagination - --------------- */ - -.ui.pagination.menu { - margin: 0; - display: inline-flex; - vertical-align: middle; -} - -.ui.pagination.menu .item:last-child { - border-radius: 0 0.28571429rem 0.28571429rem 0; -} - -.ui.compact.menu .item:last-child { - border-radius: 0 0.28571429rem 0.28571429rem 0; -} - -.ui.pagination.menu:not(.wrapping) .item:last-child::before { - display: none; -} - -.ui.pagination.menu .item { - min-width: 3em; - text-align: center; -} - -.ui.pagination.menu .icon.item i.icon { - vertical-align: top; -} - -/* Active */ - -.ui.pagination.menu .active.item { - border-top: none; - padding-top: 0.92857143em; - background-color: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.95); - box-shadow: none; -} - -/* -------------- - Secondary - --------------- */ - -.ui.secondary.menu { - background: none; - margin-left: -0.35714286em; - margin-right: -0.35714286em; - border-radius: 0; - border: none; - box-shadow: none; -} - -/* Item */ - -.ui.secondary.menu .item { - align-self: center; - box-shadow: none; - border: none; - padding: 0.78571429em 0.92857143em; - margin: 0 0.35714286em; - background: none; - transition: color 0.1s ease; - border-radius: 0.28571429rem; -} - -/* No Divider */ - -.ui.secondary.menu .item::before { - display: none !important; -} - -/* Header */ - -.ui.secondary.menu .header.item { - border-radius: 0; - border-right: none; - background: none transparent; -} - -/* Image */ - -.ui.secondary.menu .item > img:not(.ui) { - margin: 0; -} - -/* Hover */ - -.ui.secondary.menu .dropdown.item:hover, -.ui.secondary.menu .link.item:hover, -.ui.secondary.menu a.item:hover { - background: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.95); -} - -/* Active */ - -.ui.secondary.menu .active.item { - box-shadow: none; - background: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.95); - border-radius: 0.28571429rem; -} - -/* Active Hover */ - -.ui.secondary.menu .active.item:hover { - box-shadow: none; - background: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.95); -} - -/* Inverted */ - -.ui.secondary.inverted.menu .link.item:not(.disabled), -.ui.secondary.inverted.menu a.item:not(.disabled) { - color: rgba(255, 255, 255, 0.7); -} - -.ui.secondary.inverted.menu .dropdown.item:hover, -.ui.secondary.inverted.menu .link.item:hover, -.ui.secondary.inverted.menu a.item:hover { - background: rgba(255, 255, 255, 0.08); - color: #ffffff; -} - -.ui.secondary.inverted.menu .active.item { - background: rgba(255, 255, 255, 0.15); - color: #ffffff; -} - -/* Fix item margins */ - -.ui.secondary.item.menu { - margin-left: 0; - margin-right: 0; -} - -.ui.secondary.item.menu .item:last-child { - margin-right: 0; -} - -.ui.secondary.attached.menu { - box-shadow: none; -} - -/* --------------------- - Secondary Vertical - ----------------------- */ - -/* Sub Menu */ - -.ui.vertical.secondary.menu .item:not(.dropdown) > .menu { - margin: 0 -0.92857143em; -} - -.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item { - margin: 0; - padding: 0.5em 1.33333333em; -} - -.ui.secondary.vertical.menu > .item { - border: none; - margin: 0 0 0.35714286em; - border-radius: 0.28571429rem !important; -} - -.ui.secondary.vertical.menu > .header.item { - border-radius: 0; -} - -/* Sub Menu */ - -.ui.vertical.secondary.menu .item > .menu .item { - background-color: transparent; -} - -/* Inverted */ - -.ui.secondary.inverted.menu { - background-color: transparent; -} - -/* --------------------- - Secondary Pointing - ----------------------- */ - -.ui.secondary.pointing.menu { - margin-left: 0; - margin-right: 0; - border-bottom: 2px solid rgba(34, 36, 38, 0.15); -} - -.ui.secondary.pointing.menu .item { - border-bottom: 2px solid transparent; - border-radius: 0; - align-self: flex-end; - margin: 0 0 -2px; - padding: 0.85714286em 1.14285714em; - transition: color 0.1s ease; -} - -.ui.secondary.pointing.menu .ui.dropdown .menu .item { - border-bottom-width: 0; -} - -.ui.secondary.pointing.menu .item > .label:not(.floating) { - margin-top: -0.3em; - margin-bottom: -0.3em; -} - -.ui.secondary.pointing.menu .item > .circular.label { - margin-top: -0.5em; - margin-bottom: -0.5em; -} - -/* Item Types */ - -.ui.secondary.pointing.menu .header.item { - color: rgba(0, 0, 0, 0.85) !important; -} - -.ui.secondary.pointing.menu .text.item { - box-shadow: none !important; -} - -.ui.secondary.pointing.menu .item::after { - display: none; -} - -/* Hover */ - -.ui.secondary.pointing.menu .dropdown.item:hover, -.ui.secondary.pointing.menu .link.item:hover, -.ui.secondary.pointing.menu a.item:hover { - background-color: transparent; - color: rgba(0, 0, 0, 0.87); -} - -/* Pressed */ - -.ui.secondary.pointing.menu .dropdown.item:active, -.ui.secondary.pointing.menu .link.item:active, -.ui.secondary.pointing.menu a.item:active { - background-color: transparent; - border-color: rgba(34, 36, 38, 0.15); -} - -/* Active */ - -.ui.secondary.pointing.menu .active.item { - background-color: transparent; - box-shadow: none; - border-color: currentColor; - font-weight: bold; - color: rgba(0, 0, 0, 0.95); -} - -/* Active Hover */ - -.ui.secondary.pointing.menu .active.item:hover { - border-color: currentColor; - color: rgba(0, 0, 0, 0.95); -} - -/* Active Dropdown */ - -.ui.secondary.pointing.menu .active.dropdown.item { - border-color: transparent; -} - -/* Vertical Pointing */ - -.ui.secondary.vertical.pointing.menu { - border-bottom-width: 0; - border-right: 2px solid rgba(34, 36, 38, 0.15); -} - -.ui.secondary.vertical.pointing.menu .item { - border-bottom: none; - border-right: 2px solid transparent; - border-radius: 0 !important; - margin: 0 -2px 0 0; -} - -/* Vertical Active */ - -.ui.secondary.vertical.pointing.menu .active.item { - border-color: currentColor; -} - -/* Inverted */ - -.ui.secondary.inverted.pointing.menu { - border-color: rgba(255, 255, 255, 0.1); -} - -.ui.secondary.inverted.pointing.menu .item:not(.disabled) { - color: rgba(255, 255, 255, 0.9); -} - -.ui.secondary.inverted.pointing.menu .header.item { - color: #fff !important; -} - -/* Hover */ - -.ui.secondary.inverted.pointing.menu .link.item:hover, -.ui.secondary.inverted.pointing.menu a.item:hover { - color: #ffffff; -} - -/* Active */ - -.ui.ui.secondary.inverted.pointing.menu .active.item { - border-color: #fff; - color: #ffffff; - background-color: transparent; -} - -/* -------------- - Text Menu - --------------- */ - -.ui.text.menu { - background: none transparent; - border-radius: 0; - box-shadow: none; - border: none; - margin: 1em -0.5em; -} - -.ui.text.menu .item { - border-radius: 0; - box-shadow: none; - align-self: center; - margin: 0; - padding: 0.35714286em 0.5em; - font-weight: normal; - color: rgba(0, 0, 0, 0.6); - transition: opacity 0.1s ease; -} - -/* Border */ - -.ui.text.menu .item::before, -.ui.text.menu .menu .item::before { - display: none !important; -} - -/* Header */ - -.ui.text.menu .header.item { - background-color: transparent; - opacity: 1; - color: rgba(0, 0, 0, 0.85); - font-size: 0.92857143em; - text-transform: uppercase; - font-weight: bold; -} - -/* Image */ - -.ui.text.menu .item > img:not(.ui) { - margin: 0; -} - -/* --- fluid text --- */ - -.ui.text.item.menu .item { - margin: 0; -} - -/* --- vertical text --- */ - -.ui.vertical.text.menu { - margin: 1em 0; -} - -.ui.vertical.text.menu:first-child { - margin-top: 0; -} - -.ui.vertical.text.menu:last-child { - margin-bottom: 0; -} - -.ui.vertical.text.menu .item { - margin: 0.57142857em 0; - padding-left: 0; - padding-right: 0; -} - -.ui.vertical.text.menu .item > i.icon { - float: none; - margin: 0 0.35714286em 0 0; -} - -.ui.vertical.text.menu .header.item { - margin: 0.57142857em 0 0.71428571em; -} - -/* Vertical Sub Menu */ - -.ui.vertical.text.menu .item:not(.dropdown) > .menu { - margin: 0; -} - -.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item { - margin: 0; - padding: 0.5em 0; -} - -/* --- hover --- */ - -.ui.text.menu .item:hover { - opacity: 1; - background-color: transparent; -} - -/* --- active --- */ - -.ui.text.menu .active.item { - background-color: transparent; - border: none; - box-shadow: none; - font-weight: normal; - color: rgba(0, 0, 0, 0.95); -} - -/* --- active hover --- */ - -.ui.text.menu .active.item:hover { - background-color: transparent; -} - -/* Disable Bariations */ - -.ui.text.pointing.menu .active.item::after { - box-shadow: none; -} - -.ui.text.attached.menu { - box-shadow: none; -} - -/* Inverted */ - -.ui.inverted.text.menu, -.ui.inverted.text.menu .item, -.ui.inverted.text.menu .item:hover, -.ui.inverted.text.menu .active.item { - background-color: transparent; -} - -/* Fluid */ - -.ui.fluid.text.menu { - margin-left: 0; - margin-right: 0; -} - -/* -------------- - Icon Only - --------------- */ - -/* Vertical Menu */ - -.ui.vertical.icon.menu { - display: inline-block; - width: auto; -} - -/* Item */ - -.ui.icon.menu .item { - height: auto; - text-align: center; - color: #1b1c1d; -} - -/* Icon */ - -.ui.icon.menu .item > i.icon:not(.dropdown) { - margin: 0; - opacity: 1; -} - -/* Icon Glyph */ - -.ui.icon.menu i.icon::before { - opacity: 1; -} - -/* (x) Item Icon */ - -.ui.menu .icon.item > i.icon { - width: auto; - margin: 0 auto; -} - -/* Vertical Icon */ - -.ui.vertical.icon.menu .item > i.icon:not(.dropdown) { - display: block; - opacity: 1; - margin: 0 auto; - float: none; -} - -/* Inverted */ - -.ui.inverted.icon.menu .item { - color: #fff; -} - -/* -------------- - Labeled Icon - --------------- */ - -/* Menu */ - -.ui.labeled.icon.menu { - text-align: center; -} - -/* Item */ - -.ui.labeled.icon.menu .item { - min-width: 6em; - flex-direction: column; -} - -/* Icon */ - -.ui.labeled.icon.menu > .right.menu > .item > i.icon:not(.dropdown), -.ui.labeled.icon.menu > .item > i.icon:not(.dropdown) { - height: 1em; - display: block; - font-size: 1.71428571em !important; - margin: 0 auto 0.5rem !important; -} - -/* Fluid */ - -.ui.fluid.labeled.icon.menu > .item { - min-width: 0; -} - -/******************************* - Variations -*******************************/ - -/* -------------- - Stackable - --------------- */ - -@media only screen and (max-width: 767.98px) { - .ui.stackable.menu { - flex-direction: column; - } - - .ui.stackable.menu.pointing .active.item::after { - display: none; - } - - .ui.stackable.menu .item { - width: 100% !important; - } - - .ui.stackable.menu .item::before { - position: absolute; - content: ""; - top: auto; - bottom: 0; - left: 0; - width: 100%; - height: 1px; - background: rgba(34, 36, 38, 0.1); - } - - .ui.stackable.menu .left.menu, - .ui.stackable.menu .left.item { - margin-right: 0 !important; - } - - .ui.stackable.menu .right.menu, - .ui.stackable.menu .right.item { - margin-left: 0 !important; - } - - .ui.stackable.menu .center.menu, - .ui.stackable.menu .center.item { - margin-left: 0 !important; - margin-right: 0 !important; - } - - .ui.stackable.menu .right.menu, - .ui.stackable.menu .center.menu, - .ui.stackable.menu .left.menu { - flex-direction: column; - } -} - -/* -------------- - Colors ---------------- */ - -.ui.ui.ui.menu .primary.active.item, -.ui.ui.primary.menu .active.item:hover, -.ui.ui.primary.menu .active.item { - color: #2185d0; -} - -.ui.ui.ui.menu .red.active.item, -.ui.ui.red.menu .active.item:hover, -.ui.ui.red.menu .active.item { - color: #db2828; -} - -.ui.ui.ui.menu .orange.active.item, -.ui.ui.orange.menu .active.item:hover, -.ui.ui.orange.menu .active.item { - color: #f2711c; -} - -.ui.ui.ui.menu .yellow.active.item, -.ui.ui.yellow.menu .active.item:hover, -.ui.ui.yellow.menu .active.item { - color: #fbbd08; -} - -.ui.ui.ui.menu .olive.active.item, -.ui.ui.olive.menu .active.item:hover, -.ui.ui.olive.menu .active.item { - color: #b5cc18; -} - -.ui.ui.ui.menu .green.active.item, -.ui.ui.green.menu .active.item:hover, -.ui.ui.green.menu .active.item { - color: #21ba45; -} - -.ui.ui.ui.menu .teal.active.item, -.ui.ui.teal.menu .active.item:hover, -.ui.ui.teal.menu .active.item { - color: #00b5ad; -} - -.ui.ui.ui.menu .blue.active.item, -.ui.ui.blue.menu .active.item:hover, -.ui.ui.blue.menu .active.item { - color: #2185d0; -} - -.ui.ui.ui.menu .violet.active.item, -.ui.ui.violet.menu .active.item:hover, -.ui.ui.violet.menu .active.item { - color: #6435c9; -} - -.ui.ui.ui.menu .purple.active.item, -.ui.ui.purple.menu .active.item:hover, -.ui.ui.purple.menu .active.item { - color: #a333c8; -} - -.ui.ui.ui.menu .pink.active.item, -.ui.ui.pink.menu .active.item:hover, -.ui.ui.pink.menu .active.item { - color: #e03997; -} - -.ui.ui.ui.menu .brown.active.item, -.ui.ui.brown.menu .active.item:hover, -.ui.ui.brown.menu .active.item { - color: #a5673f; -} - -.ui.ui.ui.menu .grey.active.item, -.ui.ui.grey.menu .active.item:hover, -.ui.ui.grey.menu .active.item { - color: #767676; -} - -.ui.ui.ui.menu .black.active.item, -.ui.ui.black.menu .active.item:hover, -.ui.ui.black.menu .active.item { - color: #1b1c1d; -} - -/* -------------- - Inverted - --------------- */ - -.ui.inverted.menu { - border: 0 solid transparent; - background: #1b1c1d; - box-shadow: none; -} - -/* Menu Item */ - -.ui.inverted.menu .item, -.ui.inverted.menu .item > a:not(.ui) { - background: transparent; - color: rgba(255, 255, 255, 0.9); -} - -.ui.inverted.menu .item.menu { - background: transparent; -} - -/* --- Border --- */ - -.ui.inverted.menu .item::before { - background: rgba(255, 255, 255, 0.08); -} - -.ui.vertical.inverted.menu .item::before { - background: rgba(255, 255, 255, 0.08); -} - -/* Sub Menu */ - -.ui.vertical.inverted.menu .menu .item, -.ui.vertical.inverted.menu .menu .item a:not(.ui) { - color: rgba(255, 255, 255, 0.5); -} - -/* Header */ - -.ui.inverted.menu .header.item { - margin: 0; - background: transparent; - box-shadow: none; -} - -/* Disabled */ - -.ui.ui.inverted.menu .item.disabled { - color: rgba(225, 225, 225, 0.3); -} - -/* --- Hover --- */ - -.ui.link.inverted.menu .item:hover, -.ui.inverted.menu .dropdown.item:hover, -.ui.inverted.menu .link.item:hover, -.ui.inverted.menu a.item:hover { - background: rgba(255, 255, 255, 0.08); - color: #ffffff; -} - -.ui.vertical.inverted.menu .item .menu a.item:hover, -.ui.vertical.inverted.menu .item .menu .link.item:hover { - background: transparent; - color: #ffffff; -} - -/* --- Pressed --- */ - -.ui.inverted.menu a.item:active, -.ui.inverted.menu .link.item:active { - background: rgba(255, 255, 255, 0.08); - color: #ffffff; -} - -/* --- Active --- */ - -.ui.inverted.menu .active.item { - background: #3d3e3f; - color: #ffffff !important; -} - -.ui.inverted.vertical.menu .item .menu .active.item { - background: transparent; - color: #fff; -} - -.ui.inverted.pointing.menu .active.item::after { - background: #3d3e3f; - margin: 0 !important; - box-shadow: none !important; - border: none !important; -} - -/* --- Active Hover --- */ - -.ui.inverted.menu .active.item:hover { - background: #3d3e3f; - color: #fff !important; -} - -.ui.inverted.pointing.menu .active.item:hover::after { - background: #3d3e3f; -} - -/* -------------- - Floated - --------------- */ - -.ui.floated.menu { - float: left; - margin: 0 0.5rem 0 0; -} - -.ui.floated.menu .item:last-child::before { - display: none; -} - -.ui.right.floated.menu { - float: right; - margin: 0 0 0 0.5rem; -} - -.ui.center.aligned.menu:not(.fluid), -.ui.centered.menu:not(.fluid) { - display: inline-flex; - transform: translateX(-50%); - margin-left: 50%; -} - -.ui.center.aligned.menu .item, -.ui.centered.menu .item { - flex: 1 0 auto; - justify-content: center; -} - -/* -------------- - Inverted - --------------- */ - -.ui.ui.ui.inverted.menu .primary.active.item, -.ui.ui.inverted.primary.menu { - background-color: #2185d0; -} - -.ui.inverted.primary.menu .item::before { - background-color: rgba(34, 36, 38, 0.1); -} - -.ui.ui.inverted.primary.menu .active.item { - background-color: rgba(0, 0, 0, 0.1); -} - -.ui.inverted.pointing.primary.menu .active.item { - background-color: #1678c2; -} - -.ui.ui.ui.inverted.menu .red.active.item, -.ui.ui.inverted.red.menu { - background-color: #db2828; -} - -.ui.inverted.red.menu .item::before { - background-color: rgba(34, 36, 38, 0.1); -} - -.ui.ui.inverted.red.menu .active.item { - background-color: rgba(0, 0, 0, 0.1); -} - -.ui.inverted.pointing.red.menu .active.item { - background-color: #d01919; -} - -.ui.ui.ui.inverted.menu .orange.active.item, -.ui.ui.inverted.orange.menu { - background-color: #f2711c; -} - -.ui.inverted.orange.menu .item::before { - background-color: rgba(34, 36, 38, 0.1); -} - -.ui.ui.inverted.orange.menu .active.item { - background-color: rgba(0, 0, 0, 0.1); -} - -.ui.inverted.pointing.orange.menu .active.item { - background-color: #f26202; -} - -.ui.ui.ui.inverted.menu .yellow.active.item, -.ui.ui.inverted.yellow.menu { - background-color: #fbbd08; -} - -.ui.inverted.yellow.menu .item::before { - background-color: rgba(34, 36, 38, 0.1); -} - -.ui.ui.inverted.yellow.menu .active.item { - background-color: rgba(0, 0, 0, 0.1); -} - -.ui.inverted.pointing.yellow.menu .active.item { - background-color: #eaae00; -} - -.ui.ui.ui.inverted.menu .olive.active.item, -.ui.ui.inverted.olive.menu { - background-color: #b5cc18; -} - -.ui.inverted.olive.menu .item::before { - background-color: rgba(34, 36, 38, 0.1); -} - -.ui.ui.inverted.olive.menu .active.item { - background-color: rgba(0, 0, 0, 0.1); -} - -.ui.inverted.pointing.olive.menu .active.item { - background-color: #a7bd0d; -} - -.ui.ui.ui.inverted.menu .green.active.item, -.ui.ui.inverted.green.menu { - background-color: #21ba45; -} - -.ui.inverted.green.menu .item::before { - background-color: rgba(34, 36, 38, 0.1); -} - -.ui.ui.inverted.green.menu .active.item { - background-color: rgba(0, 0, 0, 0.1); -} - -.ui.inverted.pointing.green.menu .active.item { - background-color: #16ab39; -} - -.ui.ui.ui.inverted.menu .teal.active.item, -.ui.ui.inverted.teal.menu { - background-color: #00b5ad; -} - -.ui.inverted.teal.menu .item::before { - background-color: rgba(34, 36, 38, 0.1); -} - -.ui.ui.inverted.teal.menu .active.item { - background-color: rgba(0, 0, 0, 0.1); -} - -.ui.inverted.pointing.teal.menu .active.item { - background-color: #009c95; -} - -.ui.ui.ui.inverted.menu .blue.active.item, -.ui.ui.inverted.blue.menu { - background-color: #2185d0; -} - -.ui.inverted.blue.menu .item::before { - background-color: rgba(34, 36, 38, 0.1); -} - -.ui.ui.inverted.blue.menu .active.item { - background-color: rgba(0, 0, 0, 0.1); -} - -.ui.inverted.pointing.blue.menu .active.item { - background-color: #1678c2; -} - -.ui.ui.ui.inverted.menu .violet.active.item, -.ui.ui.inverted.violet.menu { - background-color: #6435c9; -} - -.ui.inverted.violet.menu .item::before { - background-color: rgba(34, 36, 38, 0.1); -} - -.ui.ui.inverted.violet.menu .active.item { - background-color: rgba(0, 0, 0, 0.1); -} - -.ui.inverted.pointing.violet.menu .active.item { - background-color: #5829bb; -} - -.ui.ui.ui.inverted.menu .purple.active.item, -.ui.ui.inverted.purple.menu { - background-color: #a333c8; -} - -.ui.inverted.purple.menu .item::before { - background-color: rgba(34, 36, 38, 0.1); -} - -.ui.ui.inverted.purple.menu .active.item { - background-color: rgba(0, 0, 0, 0.1); -} - -.ui.inverted.pointing.purple.menu .active.item { - background-color: #9627ba; -} - -.ui.ui.ui.inverted.menu .pink.active.item, -.ui.ui.inverted.pink.menu { - background-color: #e03997; -} - -.ui.inverted.pink.menu .item::before { - background-color: rgba(34, 36, 38, 0.1); -} - -.ui.ui.inverted.pink.menu .active.item { - background-color: rgba(0, 0, 0, 0.1); -} - -.ui.inverted.pointing.pink.menu .active.item { - background-color: #e61a8d; -} - -.ui.ui.ui.inverted.menu .brown.active.item, -.ui.ui.inverted.brown.menu { - background-color: #a5673f; -} - -.ui.inverted.brown.menu .item::before { - background-color: rgba(34, 36, 38, 0.1); -} - -.ui.ui.inverted.brown.menu .active.item { - background-color: rgba(0, 0, 0, 0.1); -} - -.ui.inverted.pointing.brown.menu .active.item { - background-color: #975b33; -} - -.ui.ui.ui.inverted.menu .grey.active.item, -.ui.ui.inverted.grey.menu { - background-color: #767676; -} - -.ui.inverted.grey.menu .item::before { - background-color: rgba(34, 36, 38, 0.1); -} - -.ui.ui.inverted.grey.menu .active.item { - background-color: rgba(0, 0, 0, 0.1); -} - -.ui.inverted.pointing.grey.menu .active.item { - background-color: #838383; -} - -.ui.ui.ui.inverted.menu .black.active.item, -.ui.ui.inverted.black.menu { - background-color: #1b1c1d; -} - -.ui.inverted.black.menu .item::before { - background-color: rgba(34, 36, 38, 0.1); -} - -.ui.ui.inverted.black.menu .active.item { - background-color: rgba(0, 0, 0, 0.1); -} - -.ui.inverted.pointing.black.menu .active.item { - background-color: #27292a; -} - -.ui.ui.ui.inverted.pointing.menu .active.item::after { - background-color: inherit; -} - -/* -------------- - Fitted - --------------- */ - -.ui.fitted.menu .item, -.ui.fitted.menu .item .menu .item, -.ui.menu .fitted.item { - padding: 0; -} - -.ui.horizontally.fitted.menu .item, -.ui.horizontally.fitted.menu .item .menu .item, -.ui.menu .horizontally.fitted.item { - padding-top: 0.92857143em; - padding-bottom: 0.92857143em; -} - -.ui.vertically.fitted.menu .item, -.ui.vertically.fitted.menu .item .menu .item, -.ui.menu .vertically.fitted.item { - padding-left: 1.14285714em; - padding-right: 1.14285714em; -} - -/* -------------- - Borderless - --------------- */ - -.ui.borderless.menu .item::before, -.ui.borderless.menu .item .menu .item::before, -.ui.menu .borderless.item::before { - background: none !important; -} - -/* ------------------- - Compact - -------------------- */ - -.ui.compact.menu { - display: inline-flex; - margin: 0; - vertical-align: middle; -} - -.ui.compact.vertical.menu { - /* IE hack to make dropdown icons appear inline */ - display: -ms-inline-flexbox !important; - display: inline-block; -} - -.ui.compact.menu:not(.secondary) .item:last-child { - border-radius: 0 0.28571429rem 0.28571429rem 0; -} - -.ui.compact.menu .item:last-child::before { - display: none; -} - -.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 { - width: 100% !important; -} - -/* ------------------- - Evenly Sized - -------------------- */ - -.ui[class*="equal width"].menu > .item { - flex: 1; -} - -.ui[class*="equal width"].menu > .item, -.ui.item.menu, -.ui.item.menu .item { - width: 100%; - padding-left: 0 !important; - padding-right: 0 !important; - margin-left: 0 !important; - margin-right: 0 !important; - text-align: center; - justify-content: center; -} - -.ui.attached[class*="equal width"].menu:not(.tabular), -.ui.attached.item.menu:not(.tabular) { - margin: 0 -1px !important; -} - -.ui[class*="equal width"].menu > .item:last-child::before, -.ui.item.menu .item:last-child::before { - display: none; -} - -.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.5%; -} - -.ui.menu.nine.item .item { - width: 11.11%; -} - -.ui.menu.ten.item .item { - width: 10%; -} - -.ui.menu.eleven.item .item { - width: 9.09%; -} - -.ui.menu.twelve.item .item { - width: 8.333%; -} - -/* -------------- - Fixed - --------------- */ - -.ui.menu.fixed { - position: fixed; - z-index: 101; - margin: 0; - width: 100%; -} - -.ui.menu.fixed, -.ui.menu.fixed .item:first-child, -.ui.menu.fixed .item:last-child { - border-radius: 0 !important; -} - -.ui.fixed.menu, -.ui[class*="top fixed"].menu { - top: 0; - left: 0; - right: auto; - bottom: auto; -} - -.ui[class*="top fixed"].menu { - border-top: none; - border-left: none; - border-right: none; -} - -.ui[class*="right fixed"].menu { - border-top: none; - border-bottom: none; - border-right: none; - top: 0; - right: 0; - left: auto; - bottom: auto; - width: auto; - height: 100%; -} - -.ui[class*="bottom fixed"].menu { - border-bottom: none; - border-left: none; - border-right: none; - bottom: 0; - left: 0; - top: auto; - right: auto; -} - -.ui[class*="left fixed"].menu { - border-top: none; - border-bottom: none; - border-left: none; - top: 0; - left: 0; - right: auto; - bottom: auto; - width: auto; - height: 100%; -} - -/* Coupling with Grid */ - -.ui.fixed.menu + .ui.grid { - padding-top: 2.75rem; -} - -/* ------------------- - Pointing - -------------------- */ - -.ui.pointing.menu .item::after { - visibility: hidden; - position: absolute; - content: ""; - top: 100%; - left: 50%; - transform: translateX(-50%) translateY(-50%) rotate(45deg); - background: none; - margin: 0.5px 0 0; - width: 0.57142857em; - height: 0.57142857em; - border: none; - border-bottom: 1px solid #d4d4d5; - border-right: 1px solid #d4d4d5; - z-index: 2; - transition: background 0.1s ease; -} - -.ui.vertical.pointing.menu .item::after { - position: absolute; - top: 50%; - right: 0; - bottom: auto; - left: auto; - transform: translateX(50%) translateY(-50%) rotate(45deg); - margin: 0 -0.5px 0 0; - border: none; - border-top: 1px solid #d4d4d5; - border-right: 1px solid #d4d4d5; -} - -.ui.pointing.menu .ui.dropdown .menu .item::after, -.ui.vertical.pointing.menu .ui.dropdown .menu .item::after { - display: none; -} - -/* Active */ - -.ui.pointing.menu .active.item::after { - visibility: visible; -} - -.ui.pointing.menu .active.dropdown.item::after { - visibility: hidden; -} - -/* Don't double up pointers */ - -.ui.pointing.menu .dropdown.active.item::after, -.ui.pointing.menu .active.item .menu .active.item::after { - display: none; -} - -/* Colors */ - -.ui.pointing.menu .active.item:hover::after { - background-color: #f2f2f2; -} - -.ui.pointing.menu .active.item::after { - background-color: #f2f2f2; -} - -.ui.pointing.menu .active.item:hover::after { - background-color: #f2f2f2; -} - -.ui.vertical.pointing.menu .active.item:hover::after { - background-color: #f2f2f2; -} - -.ui.vertical.pointing.menu .active.item::after { - background-color: #f2f2f2; -} - -.ui.vertical.pointing.menu .menu .active.item::after { - background-color: #fff; -} - -@media only screen and (max-width: 767.98px) { - .ui.stackable.grid .ui.fluid.vertical.pointing.menu .active.item::after { - display: none; - } -} - -.ui.inverted.pointing.menu .primary.active.item::after { - background-color: #2185d0; -} - -.ui.inverted.pointing.menu .secondary.active.item::after { - background-color: #1b1c1d; -} - -.ui.inverted.pointing.menu .red.active.item::after { - background-color: #db2828; -} - -.ui.inverted.pointing.menu .orange.active.item::after { - background-color: #f2711c; -} - -.ui.inverted.pointing.menu .yellow.active.item::after { - background-color: #fbbd08; -} - -.ui.inverted.pointing.menu .olive.active.item::after { - background-color: #b5cc18; -} - -.ui.inverted.pointing.menu .green.active.item::after { - background-color: #21ba45; -} - -.ui.inverted.pointing.menu .teal.active.item::after { - background-color: #00b5ad; -} - -.ui.inverted.pointing.menu .blue.active.item::after { - background-color: #2185d0; -} - -.ui.inverted.pointing.menu .violet.active.item::after { - background-color: #6435c9; -} - -.ui.inverted.pointing.menu .purple.active.item::after { - background-color: #a333c8; -} - -.ui.inverted.pointing.menu .pink.active.item::after { - background-color: #e03997; -} - -.ui.inverted.pointing.menu .brown.active.item::after { - background-color: #a5673f; -} - -.ui.inverted.pointing.menu .grey.active.item::after { - background-color: #767676; -} - -.ui.inverted.pointing.menu .black.active.item::after { - background-color: #1b1c1d; -} - -/* -------------- - Attached - --------------- */ - -/* Middle */ - -.ui.attached.menu { - top: 0; - bottom: 0; - border-radius: 0; - margin: 0 -1px; - width: calc(100% + 2px); - max-width: calc(100% + 2px); - box-shadow: none; -} - -.ui.attached + .ui.attached.menu:not(.top) { - border-top: none; -} - -/* Top */ - -.ui[class*="top attached"].menu { - bottom: 0; - margin-bottom: 0; - top: 0; - margin-top: 1rem; - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui.menu[class*="top attached"]:first-child { - margin-top: 0; -} - -/* Bottom */ - -.ui[class*="bottom attached"].menu { - bottom: 0; - margin-top: 0; - top: 0; - margin-bottom: 1rem; - box-shadow: none; - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -.ui[class*="bottom attached"].menu:last-child { - margin-bottom: 0; -} - -/* Attached Menu Item */ - -.ui.top.attached.menu > .item:first-child { - border-radius: 0.28571429rem 0 0 0; -} - -.ui.bottom.attached.menu > .item:first-child { - border-radius: 0 0 0 0.28571429rem; -} - -/* Tabular Attached */ - -.ui.attached.menu:not(.tabular):not(.text) { - border: 1px solid #d4d4d5; -} - -.ui.attached.inverted.menu { - border: none; -} - -.ui[class*="top attached"].inverted.tabular.menu { - border-bottom: 1px solid #555; -} - -.ui.attached.tabular.menu { - margin-left: 0; - margin-right: 0; - width: 100%; -} - -.ui.wrapping.menu { - flex-wrap: wrap; -} - -.ui.wrapping.menu .item::before { - right: auto; - left: 0; -} - -.ui.wrapping.menu .item:first-child::before { - display: none; -} - -.ui.wrapping.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) .item:last-of-type, -.ui.wrapping.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) .item:last-child { - border-right: 1px solid rgba(34, 36, 38, 0.1); -} - -.ui.wrapped.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) .item:first-child { - border-bottom-left-radius: 0; -} - -.ui.wrapped.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) .item:last-child { - border-top-right-radius: 0; -} - -/* -------------- - Sizes ---------------- */ - -.ui.menu { - font-size: 1rem; -} - -.ui.vertical.menu { - width: 15rem; -} - -.ui.mini.menu, -.ui.mini.menu .dropdown, -.ui.mini.menu .dropdown .menu > .item { - font-size: 0.78571429rem; -} - -.ui.mini.vertical.menu:not(.icon) { - width: 9rem; -} - -.ui.tiny.menu, -.ui.tiny.menu .dropdown, -.ui.tiny.menu .dropdown .menu > .item { - font-size: 0.85714286rem; -} - -.ui.tiny.vertical.menu:not(.icon) { - width: 11rem; -} - -.ui.small.menu, -.ui.small.menu .dropdown, -.ui.small.menu .dropdown .menu > .item { - font-size: 0.92857143rem; -} - -.ui.small.vertical.menu:not(.icon) { - width: 13rem; -} - -.ui.large.menu, -.ui.large.menu .dropdown, -.ui.large.menu .dropdown .menu > .item { - font-size: 1.07142857rem; -} - -.ui.large.vertical.menu:not(.icon) { - width: 18rem; -} - -.ui.big.menu, -.ui.big.menu .dropdown, -.ui.big.menu .dropdown .menu > .item { - font-size: 1.14285714rem; -} - -.ui.big.vertical.menu:not(.icon) { - width: 20rem; -} - -.ui.huge.menu, -.ui.huge.menu .dropdown, -.ui.huge.menu .dropdown .menu > .item { - font-size: 1.21428571rem; -} - -.ui.huge.vertical.menu:not(.icon) { - width: 22rem; -} - -.ui.massive.menu, -.ui.massive.menu .dropdown, -.ui.massive.menu .dropdown .menu > .item { - font-size: 1.28571429rem; -} - -.ui.massive.vertical.menu:not(.icon) { - width: 25rem; -} - -/* ------------------- - Inverted dropdowns --------------------- */ - -.ui.menu .ui.inverted.inverted.dropdown.item .menu { - background: #1b1c1d; - box-shadow: none; -} - -.ui.menu .ui.inverted.dropdown .menu > .item { - color: rgba(255, 255, 255, 0.8) !important; -} - -.ui.menu .ui.inverted.dropdown .menu > .active.item { - background: transparent !important; - color: rgba(255, 255, 255, 0.8) !important; -} - -.ui.menu .ui.inverted.dropdown .menu > .item:hover { - background: rgba(255, 255, 255, 0.08) !important; - color: rgba(255, 255, 255, 0.8) !important; -} - -.ui.menu .ui.inverted.dropdown .menu > .selected.item { - background: rgba(255, 255, 255, 0.15) !important; - color: rgba(255, 255, 255, 0.8) !important; -} - -/* Vertical */ - -.ui.vertical.menu .inverted.dropdown.item .menu { - box-shadow: none; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Accordion - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Accordion -*******************************/ - -.ui.accordion, -.ui.accordion .accordion { - max-width: 100%; -} - -.ui.accordion .accordion { - margin: 1em 0 0; - padding: 0; -} - -/* Title */ - -.ui.accordion.menu .item > .title, -.ui.accordion > .title, -.ui.accordion .accordion > .title { - cursor: pointer; - padding: 0.5em 0; - font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-size: 1em; - color: rgba(0, 0, 0, 0.87); - list-style: none; - line-height: 1; -} - -/* Default Styling */ - -.ui.accordion:not(.styled) .title ~ .content, -.ui.accordion:not(.styled) .accordion .title ~ .content { - margin: ""; - padding: 0.5em 0 1em; -} - -.ui.accordion:not(.styled) .title ~ .content:last-child { - padding-bottom: 0; -} - -/* Arrow */ - -.ui.accordion .ui.header > .dropdown.icon, -.ui.accordion .title > .dropdown.icon, -.ui.accordion .accordion .title > .dropdown.icon { - display: inline-block; - float: none; - opacity: 1; - width: 1.25em; - height: 1em; - margin: 0 0.25rem 0 0; - padding: 0; - font-size: 1em; - transition: transform 0.1s ease, opacity 0.1s ease; - vertical-align: baseline; - transform: none; -} - -.ui.accordion .ui.header > .dropdown.icon.right, -.ui.accordion .title > .dropdown.icon.right, -.ui.accordion .accordion .title > .dropdown.icon.right { - float: right; - transform: rotate(180deg); -} - -/* -------------- - Coupling ---------------- */ - -/* Menu */ - -.ui.accordion.menu .item .title { - display: block; - padding: 0; -} - -.ui.accordion.menu .item .title > .dropdown.icon { - float: right; - margin: 0 0.25rem 0 0; - transform: rotate(180deg); -} - -/* Header */ - -.ui.accordion .ui.header > .dropdown.icon { - font-size: 1em; - margin: 0 0.25rem 0 0; -} - -/******************************* - States -*******************************/ - -.ui.accordion[open] > .title > .dropdown.icon, -.ui.accordion .accordion[open] > .title > .dropdown.icon, -.ui.accordion .active.title > .dropdown.icon, -.ui.accordion .accordion .active.title > .dropdown.icon { - transform: rotate(90deg); -} - -.ui.accordion.menu .item .active.title > .dropdown.icon { - transform: rotate(90deg); -} - -/******************************* - Types -*******************************/ - -/* -------------- - Styled - --------------- */ - -.ui.styled.accordion { - width: 600px; -} - -.ui.styled.accordion, -.ui.styled.accordion .accordion { - border-radius: 0.28571429rem; - background: #fff; - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15); -} - -.ui.styled.accordion > .title, -.ui.styled.accordion .accordion > .title { - margin: 0; - padding: 0.75em 1em; - color: rgba(0, 0, 0, 0.4); - font-weight: bold; - border-top: 1px solid rgba(34, 36, 38, 0.15); - transition: background 0.1s ease, color 0.1s ease; -} - -.ui.styled.accordion > .title:first-child, -.ui.styled.accordion .accordion > .title:first-child { - border-top: none; -} - -/* Content */ - -.ui.styled.accordion > .content { - margin: 0; - padding: 0.5em 1em 1.5em; -} - -.ui.styled.accordion .accordion > .content { - margin: 0; - padding: 0.5em 1em 1.5em; -} - -/* Hover */ - -.ui.styled.accordion > .title:hover { - background: transparent; - color: rgba(0, 0, 0, 0.87); -} - -.ui.styled.accordion .accordion > .title:hover { - background: transparent; - color: rgba(0, 0, 0, 0.87); -} - -/* Active */ - -.ui.styled.accordion[open] > .title, -.ui.styled.accordion .active.title { - background: transparent; - color: rgba(0, 0, 0, 0.95); -} - -.ui.styled.accordion .accordion[open] > .title, -.ui.styled.accordion .accordion .active.title { - background: transparent; - color: rgba(0, 0, 0, 0.95); -} - -/* -------------- - Compact - --------------- */ - -/* Default Styling */ - -.ui.compact.accordion:not(.styled) > .title, -.ui.compact.accordion:not(.styled) .accordion > .title { - padding: 0.25em 0; -} - -.ui.compact.accordion:not(.styled) .title ~ .content, -.ui.compact.accordion:not(.styled) .accordion .title ~ .content { - padding: 0.25em 0 0.5em; -} - -/* Styled */ - -.ui.compact.styled.accordion > .title, -.ui.compact.styled.accordion .accordion > .title { - padding: 0.375em 0.5em; -} - -.ui.compact.styled.accordion .title ~ .content, -.ui.compact.styled.accordion .accordion .title ~ .content { - padding: 0.25em 0.5em 0.75em; -} - -/* -------------- - Very Compact - --------------- */ - -.ui[class*="very compact"].accordion:not(.styled) > .title, -.ui[class*="very compact"].accordion:not(.styled) .accordion > .title { - padding: 0.125em 0; -} - -.ui[class*="very compact"].accordion:not(.styled) .title ~ .content, -.ui[class*="very compact"].accordion:not(.styled) .accordion .title ~ .content { - padding: 0.125em 0 0.25em; -} - -.ui[class*="very compact"].styled.accordion > .title, -.ui[class*="very compact"].styled.accordion .accordion > .title { - padding: 0.1875em 0.25em; -} - -.ui[class*="very compact"].styled.accordion .title ~ .content, -.ui[class*="very compact"].styled.accordion .accordion .title ~ .content { - padding: 0.125em 0.25em 0.375em; -} - -/******************************* - States -*******************************/ - -/* -------------- - Not Active ---------------- */ - -.ui.accordion:not(details) .title ~ .content:not(.active), -.ui.accordion .accordion:not(details) .title ~ .content:not(.active) { - display: none; -} - -/******************************* - Variations -*******************************/ - -/* -------------- - Fluid - --------------- */ - -.ui.fluid.accordion, -.ui.fluid.accordion .accordion { - width: 100%; -} - -/* -------------- - Inverted - --------------- */ - -.ui.inverted.accordion.menu .item > .title, -.ui.inverted.accordion > .title, -.ui.inverted.accordion .accordion > .title { - color: rgba(255, 255, 255, 0.9); -} - -.ui.inverted.styled.accordion, -.ui.inverted.styled.accordion .accordion { - background: #1b1c1d; - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1); -} - -.ui.inverted.styled.accordion > .title, -.ui.inverted.styled.accordion .accordion > .title { - color: rgba(255, 255, 255, 0.5); - border-top: 1px solid rgba(255, 255, 255, 0.1); -} - -/* Hover */ - -.ui.inverted.styled.accordion > .title:hover { - background: transparent; - color: rgba(255, 255, 255, 0.9); -} - -.ui.inverted.styled.accordion .accordion > .title:hover { - background: transparent; - color: rgba(255, 255, 255, 0.9); -} - -/* Active */ - -.ui.inverted.styled.accordion[open] > .title, -.ui.inverted.styled.accordion .active.title { - background: transparent; - color: #ffffff; -} - -.ui.inverted.styled.accordion .accordion[open] > .title, -.ui.inverted.styled.accordion .accordion .active.title { - background: transparent; - color: #ffffff; -} - -.ui.basic.styled.accordion, -.ui.basic.styled.accordion .accordion { - background: transparent; - box-shadow: none; -} - -.ui.basic.styled.accordion > .title, -.ui.basic.styled.accordion .accordion > .title { - border: none; - color: rgba(0, 0, 0, 0.6); -} - -.ui.basic.styled.accordion > .title:hover, -.ui.basic.styled.accordion .accordion > .title:hover { - background: transparent; - color: rgba(0, 0, 0, 0.87); -} - -.ui.basic.styled.accordion[open] > .title, -.ui.basic.styled.accordion .active.title, -.ui.basic.styled.accordion .accordion[open] > .title, -.ui.basic.styled.accordion .accordion .active.title { - background: transparent; - color: rgba(0, 0, 0, 0.95); -} - -.ui.inverted.basic.styled.accordion > .title, -.ui.inverted.basic.styled.accordion .accordion > .title { - background: transparent; - color: rgba(255, 255, 255, 0.8); -} - -.ui.inverted.basic.styled.accordion > .title:hover, -.ui.inverted.basic.styled.accordion .accordion > .title:hover { - background: transparent; - color: rgba(255, 255, 255, 0.9); -} - -.ui.inverted.basic.styled.accordion[open] > .title, -.ui.inverted.basic.styled.accordion .active.title, -.ui.inverted.basic.styled.accordion .accordion[open] > .title, -.ui.inverted.basic.styled.accordion .accordion .active.title { - background: transparent; - color: #ffffff; -} - -.ui.tree.accordion:not(.styled) .title ~ .content, -.ui.tree.accordion:not(.styled) .accordion .title ~ .content { - padding: 0; -} - -.ui.tree.accordion > .content, -.ui.tree.accordion .accordion > .content { - margin-left: 1.7em; -} - -.ui.tree.accordion .accordion { - margin-top: 0; -} - -/******************************* - Theme Overrides -*******************************/ - -@font-face { - font-family: Accordion; - src: url("data:application/font-woff;base64,d09GRk9UVE8AAAREAAsAAAAABkAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAC7AAAAQoAAAE/j/fxwUZGVE0AAAQUAAAAHAAAAByNqvxQR0RFRgAAA/gAAAAcAAAAIAAnABhPUy8yAAABYAAAAEIAAABgTadW5mNtYXAAAAKMAAAAUQAAAWAFZuKDaGVhZAAAAQgAAAAyAAAANg8zT8toaGVhAAABPAAAABoAAAAkApkA5mhtdHgAAAQwAAAAEwAAABYBtwASbWF4cAAAAVgAAAAGAAAABgAGUABuYW1lAAABpAAAAOYAAAGq/HAhWXBvc3QAAALgAAAADAAAACAAAwAAeJxjYGRgYADi8KWRsvH8Nl8ZuJkYQOD838XvQPT9hGxNIOXJsJ0xD0hzMIClARzsCcoAAHicY2BkYGB88P8BkGQAg+0wBhywAgBgjgOAAAAAAFAAAAYAAHicY2BmOM84gYGVgYHRhzGNgYHBHUp/ZZBkaGFABYwCSJyANNcUBgcGhg+3GB/8fwCUfMCgAFIDV6AAhIwARVcMJwAAeJx1jrFOwzAURU/SNKgFIVgQ6uSRKWolZjaQOnQBqQNb2lpRpMqW3HTowhew8U9I/BU37WOjtmyfd/3utYEbvsn4G7lxRsmtcc4FD8YD6U/GhfjNeMglybjU/DQeM+FHrqwY2QsnzrgSnTjnmnvjgfSpcSF+Nh5yx7txKf3DeMwjX31soqajJdCoqLs26HzFq9yz1WVS6Zv9tk5nmv8Vl0pI7CRHXThmVPofS592bQxuVk3PGF+Ohk6WRhHhGNO3eTbSVhy0z1mra6HV91YyxdC5xgevFL9xq4Obr+MixlDxC/HTOrsAAHicY2BgYGaAYBkGRgYQiALyGMF8FgY7IM3FwMHABISMDAofbv3/+/8/WJXCh5tgNuP/x2A+RC8bUC0DUB8rWIgNiJkY8AJm/NJDHgAALqoOxgAAAHicY2BmwAsAAH0ABHicPY7BSsNAEIZnkk2zlhg1JKAYxOrJi6RepMdC8SKefAJP4kVBzCtkNw7ZjeK1j9C38Rn6CO5CDrppigwMM8P/f/8gMAaIGL4+vD09PwJ6gLCwp2AnaM88e+7bQ0aRTxE7GcPRffJL9D9EIX2bW+sFOXzu5QD7OSwPcuA5Xiew05N8CIDDLiSQuTqGSVmU0/KqKG+Kxaxv8+llMURvHwBAgRJrfEeCEaLns9HdRxzHP/FqaV4yaptWK25SkwZKu4Va0rUSWjYVVbz7CqmqhZBSiNodqGqk5l2vFqrW1PJ4tWbGqZxVKa31htA6gmN2aTBwBobzuYsU1YYkGheyZVBqLjKKxn8cSmvuAAB4nGNgZGBg4AFiAQYJBiYgzQLEIJoRggEFbQBAAAAAAQAAAADeTO04AAAAAM/9o+4AAAAA32BrKXicY2BAAEYQsZ1BiIEBAAPpAMsA") format("woff"); - font-weight: normal; - font-style: normal; -} - -/* Dropdown Icon */ - -.ui.accordion .ui.header > .dropdown.icon, -.ui.accordion .title > .dropdown.icon, -.ui.accordion .accordion .title > .dropdown.icon { - font-family: Accordion; - line-height: 1; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - font-weight: normal; - font-style: normal; - text-align: center; -} - -.ui.accordion .ui.header > .dropdown.icon::before, -.ui.accordion .title > .dropdown.icon::before, -.ui.accordion .accordion .title > .dropdown.icon::before { - content: "\f0da" -; -} - -/******************************* - User Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Checkbox - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Checkbox -*******************************/ - -/* -------------- - Content ---------------- */ - -.ui.checkbox { - position: relative; - display: inline-block; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - outline: none; - vertical-align: baseline; - font-style: normal; - min-height: 17px; - font-size: 1em; - line-height: 17px; - min-width: 17px; -} - -/* HTML Checkbox */ - -.ui.checkbox input[type="checkbox"], -.ui.checkbox input[type="radio"] { - cursor: pointer; - position: absolute; - top: 0; - left: 0; - opacity: 0 !important; - outline: none; - z-index: 3; - width: 17px; - height: 17px; -} - -.ui.checkbox label { - cursor: auto; - position: relative; - display: block; - outline: none; - font-size: 1em; -} - -.ui.checkbox:not(.invisible) label { - padding-left: 1.85714em; -} - -.ui.checkbox label::before { - position: absolute; - top: 0; - left: 0; - width: 17px; - height: 17px; - content: ""; - background: #fff; - border-radius: 0.21428571rem; - transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; - border: 1px solid #d4d4d5; -} - -/* -------------- - Checkmark ---------------- */ - -.ui.checkbox label::after { - position: absolute; - font-size: 14px; - top: 0; - left: 0; - width: 17px; - height: 17px; - text-align: center; - opacity: 0; - color: rgba(0, 0, 0, 0.87); - transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; -} - -.ui.right.aligned.checkbox label { - padding-left: 0; - padding-right: 1.85714em; -} - -.ui.right.aligned.checkbox label::after, -.ui.right.aligned.checkbox label::before { - right: 0; - left: auto; -} - -/* -------------- - Label ---------------- */ - -/* Inside */ - -.ui.checkbox label, -.ui.checkbox + label { - color: rgba(0, 0, 0, 0.87); - transition: color 0.1s ease; -} - -/* Outside */ - -.ui.checkbox + label { - vertical-align: middle; -} - -/******************************* - States -*******************************/ - -/* -------------- - Hover ---------------- */ - -.ui.checkbox label:hover::before { - background: #fff; - border-color: rgba(34, 36, 38, 0.35); -} - -.ui.checkbox:not(.invisible) label:hover, -.ui.checkbox:not(.invisible) + label:hover { - color: rgba(0, 0, 0, 0.8); -} - -/* -------------- - Down ---------------- */ - -.ui.checkbox label:active::before { - background: #f9fafb; - border-color: rgba(34, 36, 38, 0.35); -} - -.ui.checkbox label:active::after { - color: rgba(0, 0, 0, 0.95); -} - -.ui.checkbox:not(.invisible) input:active ~ label { - color: rgba(0, 0, 0, 0.95); -} - -/* -------------- - Focus ---------------- */ - -.ui.checkbox input:focus ~ label::before { - background: #fff; - border-color: #96c8da; -} - -.ui.checkbox input:focus ~ label::after { - color: rgba(0, 0, 0, 0.95); -} - -.ui.checkbox:not(.invisible) input:focus ~ label { - color: rgba(0, 0, 0, 0.95); -} - -/* -------------- - Active ---------------- */ - -.ui.checkbox input:checked ~ label::before { - background: #fff; - border-color: rgba(34, 36, 38, 0.35); -} - -.ui.checkbox input:checked ~ label::after { - opacity: 1; - color: rgba(0, 0, 0, 0.95); -} - -/* -------------- - Indeterminate - --------------- */ - -.ui.checkbox input:not([type="radio"]):indeterminate ~ label::before { - background: #fff; - border-color: rgba(34, 36, 38, 0.35); -} - -.ui.checkbox input:not([type="radio"]):indeterminate ~ label::after { - opacity: 1; - color: rgba(0, 0, 0, 0.95); -} - -.ui.indeterminate.toggle.checkbox input:not([type="radio"]):indeterminate ~ label::before { - background: rgba(0, 0, 0, 0.15); -} - -.ui.indeterminate.toggle.checkbox input:not([type="radio"]) ~ label::after { - left: 1.075rem; -} - -.ui.right.aligned.indeterminate.toggle.checkbox input:not([type="radio"]) ~ label::after { - left: auto; - right: 1.075rem; -} - -/* -------------- - Active Focus ---------------- */ - -.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before, -.ui.checkbox input:checked:focus ~ label::before { - background: #fff; - border-color: #96c8da; -} - -.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after, -.ui.checkbox input:checked:focus ~ label::after { - color: rgba(0, 0, 0, 0.95); -} - -/* -------------- - Read-Only - --------------- */ - -.ui.read-only.checkbox, -.ui.read-only.checkbox label { - cursor: default; - pointer-events: none; -} - -/* -------------- - Disabled - --------------- */ - -.ui.disabled.checkbox label, -.ui.checkbox input[disabled] ~ label { - cursor: default; - opacity: 0.5; - color: #000000; - pointer-events: none; -} - -/* -------------- - Hidden ---------------- */ - -/* Initialized checkbox moves input below element - to prevent manually triggering */ - -.ui.checkbox input.hidden { - z-index: -1; -} - -/* Selectable Label */ - -.ui.checkbox input + label[for], -.ui.checkbox input.hidden + label { - cursor: pointer; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -/******************************* - Types -*******************************/ - -/* -------------- - Radio - --------------- */ - -.ui.radio.checkbox { - min-height: 15px; -} - -.ui.radio.checkbox label { - padding-left: 1.85714em; -} - -/* Box */ - -.ui.radio.checkbox label::before { - content: ""; - transform: none; - width: 15px; - height: 15px; - border-radius: 500rem; - top: 1px; - left: 0; -} - -/* Bullet */ - -.ui.radio.checkbox label::after { - border: none; - content: "" !important; - line-height: 15px; - top: 1px; - left: 0; - width: 15px; - height: 15px; - border-radius: 500rem; - transform: scale(0.46666667); - background-color: rgba(0, 0, 0, 0.87); -} - -/* Focus */ - -.ui.radio.checkbox input:focus ~ label::before { - background-color: #fff; -} - -.ui.radio.checkbox input:focus ~ label::after { - background-color: rgba(0, 0, 0, 0.95); -} - -/* Indeterminate */ - -.ui.radio.checkbox input:indeterminate ~ label::after { - opacity: 0; -} - -/* Active */ - -.ui.radio.checkbox input:checked ~ label::before { - background-color: #fff; -} - -.ui.radio.checkbox input:checked ~ label::after { - background-color: rgba(0, 0, 0, 0.95); -} - -/* Active Focus */ - -.ui.radio.checkbox input:focus:checked ~ label::before { - background-color: #fff; -} - -.ui.radio.checkbox input:focus:checked ~ label::after { - background-color: rgba(0, 0, 0, 0.95); -} - -/* -------------- - Slider - --------------- */ - -.ui.slider.checkbox { - min-height: 1.25rem; -} - -/* Input */ - -.ui.slider.checkbox input { - width: 3.5rem; - height: 1.25rem; -} - -/* Label */ - -.ui.slider.checkbox label { - padding-left: 4.5rem; - line-height: 1rem; - color: rgba(0, 0, 0, 0.4); -} - -/* Line */ - -.ui.slider.checkbox label::before { - display: block; - position: absolute; - content: ""; - transform: none; - border: none !important; - left: 0; - z-index: 1; - top: 0.4rem; - background-color: rgba(0, 0, 0, 0.05); - width: 3.5rem; - height: 0.21428571rem; - border-radius: 500rem; - transition: background 0.3s ease; -} - -/* Handle */ - -.ui.slider.checkbox label::after { - background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05)); - position: absolute; - content: "" !important; - opacity: 1; - z-index: 2; - border: none; - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; - width: 1.5rem; - height: 1.5rem; - top: -0.25rem; - left: 0; - transform: none; - border-radius: 500rem; - transition: left 0.3s ease; -} - -/* Focus */ - -.ui.slider.checkbox input:focus ~ label::before { - background-color: rgba(0, 0, 0, 0.15); - border: none; -} - -/* Hover */ - -.ui.slider.checkbox label:hover { - color: rgba(0, 0, 0, 0.8); -} - -.ui.slider.checkbox label:hover::before { - background: rgba(0, 0, 0, 0.15); -} - -/* Active */ - -.ui.slider.checkbox input:checked ~ label { - color: rgba(0, 0, 0, 0.95); -} - -.ui.slider.checkbox input:checked ~ label::before { - background-color: #545454; -} - -.ui.slider.checkbox input:checked ~ label::after { - left: 2rem; -} - -/* Active Focus */ - -.ui.slider.checkbox input:focus:checked ~ label { - color: rgba(0, 0, 0, 0.95); -} - -.ui.slider.checkbox input:focus:checked ~ label::before { - background-color: #000000; -} - -.ui.right.aligned.slider.checkbox label { - padding-left: 0; - padding-right: 4.5rem; -} - -.ui.right.aligned.slider.checkbox label::after { - left: auto; - right: 2rem; - transition: right 0.3s ease; -} - -.ui.right.aligned.slider.checkbox input:checked ~ label::after { - left: auto; - right: 0; -} - -/* -------------- - Toggle - --------------- */ - -.ui.toggle.checkbox { - min-height: 1.5rem; -} - -/* Input */ - -.ui.toggle.checkbox input { - width: 3.5rem; - height: 1.5rem; -} - -/* Label */ - -.ui.toggle.checkbox label { - min-height: 1.5rem; - padding-left: 4.5rem; - color: rgba(0, 0, 0, 0.87); -} - -.ui.toggle.checkbox label { - padding-top: 0.15em; -} - -/* Switch */ - -.ui.toggle.checkbox label::before { - display: block; - position: absolute; - content: ""; - z-index: 1; - transform: none; - border: none; - top: 0; - background: rgba(0, 0, 0, 0.05); - box-shadow: none; - width: 3.5rem; - height: 1.5rem; - border-radius: 500rem; -} - -/* Handle */ - -.ui.toggle.checkbox label::after { - background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05)); - position: absolute; - content: "" !important; - opacity: 1; - z-index: 2; - border: none; - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; - width: 1.5rem; - height: 1.5rem; - top: 0; - left: 0; - border-radius: 500rem; - transition: background 0.3s ease, left 0.3s ease; -} - -.ui.toggle.checkbox input ~ label::after { - left: -0.05rem; - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; -} - -/* Focus */ - -.ui.toggle.checkbox input:focus ~ label::before { - background-color: rgba(0, 0, 0, 0.15); - border: none; -} - -/* Hover */ - -.ui.toggle.checkbox label:hover::before { - background-color: rgba(0, 0, 0, 0.15); - border: none; -} - -/* Active */ - -.ui.toggle.checkbox input:checked ~ label { - color: rgba(0, 0, 0, 0.95); -} - -.ui.toggle.checkbox input:checked ~ label::before { - background-color: #2185d0; -} - -.ui.toggle.checkbox input:checked ~ label::after { - left: 2.15rem; - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; -} - -/* Active Focus */ - -.ui.toggle.checkbox input:focus:checked ~ label { - color: rgba(0, 0, 0, 0.95); -} - -.ui.toggle.checkbox input:focus:checked ~ label::before { - background-color: #0d71bb; -} - -.ui.right.aligned.toggle.checkbox label { - padding-left: 0; - padding-right: 4.5rem; -} - -.ui.right.aligned.toggle.checkbox input ~ label::after { - left: auto; - right: 2.15rem; - transition: background 0.3s ease, right 0.3s ease; -} - -.ui.right.aligned.toggle.checkbox input:checked ~ label::after { - left: auto; - right: -0.05rem; -} - -/******************************* - Variations -*******************************/ - -/* -------------- - Fitted - --------------- */ - -.ui.ui.fitted.checkbox label { - padding-left: 0; -} - -.ui.fitted.toggle.checkbox { - width: 3.5rem; -} - -.ui.fitted.slider.checkbox { - width: 3.5rem; -} - -/* -------------- - Inverted - --------------- */ - -.ui.ui.ui.inverted.checkbox label, -.ui.ui.ui.inverted.checkbox + label { - color: rgba(255, 255, 255, 0.9); -} - -/* Hover */ - -.ui.ui.inverted.checkbox label:hover { - color: #ffffff; -} - -.ui.inverted.checkbox label:hover::before { - border-color: rgba(34, 36, 38, 0.5); -} - -/* Slider Label */ - -.ui.inverted.slider.checkbox label { - color: rgba(255, 255, 255, 0.5); -} - -/* Slider Line */ - -.ui.ui.inverted.slider.checkbox label::before { - background-color: rgba(255, 255, 255, 0.5); -} - -/* Slider Hover */ - -.ui.ui.inverted.slider.checkbox label:hover::before { - background: rgba(255, 255, 255, 0.7); -} - -/* Slider Active */ - -.ui.ui.inverted.slider.checkbox input:checked ~ label { - color: #ffffff; -} - -.ui.ui.inverted.slider.checkbox input:checked ~ label::before { - background-color: rgba(255, 255, 255, 0.8); -} - -/* Slider Active Focus */ - -.ui.ui.inverted.slider.checkbox input:focus:checked ~ label { - color: #ffffff; -} - -.ui.ui.inverted.slider.checkbox input:focus:checked ~ label::before { - background-color: rgba(255, 255, 255, 0.8); -} - -/* Toggle Switch */ - -.ui.ui.inverted.toggle.checkbox label::before { - background-color: rgba(255, 255, 255, 0.9); -} - -/* Toggle Hover */ - -.ui.ui.inverted.toggle.checkbox label:hover::before { - background: #ffffff; -} - -/* Toggle Active */ - -.ui.ui.inverted.toggle.checkbox input:checked ~ label { - color: #ffffff; -} - -.ui.ui.inverted.toggle.checkbox input:checked ~ label::before { - background-color: #2185d0; -} - -/* Toggle Active Focus */ - -.ui.ui.inverted.toggle.checkbox input:focus:checked ~ label { - color: #ffffff; -} - -.ui.ui.inverted.toggle.checkbox input:focus:checked ~ label::before { - background-color: #0d71bb; -} - -/* -------------- - Invisible - --------------- */ - -.ui.invisible.checkbox:not(.compact) { - display: block; -} - -.ui.invisible.checkbox input { - left: -99999px; - position: absolute; -} - -.ui.invisible.checkbox label::before, -.ui.invisible.checkbox label::after { - display: none; -} - -.ui.invisible.checkbox label { - transition: all 0.1s ease; -} - -.ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked) + label { - background: transparent; - border-color: transparent; - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset; - color: inherit; -} - -.ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked):not(:hover):focus + label:not(.image) { - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset; -} - -.ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked) + label.image, -.basic.ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked) + label { - box-shadow: none; -} - -.ui.invisible.checkbox input:not(:checked) + label.image { - opacity: 0.5; - filter: grayscale(1); -} - -.ui.invisible.checkbox input:not(:checked):not(:hover):focus + label.image { - opacity: 0.75; -} - -.ui.invisible.checkbox input:not(:checked)[disabled] + label.image, -.disabled.ui.invisible.checkbox input:not(:checked) + label.image { - opacity: 0.25; -} - -/* -------------------- - Size ---------------------- */ - -.ui.mini.checkbox { - font-size: 0.78571429em; -} - -.ui.tiny.checkbox { - font-size: 0.85714286em; -} - -.ui.small.checkbox { - font-size: 0.92857143em; -} - -.ui.large.checkbox { - font-size: 1.14285714em; -} - -.ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after, -.ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label::after, -.ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before, -.ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label::before { - transform: scale(1.14285714); - transform-origin: left; -} - -.ui.large.form .checkbox.radio label::before, -.ui.large.checkbox.radio label::before { - transform: scale(1.14285714); - transform-origin: left; -} - -.ui.large.form .checkbox.radio label::after, -.ui.large.checkbox.radio label::after { - transform: scale(0.57142857); - transform-origin: left; - left: 0.33571429em; -} - -.ui.big.checkbox { - font-size: 1.28571429em; -} - -.ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after, -.ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label::after, -.ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before, -.ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label::before { - transform: scale(1.28571429); - transform-origin: left; -} - -.ui.big.form .checkbox.radio label::before, -.ui.big.checkbox.radio label::before { - transform: scale(1.28571429); - transform-origin: left; -} - -.ui.big.form .checkbox.radio label::after, -.ui.big.checkbox.radio label::after { - transform: scale(0.64285714); - transform-origin: left; - left: 0.37142857em; -} - -.ui.huge.checkbox { - font-size: 1.42857143em; -} - -.ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after, -.ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label::after, -.ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before, -.ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label::before { - transform: scale(1.42857143); - transform-origin: left; -} - -.ui.huge.form .checkbox.radio label::before, -.ui.huge.checkbox.radio label::before { - transform: scale(1.42857143); - transform-origin: left; -} - -.ui.huge.form .checkbox.radio label::after, -.ui.huge.checkbox.radio label::after { - transform: scale(0.71428571); - transform-origin: left; - left: 0.40714286em; -} - -.ui.massive.checkbox { - font-size: 1.71428571em; -} - -.ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after, -.ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label::after, -.ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before, -.ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label::before { - transform: scale(1.71428571); - transform-origin: left; -} - -.ui.massive.form .checkbox.radio label::before, -.ui.massive.checkbox.radio label::before { - transform: scale(1.71428571); - transform-origin: left; -} - -.ui.massive.form .checkbox.radio label::after, -.ui.massive.checkbox.radio label::after { - transform: scale(0.85714286); - transform-origin: left; - left: 0.47857143em; -} - -/******************************* - Theme Overrides -*******************************/ - -@font-face { - font-family: Checkbox; - src: url("data:application/font-woff;base64,d09GRgABAAAAAAR8AA0AAAAABtwAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEYAAAABoAAAAcgbCWJ0dERUYAAARIAAAAFwAAABgAJQAAT1MvMgAAAZgAAABAAAAAYA8SBD9jbWFwAAAB9AAAAFMAAAFc71zo6Wdhc3AAAARAAAAACAAAAAgAAAAQZ2x5ZgAAAlwAAADJAAABVHshwGBoZWFkAAABMAAAAC4AAAA2Bj3tWWhoZWEAAAFgAAAAHQAAACQHfQPIaG10eAAAAdgAAAAZAAAAHg56AEVsb2NhAAACSAAAABIAAAASAQoAjG1heHAAAAGAAAAAGAAAACAACgAvbmFtZQAAAygAAADnAAABp5xOC4Fwb3N0AAAEEAAAADAAAABaHRtWW3icY2BkYGBgYmDgqbAVjee3+crAzcIAAhc3XilHppl3M+cBKQ6QWgYGAAHnCVsAAHicY2BkYGA+8P8AAwMLAwgw72ZgZEAF7ABaJgNOAAAAeJxjYGRgYOBg0GUA0QwMTAxoAAAFtQA6eJxjYGYWYpzAwMrAwDST6QwDA0M/hGZ8zWDMyMmAChgF0AQYHBgYXjAxH/h/gMGB+QCIx8CIJKvAwAgAIOcKW3icY2GAAMZQCM0ExCwMDK7MqiAeAAqXAM4AAAB4nN2NwQ2AMAwDL00pHYJH52AQ9n/w6BbFCS9WwJFlO3IUwHl5YAQuJctcOaVdU6TGmGWt7IxJuHXnvmcrnLPR2GWb6NnF4rrwhT5U/o0Hf5EJGAAAAAAAAAgACAAQABgASABsAKoAAHichY09CsJAEIVndiG2gyQ7IASJIbHQyvyIiFhZpBE8iNsIeiVvYOFx7FPbKE6yUcHGgZ23jzd8DxDeowAWCv77Dez0Vd1hAIB+D714NMa0yNdYZrMhum0CfaWnT4bpeSPaEjOd8djIltTBNBlhSGzES3Jqb5oW6UOrE1WBL7/A73lxNBqnK8znZRbNWMgJET8qJhlWF1HV3zvXSceBSifawrTjTLrd0uI3c4lFu4UcYvbh1/KsIaodUayx7Kxr+wb8Y+EFi+YsngAAAHicfc5BSsNAGMXxf9q0agURFy50M3shlOoNikIXddGFa5N0SEvLDKQp2KUH8AxuXXkkz+JL+NYJJPzmffNmAlzxS0L7JJxzYx5wxoN5qPzZnMrv5hGXfJrHyr/NE+74UytJL5Rcdye0Huiue/NQ+aM5lV/NI27ZmsfKv8wTnvhhzgZPyY6CyAfMN77cFVFaaVBxZE9OraWvjvtc6Kn0jN40qDnoVyIBx4yMqWJfH7YxuFk27a2/dLVGxUpbQndYrrVnrazgpO9C1chSb7s3UymGxlU++Dpv/NoVJ7co4zLGkPEPj0VARQB4nGNgYsAPOBgYGJkYmBiZGZgZWRhZGdnYS/MyDYAAShuCaFcLCB9Iw/hGAOPdCuMAAQAB//8AD3icY2BkYGDgAWIBIGYCYhYIDQACOwAmAHicY2BgYGQAgns+by1A9MWNV8phNABQ5wfrAAA=") format("woff"); -} - -/* Checkmark */ - -.ui.checkbox label::after { - font-family: Checkbox; -} - -/* Checked */ - -.ui.checkbox input:checked ~ label::after { - content: "\e800"; -} - -/* Indeterminate */ - -.ui.checkbox input:indeterminate ~ label::after { - font-size: 12px; - content: "\e801"; -} - -/* UTF Reference -.check::before { content: '\e800'; } -.dash::before { content: '\e801'; } -.plus::before { content: '\e802'; } -*/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Dropdown - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Dropdown -*******************************/ - -.ui.dropdown { - cursor: pointer; - position: relative; - display: inline-block; - outline: none; - text-align: left; - transition: box-shadow 0.1s ease, width 0.1s ease; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -/******************************* - Content -*******************************/ - -/* -------------- - Menu ---------------- */ - -.ui.dropdown .menu { - cursor: auto; - position: absolute; - display: none; - outline: none; - top: 100%; - min-width: max-content; - margin: 0; - padding: 0; - background: #fff; - font-size: 1em; - text-shadow: none; - text-align: left; - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); - border: 1px solid rgba(34, 36, 38, 0.15); - border-radius: 0.28571429rem; - transition: opacity 0.1s ease; - z-index: 11; - will-change: transform, opacity; -} - -.ui.dropdown .menu > * { - white-space: nowrap; -} - -/* -------------- - Hidden Input ---------------- */ - -.ui.dropdown > input:not(.search):first-child, -.ui.dropdown > select { - display: none !important; -} - -/* -------------- - Dropdown Icon ---------------- */ - -.ui.dropdown:not(.labeled) > .dropdown.icon { - position: relative; - width: auto; - min-width: 1em; - font-size: 0.85714286em; - margin: 0 0 0 1em; -} - -.ui.dropdown .menu > .item .dropdown.icon { - width: auto; - float: right; - margin: 0em 0 0 1em; -} - -.ui.dropdown .menu > .item .dropdown.icon + .text { - margin-right: 1em; -} - -/* -------------- - Text ---------------- */ - -.ui.dropdown > .text { - display: inline-block; - transition: none; -} - -/* -------------- - Menu Item ---------------- */ - -.ui.dropdown .menu > .item { - position: relative; - cursor: pointer; - display: block; - border: none; - height: auto; - min-height: 2.57142857rem; - text-align: left; - border-top: none; - line-height: 1em; - font-size: 1rem; - color: rgba(0, 0, 0, 0.87); - padding: 0.78571429rem 1.14285714rem; - text-transform: none; - font-weight: normal; - box-shadow: none; - -webkit-touch-callout: none; -} - -.ui.dropdown .menu > .item:first-child { - border-top-width: 0; -} - -.ui.dropdown .menu > .item.vertical { - display: flex; - flex-direction: column-reverse; -} - -/* -------------- - Floated Content ---------------- */ - -.ui.dropdown > .text > [class*="right floated"], -.ui.dropdown .menu .item > [class*="right floated"] { - float: right !important; - margin-right: 0 !important; - margin-left: 1em !important; -} - -.ui.dropdown > .text > [class*="left floated"], -.ui.dropdown .menu .item > [class*="left floated"] { - float: left !important; - margin-left: 0 !important; - margin-right: 1em !important; -} - -.ui.dropdown .menu .item > i.icon.floated, -.ui.dropdown .menu .item > .flag.floated, -.ui.dropdown .menu .item > .image.floated, -.ui.dropdown .menu .item > img.floated { - margin-top: 0em; -} - -/* -------------- - Menu Divider ---------------- */ - -.ui.dropdown .menu > .header { - margin: 1rem 0 0.75rem; - padding: 0 1.14285714rem; - font-weight: bold; - text-transform: uppercase; -} - -.ui.dropdown .menu > .header:not(.ui) { - color: rgba(0, 0, 0, 0.85); - font-size: 0.78571429em; -} - -.ui.dropdown .menu > .divider { - border-top: 1px solid rgba(34, 36, 38, 0.1); - height: 0; - margin: 0.5em 0; -} - -.ui.dropdown .menu > .horizontal.divider { - border-top: none; -} - -.ui.ui.ui.dropdown .menu > .input { - width: auto; - display: flex; - margin: 1.14285714rem 0.78571429rem; - min-width: 10rem; -} - -.ui.dropdown .menu > .header + .input { - margin-top: 0; -} - -.ui.dropdown .menu > .input:not(.transparent) input { - padding: 0.5em 1em; -} - -.ui.dropdown .menu > .input:not(.transparent) .button, -.ui.dropdown .menu > .input:not(.transparent) i.icon, -.ui.dropdown .menu > .input:not(.transparent) .label { - padding-top: 0.5em; - padding-bottom: 0.5em; -} - -/* ----------------- - Item Description -------------------- */ - -.ui.dropdown > .text > .description, -.ui.dropdown .menu > .item > .description { - float: right; - margin: 0 0 0 1em; - color: rgba(0, 0, 0, 0.4); -} - -.ui.dropdown .menu > .item.vertical > .description { - margin: 0; -} - -/* ----------------- - Item Text -------------------- */ - -.ui.dropdown .menu > .item.vertical > .text { - margin-bottom: 0.25em; -} - -/* ----------------- - Message -------------------- */ - -.ui.dropdown .menu > .message { - padding: 0.78571429rem 1.14285714rem; - font-weight: normal; -} - -.ui.dropdown .menu > .message:not(.ui) { - color: rgba(0, 0, 0, 0.4); -} - -/* -------------- - Sub Menu ---------------- */ - -.ui.dropdown .menu .menu { - top: 0; - left: 100%; - right: auto; - margin: 0 -0.5em !important; - border-radius: 0.28571429rem !important; - z-index: 21 !important; -} - -/* Hide Arrow */ - -.ui.dropdown .menu .menu::after { - display: none; -} - -/* -------------- - Sub Elements ---------------- */ - -/* Icons / Flags / Labels / Image */ - -.ui.dropdown > .text > i.icons, -.ui.dropdown > .text > i.icon, -.ui.dropdown > .text > .label, -.ui.dropdown > .text > .flag, -.ui.dropdown > .text > img, -.ui.dropdown > .text > .image { - margin-top: 0em; -} - -.ui.dropdown .menu > .item > i.icons, -.ui.dropdown .menu > .item > i.icon, -.ui.dropdown .menu > .item > .label, -.ui.dropdown .menu > .item > .flag, -.ui.dropdown .menu > .item > .image, -.ui.dropdown .menu > .item > img { - margin-top: 0em; -} - -.ui.dropdown > .text > i.icons, -.ui.dropdown > .text > i.icon, -.ui.dropdown > .text > .label, -.ui.dropdown > .text > .flag, -.ui.dropdown > .text > img, -.ui.dropdown > .text > .image, -.ui.dropdown .menu > .item > i.icons, -.ui.dropdown .menu > .item > i.icon, -.ui.dropdown .menu > .item > .label, -.ui.dropdown .menu > .item > .flag, -.ui.dropdown .menu > .item > .image, -.ui.dropdown .menu > .item > img { - margin-left: 0; - float: none; - margin-right: 0.78571429rem; -} - -/* -------------- - Image ---------------- */ - -.ui.dropdown > .text > img, -.ui.dropdown > .text > .image:not(.icon), -.ui.dropdown .menu > .item > .image:not(.icon), -.ui.dropdown .menu > .item > img { - display: inline-block; - vertical-align: top; - width: auto; - margin-top: -0.5em; - margin-bottom: -0.5em; - max-height: 2em; -} - -/******************************* - Coupling -*******************************/ - -/* -------------- - Menu ---------------- */ - -/* Remove Menu Item Divider */ - -.ui.dropdown .ui.menu > .item::before, -.ui.menu .ui.dropdown .menu > .item::before { - display: none; -} - -/* Prevent Menu Item Border */ - -.ui.menu .ui.dropdown .menu .active.item { - border-left: none; -} - -/* Automatically float dropdown menu right on last menu item */ - -.ui.menu .right.menu .dropdown:last-child > .menu:not(.left), -.ui.menu .right.dropdown.item > .menu:not(.left), -.ui.buttons > .ui.dropdown:last-child > .menu:not(.left) { - left: auto; - right: 0; -} - -/* -------------- - Label - --------------- */ - -/* Dropdown Menu */ - -.ui.label.dropdown .menu { - min-width: 100%; -} - -/* -------------- - Button - --------------- */ - -/* No Margin On Icon Button */ - -.ui.dropdown.icon.button > .dropdown.icon { - margin: 0; -} - -.ui.dropdown.button .menu { - min-width: 100%; -} - -.ui.dropdown.button:not(.pointing):not(.floating).active { - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui.dropdown.button:not(.pointing):not(.floating) > .menu { - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -/******************************* - Types -*******************************/ - -select.ui.dropdown { - height: 38px; - padding: 0.5em; - border: 1px solid rgba(34, 36, 38, 0.15); - visibility: visible; -} - -/* -------------- - Selection - --------------- */ - -/* Displays like a select box */ - -.ui.selection.dropdown { - cursor: pointer; - word-wrap: break-word; - line-height: 1em; - white-space: normal; - outline: 0; - transform: rotateZ(0); - min-width: 14em; - min-height: 2.71428571em; - background: #fff; - display: inline-block; - padding: 0.78571429em 3.2em 0.78571429em 1em; - color: rgba(0, 0, 0, 0.87); - box-shadow: none; - border: 1px solid rgba(34, 36, 38, 0.15); - border-radius: 0.28571429rem; - transition: box-shadow 0.1s ease, width 0.1s ease; -} - -.ui.selection.dropdown.visible, -.ui.selection.dropdown.active { - z-index: 10; -} - -.ui.selection.dropdown > .search.icon, -.ui.selection.dropdown > .delete.icon, -.ui.selection.dropdown > .dropdown.icon { - cursor: pointer; - position: absolute; - width: auto; - height: auto; - line-height: 1.21428571em; - top: 0.78571429em; - right: 1em; - z-index: 3; - margin: -0.78571429em; - padding: 0.91666667em; - opacity: 0.8; - transition: opacity 0.1s ease; -} - -/* Compact */ - -.ui.compact.selection.dropdown { - min-width: 0; -} - -.ui.compact.selection.dropdown > .menu { - width: auto; -} - -.ui.compact.selection.dropdown > .menu:not(.multiline) { - width: max-content; -} - -/* Selection Menu */ - -.ui.selection.dropdown:not(.unlimited) .menu { - overflow-x: hidden; - overflow-y: auto; - -ms-scroll-chaining: none; - overscroll-behavior: none; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; -} - -.ui.selection.dropdown .menu { - outline: none; - margin: 0 -1px; - min-width: calc(100% + 2px); - width: calc(100% + 2px); - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); - transition: opacity 0.1s ease; -} - -.ui.selection.dropdown:not(.pointing):not(.floating) .menu { - border-top-width: 0; - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -.ui.selection.dropdown .menu::after, -.ui.selection.dropdown .menu::before { - display: none; -} - -/* -------------- - Message - --------------- */ - -.ui.selection.dropdown .menu > .message { - padding: 0.78571429rem 1.14285714rem; -} - -@media only screen and (max-width: 767.98px) { - .ui.selection.dropdown.short .menu { - max-height: 6.01071429rem; - } - - .ui.selection.dropdown[class*="very short"] .menu { - max-height: 4.00714286rem; - } - - .ui.selection.dropdown:not(.unlimited) .menu { - max-height: 8.01428571rem; - } - - .ui.selection.dropdown.long .menu { - max-height: 16.02857143rem; - } - - .ui.selection.dropdown[class*="very long"] .menu { - max-height: 24.04285714rem; - } -} - -@media only screen and (min-width: 768px) { - .ui.selection.dropdown.short .menu { - max-height: 8.01428571rem; - } - - .ui.selection.dropdown[class*="very short"] .menu { - max-height: 5.34285714rem; - } - - .ui.selection.dropdown:not(.unlimited) .menu { - max-height: 10.68571429rem; - } - - .ui.selection.dropdown.long .menu { - max-height: 21.37142857rem; - } - - .ui.selection.dropdown[class*="very long"] .menu { - max-height: 32.05714286rem; - } -} - -@media only screen and (min-width: 992px) { - .ui.selection.dropdown.short .menu { - max-height: 12.02142857rem; - } - - .ui.selection.dropdown[class*="very short"] .menu { - max-height: 8.01428571rem; - } - - .ui.selection.dropdown:not(.unlimited) .menu { - max-height: 16.02857143rem; - } - - .ui.selection.dropdown.long .menu { - max-height: 32.05714286rem; - } - - .ui.selection.dropdown[class*="very long"] .menu { - max-height: 48.08571429rem; - } -} - -@media only screen and (min-width: 1920px) { - .ui.selection.dropdown.short .menu { - max-height: 16.02857143rem; - } - - .ui.selection.dropdown[class*="very short"] .menu { - max-height: 10.68571429rem; - } - - .ui.selection.dropdown:not(.unlimited) .menu { - max-height: 21.37142857rem; - } - - .ui.selection.dropdown.long .menu { - max-height: 42.74285714rem; - } - - .ui.selection.dropdown[class*="very long"] .menu { - max-height: 64.11428571rem; - } -} - -/* Menu Item */ - -.ui.selection.dropdown .menu > .item { - border-top: 1px solid #fafafa; - padding: 0.78571429rem 1.14285714rem; - white-space: normal; - word-wrap: normal; -} - -.ui.selection.pointing.dropdown .menu > .item:first-child, -.ui.selection.floating.dropdown .menu > .item:first-child { - border-top: none; -} - -/* User Item */ - -.ui.selection.dropdown .menu > .hidden.addition.item { - display: none; -} - -/* User addition item */ - -.ui.dropdown > .menu > .stuck.addition.item:first-child { - position: sticky; - top: 0; - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); - background: #fff; - z-index: 14; -} - -/* Hover */ - -.ui.selection.dropdown:hover { - border-color: rgba(34, 36, 38, 0.35); - box-shadow: none; -} - -/* Active */ - -.ui.selection.simple.dropdown:hover, -.ui.selection.active.dropdown { - border-color: #96c8da; - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); -} - -.ui.selection.simple.dropdown:hover .menu, -.ui.selection.active.dropdown .menu { - border-color: #96c8da; - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); -} - -/* Focus */ - -.ui.selection.dropdown:focus { - border-color: #96c8da; - box-shadow: none; -} - -.ui.selection.dropdown:focus .menu { - border-color: #96c8da; - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); -} - -/* Visible */ - -.ui.selection.visible.dropdown > .text:not(.default) { - font-weight: normal; - color: rgba(0, 0, 0, 0.8); -} - -/* Visible Hover */ - -.ui.selection.active.dropdown:hover { - border-color: #96c8da; - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); -} - -.ui.selection.active.dropdown:hover .menu { - border-color: #96c8da; - box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); -} - -/* Dropdown Icon */ - -.ui.active.selection.dropdown > .dropdown.icon, -.ui.visible.selection.dropdown > .dropdown.icon { - opacity: ""; - z-index: 3; -} - -/* Connecting Border */ - -.ui.active.selection.dropdown:not(.pointing):not(.floating) { - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} - -/* Empty Connecting Border */ - -.ui.active.empty.selection.dropdown { - border-radius: 0.28571429rem !important; - box-shadow: none !important; -} - -.ui.active.empty.selection.dropdown .menu { - border: none !important; - box-shadow: none !important; -} - -/* CSS specific to iOS devices or firefox mobile only */ - -@supports (-webkit-touch-callout: none) or (-moz-appearance: none) { -@media (-moz-touch-enabled), (pointer: coarse) { - .ui.dropdown .scrollhint.menu:not(.hidden)::before { - animation: scrollhint 2s ease 2; - content: ""; - z-index: 15; - display: block; - position: absolute; - opacity: 0; - right: 0.25em; - top: 0; - height: 100%; - border-right: 0.25em solid; - border-left: 0; - border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%; - } - - .ui.inverted.dropdown .scrollhint.menu:not(.hidden)::before { - border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%; - } - -@keyframes scrollhint { - 0% { - opacity: 1; - top: 100%; - } - - 100% { - opacity: 0; - top: 0; - } -} -} -} - -/* -------------- - Searchable - --------------- */ - -/* Search Selection */ - -.ui.search.dropdown { - min-width: ""; -} - -/* Search Dropdown */ - -.ui.search.dropdown > input.search { - background: none transparent !important; - border: none !important; - box-shadow: none !important; - cursor: text; - top: 0; - left: 1px; - width: 100%; - outline: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - padding: inherit; -} - -/* Text Layering */ - -.ui.search.dropdown > input.search { - position: absolute; - z-index: 2; -} - -.ui.search.dropdown > .text { - cursor: text; - position: relative; - left: 1px; - z-index: auto; -} - -/* Search Selection */ - -.ui.search.selection.dropdown > input.search { - line-height: 1.21428571em; - padding: 0.67857143em 3.2em 0.67857143em 1em; -} - -/* Used to size multi select input to character width */ - -.ui.search.selection.dropdown > span.sizer { - line-height: 1.21428571em; - padding: 0.67857143em 3.2em 0.67857143em 1em; - display: none; - white-space: pre; -} - -/* Active/Visible Search */ - -.ui.search.dropdown.active > input.search, -.ui.search.dropdown.visible > input.search { - cursor: auto; -} - -.ui.search.dropdown.active > .text, -.ui.search.dropdown.visible > .text { - pointer-events: none; -} - -/* Filtered Text */ - -.ui.active.search.dropdown input.search:focus + .text i.icon, -.ui.active.search.dropdown input.search:focus + .text .flag { - opacity: 0.45; -} - -.ui.active.search.dropdown input.search:focus + .text { - color: rgba(115, 115, 115, 0.87) !important; -} - -.ui.search.dropdown.button > span.sizer { - display: none; -} - -/* Search Menu */ - -.ui.search.dropdown:not(.unlimited) .menu { - overflow-x: hidden; - overflow-y: auto; - -ms-scroll-chaining: none; - overscroll-behavior: none; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; -} - -@media only screen and (max-width: 767.98px) { - .ui.search.dropdown:not(.unlimited) .menu { - max-height: 8.01428571rem; - } -} - -@media only screen and (min-width: 768px) { - .ui.search.dropdown:not(.unlimited) .menu { - max-height: 10.68571429rem; - } -} - -@media only screen and (min-width: 992px) { - .ui.search.dropdown:not(.unlimited) .menu { - max-height: 16.02857143rem; - } -} - -@media only screen and (min-width: 1920px) { - .ui.search.dropdown:not(.unlimited) .menu { - max-height: 21.37142857rem; - } -} - -/* Clearable Selection */ - -.ui.dropdown > .remove.icon { - cursor: pointer; - font-size: 0.85714286em; - margin: -0.78571429em; - padding: 0.91666667em; - right: 2em; - top: 0.78571429em; - position: absolute; - opacity: 0.6; - z-index: 3; -} - -.ui.selection.dropdown > .remove.icon { - right: 3em; -} - -.ui.inline.dropdown > .remove.icon { - right: 2.2em; -} - -.ui.clearable.dropdown .text, -.ui.clearable.dropdown a:last-of-type { - margin-right: 1.5em; -} - -.ui.dropdown select.noselection ~ .remove.icon, -.ui.dropdown input[value=""] ~ .remove.icon, -.ui.dropdown input:not([value]) ~ .remove.icon, -.ui.dropdown.loading > .remove.icon { - display: none; -} - -.ui.dropdown:not(.selection) > .remove.icon ~ .dropdown.icon { - margin-left: 1.5em; -} - -.ui.dropdown:not(.selection):not(.multiple) > .remove.icon { - margin-top: -1.35em; -} - -/* -------------- - Multiple - --------------- */ - -/* Multiple Selection */ - -.ui.ui.multiple.dropdown { - padding: 0.22619048em 3.2em 0.22619048em 0.35714286em; -} - -.ui.multiple.dropdown .menu { - cursor: auto; -} - -/* Selection Label */ - -.ui.multiple.dropdown > .label { - display: inline-block; - white-space: normal; - font-size: 1em; - padding: 0.35714286em 0.78571429em; - margin: 0.14285714rem 0.28571429rem 0.14285714rem 0; - box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset; -} - -/* Dropdown Icon */ - -.ui.multiple.dropdown .dropdown.icon { - margin: ""; - padding: ""; -} - -/* Text */ - -.ui.multiple.dropdown > .text { - position: static; - padding: 0; - max-width: 100%; - margin: 0.45238095em 0 0.45238095em 0.64285714em; - line-height: 1.21428571em; -} - -.ui.multiple.dropdown > .text.default { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.ui.multiple.dropdown > .label ~ input.search { - margin-left: 0.14285714em !important; -} - -.ui.multiple.dropdown > .label ~ .text { - display: none; -} - -.ui.multiple.dropdown > .label:not(.image) > img:not(.centered) { - margin-right: 0.78571429rem; -} - -.ui.multiple.dropdown > .label:not(.image) > img.ui:not(.avatar) { - margin-bottom: 0.39285714rem; -} - -.ui.multiple.dropdown > .image.label img { - margin: -0.35714286em 0.78571429em -0.35714286em -0.78571429em; - height: 1.71428571em; -} - -.ui.multiple.dropdown:not(.selection):not(.labeled) > .dropdown.icon { - right: -1.5em; -} - -.ui.multiple.dropdown:not(.selection):not(.labeled) > .remove.icon { - margin-right: -1.5em; -} - -.ui.multiple.dropdown:not(.selection):not(.labeled):not(.search) > .remove.icon ~ .text.default, -.ui.multiple.dropdown:not(.selection):not(.labeled) > .text.default:first-child { - overflow: inherit; -} - -/* ----------------- - Multiple Search - ----------------- */ - -/* Multiple Search Selection */ - -.ui.multiple.search.dropdown, -.ui.multiple.search.dropdown > input.search { - cursor: text; -} - -/* Prompt Text */ - -.ui.multiple.search.dropdown > .text { - display: inline-block; - position: absolute; - top: 0; - left: 0; - padding: inherit; - margin: 0.45238095em 0 0.45238095em 0.64285714em; - line-height: 1.21428571em; -} - -.ui.multiple.search.dropdown > .label ~ .text { - display: none; -} - -/* Search */ - -.ui.multiple.search.dropdown > input.search { - position: static; - padding: 0; - max-width: 100%; - margin: 0.45238095em 0 0.45238095em 0.64285714em; - width: 2.2em; - line-height: 1.21428571em; -} - -.ui.multiple.search.dropdown.button { - min-width: 14em; -} - -.ui.multiple.search.dropdown > span.sizer { - display: none; -} - -.ui.multiple.search.dropdown:not(.selection) > .remove.icon + input.search, -.ui.multiple.search.dropdown:not(.selection) > input.search:first-child { - min-width: 5.05em; -} - -/* -------------- - Inline - --------------- */ - -.ui.inline.dropdown { - cursor: pointer; - display: inline-block; - color: inherit; -} - -.ui.inline.dropdown .dropdown.icon { - margin: 0 0.21428571em; - vertical-align: baseline; -} - -.ui.inline.dropdown > .text { - font-weight: bold; -} - -.ui.inline.dropdown .menu { - cursor: auto; - margin-top: 0.21428571em; - border-radius: 0.28571429rem; -} - -/******************************* - States -*******************************/ - -/* -------------------- - Active ----------------------- */ - -/* Menu Item Active */ - -.ui.dropdown .menu .active.item { - background: transparent; - font-weight: bold; - color: rgba(0, 0, 0, 0.95); - box-shadow: none; - z-index: 12; -} - -/* -------------------- - Hover ----------------------- */ - -/* Menu Item Hover */ - -.ui.dropdown .menu > .item:hover { - background: #f2f2f2; - color: rgba(0, 0, 0, 0.95); - z-index: 13; -} - -/* -------------------- - Default Text ----------------------- */ - -.ui.dropdown:not(.button) > .default.text, -.ui.default.dropdown:not(.button) > .text { - color: rgba(191, 191, 191, 0.87); -} - -.ui.dropdown:not(.button) > input:focus ~ .default.text, -.ui.default.dropdown:not(.button) > input:focus ~ .text { - color: rgba(115, 115, 115, 0.87); -} - -/* -------------------- - Loading - --------------------- */ - -.ui.loading.dropdown > i.icon { - height: 1em !important; -} - -.ui.loading.selection.dropdown > i.icon { - padding: 1.5em 1.28571429em !important; -} - -.ui.loading.dropdown > i.icon::before { - position: absolute; - content: ""; - top: 50%; - left: 50%; - margin: -0.64285714em 0 0 -0.64285714em; - width: 1.28571429em; - height: 1.28571429em; - border-radius: 500rem; - border: 0.2em solid rgba(0, 0, 0, 0.1); -} - -.ui.loading.dropdown > i.icon::after { - position: absolute; - content: ""; - top: 50%; - left: 50%; - box-shadow: 0 0 0 1px transparent; - margin: -0.64285714em 0 0 -0.64285714em; - width: 1.28571429em; - height: 1.28571429em; - animation: loader 0.6s infinite linear; - border: 0.2em solid #767676; - border-radius: 500rem; -} - -/* Coupling */ - -.ui.loading.dropdown.button > i.icon::before, -.ui.loading.dropdown.button > i.icon::after { - display: none; -} - -.ui.loading.dropdown > .text { - transition: none; -} - -/* Used To Check Position */ - -.ui.dropdown .loading.menu { - display: block; - visibility: hidden; - z-index: -1; -} - -.ui.dropdown > .loading.menu { - left: 0 !important; - right: auto !important; -} - -.ui.dropdown > .menu .loading.menu { - left: 100% !important; - right: auto !important; -} - -/* -------------------- - Keyboard Select ----------------------- */ - -/* Selected Item */ - -.ui.dropdown.selected, -.ui.dropdown .menu .selected.item { - background: #f7f7f7; - color: rgba(0, 0, 0, 0.95); -} - -/* -------------------- - Search Filtered ----------------------- */ - -/* Filtered Item */ - -.ui.dropdown > .filtered.text { - visibility: hidden; -} - -.ui.dropdown .filtered.item { - display: none !important; -} - -/* -------------------- - States - ---------------------- */ - -.ui.dropdown.error, -.ui.dropdown.error > .text, -.ui.dropdown.error > .default.text { - color: #9f3a38; -} - -.ui.selection.dropdown.error { - background: #fff6f6; - border-color: #e0b4b4; -} - -.ui.selection.dropdown.error:hover { - border-color: #e0b4b4; -} - -.ui.multiple.selection.error.dropdown > .label { - border-color: #e0b4b4; -} - -.ui.dropdown.error > .menu, -.ui.dropdown.error > .menu .menu { - border-color: #e0b4b4; -} - -.ui.dropdown.error > .menu > .item { - color: #9f3a38; -} - -/* Item Hover */ - -.ui.dropdown.error > .menu > .item:hover { - background-color: #fbe7e7; -} - -/* Item Active */ - -.ui.dropdown.error > .menu .active.item { - background-color: #fdcfcf; -} - -.ui.dropdown.info, -.ui.dropdown.info > .text, -.ui.dropdown.info > .default.text { - color: #276f86; -} - -.ui.selection.dropdown.info { - background: #f8ffff; - border-color: #a9d5de; -} - -.ui.selection.dropdown.info:hover { - border-color: #a9d5de; -} - -.ui.multiple.selection.info.dropdown > .label { - border-color: #a9d5de; -} - -.ui.dropdown.info > .menu, -.ui.dropdown.info > .menu .menu { - border-color: #a9d5de; -} - -.ui.dropdown.info > .menu > .item { - color: #276f86; -} - -/* Item Hover */ - -.ui.dropdown.info > .menu > .item:hover { - background-color: #e9f2fb; -} - -/* Item Active */ - -.ui.dropdown.info > .menu .active.item { - background-color: #cef1fd; -} - -.ui.dropdown.success, -.ui.dropdown.success > .text, -.ui.dropdown.success > .default.text { - color: #2c662d; -} - -.ui.selection.dropdown.success { - background: #fcfff5; - border-color: #a3c293; -} - -.ui.selection.dropdown.success:hover { - border-color: #a3c293; -} - -.ui.multiple.selection.success.dropdown > .label { - border-color: #a3c293; -} - -.ui.dropdown.success > .menu, -.ui.dropdown.success > .menu .menu { - border-color: #a3c293; -} - -.ui.dropdown.success > .menu > .item { - color: #2c662d; -} - -/* Item Hover */ - -.ui.dropdown.success > .menu > .item:hover { - background-color: #e9fbe9; -} - -/* Item Active */ - -.ui.dropdown.success > .menu .active.item { - background-color: #dafdce; -} - -.ui.dropdown.warning, -.ui.dropdown.warning > .text, -.ui.dropdown.warning > .default.text { - color: #573a08; -} - -.ui.selection.dropdown.warning { - background: #fffaf3; - border-color: #c9ba9b; -} - -.ui.selection.dropdown.warning:hover { - border-color: #c9ba9b; -} - -.ui.multiple.selection.warning.dropdown > .label { - border-color: #c9ba9b; -} - -.ui.dropdown.warning > .menu, -.ui.dropdown.warning > .menu .menu { - border-color: #c9ba9b; -} - -.ui.dropdown.warning > .menu > .item { - color: #573a08; -} - -/* Item Hover */ - -.ui.dropdown.warning > .menu > .item:hover { - background-color: #fbfbe9; -} - -/* Item Active */ - -.ui.dropdown.warning > .menu .active.item { - background-color: #fdfdce; -} - -/* -------------------- - Clear - ---------------------- */ - -.ui.dropdown > .remove.icon, -.ui.dropdown > .clear.dropdown.icon { - opacity: 0.6; - transition: opacity 0.1s ease; -} - -.ui.dropdown > .remove.icon:hover, -.ui.dropdown > .clear.dropdown.icon:hover { - opacity: 1; -} - -/* -------------------- - Disabled - ---------------------- */ - -/* Disabled */ - -.ui.disabled.dropdown, -.ui.dropdown .menu > .disabled.item { - cursor: default; - pointer-events: none; - opacity: 0.45; -} - -/* -------------------- - Read-Only - ---------------------- */ - -.ui.read-only.dropdown { - cursor: default; - pointer-events: none; -} - -.ui.disabled.dropdown > .remove.icon, -.ui.read-only.dropdown > .remove.icon, -.ui.disabled.dropdown > .label > .delete.icon, -.ui.read-only.dropdown > .label > .delete.icon { - display: none; -} - -/******************************* - Variations -*******************************/ - -/* -------------- - Direction ---------------- */ - -/* Flyout Direction */ - -.ui.dropdown .menu { - left: 0; -} - -/* Default Side (Right) */ - -.ui.dropdown .right.menu > .menu, -.ui.dropdown .menu .right.menu { - left: 100% !important; - right: auto !important; - border-radius: 0.28571429rem !important; -} - -/* Leftward Opening Menu */ - -.ui.dropdown > .left.menu { - left: auto !important; - right: 0 !important; -} - -.ui.dropdown > .left.menu .menu, -.ui.dropdown .menu .left.menu { - left: auto; - right: 100%; - margin: 0 -0.5em 0 0 !important; - border-radius: 0.28571429rem !important; -} - -.ui.dropdown .item .left.dropdown.icon, -.ui.dropdown .left.menu .item .dropdown.icon { - width: auto; - float: left; - margin: 0em 0 0 0; -} - -.ui.dropdown .item .left.dropdown.icon, -.ui.dropdown .left.menu .item .dropdown.icon { - width: auto; - float: left; - margin: 0em 0 0 0; -} - -.ui.dropdown .item .left.dropdown.icon + .text, -.ui.dropdown .left.menu .item .dropdown.icon + .text { - margin-left: 1em; - margin-right: 0; -} - -/* -------------- - Upward - --------------- */ - -/* Upward Main Menu */ - -.ui.upward.dropdown > .menu { - top: auto; - bottom: 100%; - box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08); -} - -/* Upward Sub Menu */ - -.ui.dropdown .upward.menu { - top: auto !important; - bottom: 0 !important; -} - -/* Active Upward */ - -.ui.simple.upward.active.dropdown, -.ui.simple.upward.dropdown:hover { - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -/* Button */ - -.ui.upward.dropdown.button:not(.pointing):not(.floating).active { - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -.ui.upward.dropdown.button:not(.pointing):not(.floating) > .menu { - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -/* Selection */ - -.ui.ui.upward.selection.dropdown:not(.pointing):not(.floating) .menu { - border-top-width: 1px; - border-bottom-width: 0; - box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08); - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui.upward.selection.dropdown:hover { - box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05); -} - -/* Active Upward */ - -.ui.active.upward.selection.dropdown:not(.pointing):not(.floating) { - border-radius: 0 0 0.28571429rem 0.28571429rem !important; -} - -/* Visible Upward */ - -.ui.upward.selection.dropdown.visible { - box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08); -} - -.ui.upward.selection.dropdown.visible:not(.pointing):not(.floating) { - border-radius: 0 0 0.28571429rem 0.28571429rem !important; -} - -/* Visible Hover Upward */ - -.ui.upward.active.selection.dropdown:hover { - box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.05); -} - -.ui.upward.active.selection.dropdown:hover:not(.pointing):not(.floating) .menu { - box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08); -} - -/* -------------- - Scrolling - --------------- */ - -/* Selection Menu */ - -.ui.scrolling.dropdown .menu, -.ui.dropdown .scrolling.menu { - overflow-x: hidden; - overflow-y: auto; - -ms-scroll-chaining: none; - overscroll-behavior: none; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - min-width: 100% !important; - width: auto !important; -} - -.ui.dropdown .scrolling.menu { - position: static; - border: none; - box-shadow: none !important; - border-radius: 0 0 0.28571429rem 0.28571429rem !important; - margin: 0 !important; - border-top: 1px solid rgba(34, 36, 38, 0.15); -} - -.ui.ui.ui.scrolling.dropdown .menu .item, -.ui.ui.ui.dropdown .scrolling.menu > .item { - border-top: none; -} - -.ui.scrolling.dropdown .menu .item:first-child, -.ui.dropdown .scrolling.menu .item:first-child { - border-top: none; -} - -.ui.dropdown > .animating.menu .scrolling.menu, -.ui.dropdown > .visible.menu .scrolling.menu { - display: block; -} - -/* Scrollbar in IE */ - -@media all and (-ms-high-contrast: none) { - .ui.scrolling.dropdown .menu, - .ui.dropdown .scrolling.menu { - min-width: calc(100% - 17px); - } -} - -@media only screen and (max-width: 767.98px) { - .ui.scrolling.dropdown .menu, - .ui.dropdown .scrolling.menu { - max-height: 10.28571429rem; - } - - .ui.scrolling.resizable.dropdown .menu, - .ui.dropdown .scrolling.resizable.menu { - height: 10.28571429rem; - } -} - -@media only screen and (min-width: 768px) { - .ui.scrolling.dropdown .menu, - .ui.dropdown .scrolling.menu { - max-height: 15.42857143rem; - } - - .ui.scrolling.resizable.dropdown .menu, - .ui.dropdown .scrolling.resizable.menu { - height: 15.42857143rem; - } -} - -@media only screen and (min-width: 992px) { - .ui.scrolling.dropdown .menu, - .ui.dropdown .scrolling.menu { - max-height: 20.57142857rem; - } - - .ui.scrolling.resizable.dropdown .menu, - .ui.dropdown .scrolling.resizable.menu { - height: 20.57142857rem; - } -} - -@media only screen and (min-width: 1920px) { - .ui.scrolling.dropdown .menu, - .ui.dropdown .scrolling.menu { - max-height: 20.57142857rem; - } - - .ui.scrolling.resizable.dropdown .menu, - .ui.dropdown .scrolling.resizable.menu { - height: 20.57142857rem; - } -} - -.ui.scrolling.resizable.dropdown .menu, -.ui.dropdown .scrolling.resizable.menu { - resize: vertical; - max-height: none; -} - -/* -------------------- - Labeled - --------------------- */ - -/* Regular Label on Left */ - -.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + .dropdown { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left-color: transparent; -} - -/* Regular Label on Right */ - -.ui[class*="right labeled"].input > .dropdown:not(:last-child) { - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - border-right-color: transparent !important; -} - -.ui[class*="right labeled"].input > .dropdown + .label { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -/* -------------- - Columnar - --------------- */ - -.ui.column.dropdown > .menu { - flex-wrap: wrap; -} - -.ui.dropdown[class*="two column"] > .menu > .item { - width: 50%; -} - -.ui.dropdown[class*="three column"] > .menu > .item { - width: 33%; -} - -.ui.dropdown[class*="four column"] > .menu > .item { - width: 25%; -} - -.ui.dropdown[class*="five column"] > .menu > .item { - width: 20%; -} - -/* -------------- - Simple - --------------- */ - -/* Displays without javascript */ - -.ui.simple.dropdown .menu::before, -.ui.simple.dropdown .menu::after { - display: none; -} - -.ui.simple.dropdown .menu { - position: absolute; - /* IE hack to make dropdown icons appear inline */ - display: -ms-inline-flexbox !important; - display: block; - overflow: hidden; - top: -9999px; - opacity: 0; - width: 0; - height: 0; - transition: opacity 0.1s ease; - margin-top: 0 !important; -} - -.ui.simple.dropdown .upward.menu { - margin-bottom: 1.5em; -} - -.ui.simple.selection.dropdown .upward.menu { - margin-bottom: 2.5em; -} - -.ui.menu:not(.vertical) .ui.simple.dropdown.item .upward.menu { - margin-bottom: 2.8em; -} - -.ui.simple.active.dropdown, -.ui.simple.dropdown:hover { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -.ui.simple.active.dropdown > .menu, -.ui.simple.dropdown:hover > .menu { - overflow: visible; - width: auto; - height: auto; - top: 100%; - opacity: 1; -} - -.ui.simple.dropdown > .menu > .item:active > .menu, -.ui.simple.dropdown .menu .item:hover > .menu { - overflow: visible; - width: auto; - height: auto; - top: 0 !important; - left: 100%; - opacity: 1; -} - -.ui.simple.selection.active.dropdown > .menu, -.ui.simple.selection.dropdown:hover > .menu, -.ui.simple.selection.dropdown > .menu > .item:active > .menu, -.ui.simple.selection.dropdown .menu .item:hover > .menu { - overflow: auto; - -ms-scroll-chaining: none; - overscroll-behavior: none; -} - -.ui.simple.dropdown > .menu > .item:active > .left.menu, -.ui.simple.dropdown .menu .item:hover > .left.menu, -.right.menu .ui.simple.dropdown > .menu > .item:active > .menu:not(.right), -.right.menu .ui.simple.dropdown > .menu .item:hover > .menu:not(.right) { - left: auto; - right: 100%; -} - -.ui.simple.disabled.dropdown:hover .menu { - display: none; - height: 0; - width: 0; - overflow: hidden; -} - -/* Visible */ - -.ui.simple.visible.dropdown > .menu { - display: block; -} - -/* Scrolling */ - -.ui.simple.scrolling.active.dropdown > .menu, -.ui.simple.scrolling.dropdown:hover > .menu { - overflow-x: hidden; - overflow-y: auto; - -ms-scroll-chaining: none; - overscroll-behavior: none; -} - -/* -------------- - Fluid - --------------- */ - -.ui.fluid.dropdown { - display: block; - width: 100% !important; - min-width: 0; -} - -.ui.fluid.dropdown > .dropdown.icon { - float: right; -} - -/* -------------- - Floating - --------------- */ - -.ui.floating.dropdown > .menu { - left: 0; - right: auto; - box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important; - border-radius: 0.28571429rem !important; -} - -.ui:not(.upward).floating.dropdown > .menu { - margin-top: 0.5em; -} - -.ui.upward.floating.dropdown:not(.simple) > .menu { - margin-bottom: 0.5em; -} - -/* -------------- - Pointing - --------------- */ - -.ui.pointing.dropdown > .menu { - top: 100%; - margin-top: 0.78571429rem; - border-radius: 0.28571429rem; -} - -.ui.pointing.dropdown > .menu:not(.hidden)::after { - display: block; - position: absolute; - pointer-events: none; - content: ""; - visibility: visible; - transform: rotate(45deg); - width: 0.5em; - height: 0.5em; - box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15); - background: #fff; - z-index: 2; -} - -@supports selector(:has(.f)) { - .ui.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after, - .ui.upward.pointing.dropdown .menu:has(:last-child:hover)::after { - background: #f2f2f2; - } - - .ui.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after, - .ui.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after { - background: #f7f7f7; - } -} - -.ui.selection.pointing.dropdown > .menu::after { - box-shadow: -1px -1px 0 0 #96c8da; -} - -.ui.pointing.dropdown > .menu:not(.hidden)::after { - top: -0.25em; - left: 50%; - margin: 0 0 0 -0.25em; -} - -/* Top Left Pointing */ - -.ui.top.left.pointing.dropdown > .menu { - top: 100%; - bottom: auto; - left: 0; - right: auto; - margin: 1em 0 0; -} - -.ui.top.left.pointing.dropdown > .menu { - top: 100%; - bottom: auto; - left: 0; - right: auto; - margin: 1em 0 0; -} - -.ui.top.left.pointing.dropdown > .menu::after { - top: -0.25em; - left: 1em; - right: auto; - margin: 0; - transform: rotate(45deg); -} - -/* Top Right Pointing */ - -.ui.top.right.pointing.dropdown > .menu { - top: 100%; - bottom: auto; - right: 0; - left: auto; - margin: 1em 0 0; -} - -.ui.top.pointing.dropdown > .left.menu::after, -.ui.top.right.pointing.dropdown > .menu::after { - top: -0.25em; - left: auto !important; - right: 1em !important; - margin: 0; - transform: rotate(45deg); -} - -/* Left Pointing */ - -.ui.left.pointing.dropdown > .menu { - top: 0; - left: 100%; - right: auto; - margin: 0 0 0 1em; -} - -.ui.left.pointing.dropdown > .menu::after { - top: 1em; - left: -0.25em; - margin: 0; - transform: rotate(-45deg); -} - -.ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu { - left: auto !important; - right: 100% !important; - margin: 0 1em 0 0; -} - -.ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu::after { - top: 1em; - left: auto; - right: -0.25em; - margin: 0; - transform: rotate(135deg); -} - -/* Right Pointing */ - -.ui.right.pointing.dropdown > .menu { - top: 0; - left: auto; - right: 100%; - margin: 0 1em 0 0; -} - -.ui.right.pointing.dropdown > .menu::after { - top: 1em; - left: auto; - right: -0.25em; - margin: 0; - transform: rotate(135deg); -} - -/* Bottom Pointing */ - -.ui.bottom.pointing.dropdown > .menu { - top: auto; - bottom: 100%; - left: 0; - right: auto; - margin: 0 0 1em; -} - -.ui.bottom.pointing.dropdown > .menu::after { - top: auto; - bottom: -0.25em; - right: auto; - margin: 0; - transform: rotate(-135deg); -} - -/* Reverse Sub-Menu Direction */ - -.ui.bottom.pointing.dropdown > .menu .menu { - top: auto !important; - bottom: 0 !important; -} - -/* Bottom Left */ - -.ui.bottom.left.pointing.dropdown > .menu { - left: 0; - right: auto; -} - -.ui.bottom.left.pointing.dropdown > .menu::after { - left: 1em; - right: auto; -} - -/* Bottom Right */ - -.ui.bottom.right.pointing.dropdown > .menu { - right: 0; - left: auto; -} - -.ui.bottom.right.pointing.dropdown > .menu::after { - left: auto; - right: 1em; -} - -/* Upward pointing */ - -.ui.pointing.upward.dropdown .menu, -.ui.top.pointing.upward.dropdown .menu { - top: auto !important; - bottom: 100% !important; - margin: 0 0 0.78571429rem; - border-radius: 0.28571429rem; -} - -.ui.pointing.upward.dropdown .menu::after, -.ui.top.pointing.upward.dropdown .menu::after { - top: 100% !important; - bottom: auto !important; - box-shadow: 1px 1px 0 0 rgba(34, 36, 38, 0.15); - margin: -0.25em 0 0; -} - -.ui.selection.pointing.upward.dropdown .menu::after { - box-shadow: 1px 1px 0 0 #96c8da; -} - -/* Right Pointing Upward */ - -.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu { - top: auto !important; - bottom: 0 !important; - margin: 0 1em 0 0; -} - -.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu::after { - top: auto !important; - bottom: 0 !important; - margin: 0 0 1em 0; - box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15); -} - -/* Left Pointing Upward */ - -.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu { - top: auto !important; - bottom: 0 !important; - margin: 0 0 0 1em; -} - -.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu::after { - top: auto !important; - bottom: 0 !important; - margin: 0 0 1em 0; - box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15); -} - -.ui.floating.dropdown .menu .item:first-child, -.ui.pointing.dropdown .menu .item:first-child { - border-top-left-radius: 0.28571429rem; - border-top-right-radius: 0.28571429rem; -} - -.ui.floating.dropdown .menu .item:last-child, -.ui.pointing.dropdown .menu .item:last-child { - border-bottom-left-radius: 0.28571429rem; - border-bottom-right-radius: 0.28571429rem; -} - -/* -------------------- - Sizes ---------------------- */ - -.ui.dropdown, -.ui.dropdown .menu > .item { - font-size: 1rem; -} - -.ui.mini.dropdown, -.ui.mini.dropdown .menu > .item { - font-size: 0.78571429rem; -} - -.ui.tiny.dropdown, -.ui.tiny.dropdown .menu > .item { - font-size: 0.85714286rem; -} - -.ui.small.dropdown, -.ui.small.dropdown .menu > .item { - font-size: 0.92857143rem; -} - -.ui.large.dropdown, -.ui.large.dropdown .menu > .item { - font-size: 1.14285714rem; -} - -.ui.big.dropdown, -.ui.big.dropdown .menu > .item { - font-size: 1.28571429rem; -} - -.ui.huge.dropdown, -.ui.huge.dropdown .menu > .item { - font-size: 1.42857143rem; -} - -.ui.massive.dropdown, -.ui.massive.dropdown .menu > .item { - font-size: 1.71428571rem; -} - -/* -------------- - Inverted - --------------- */ - -/* General rules and basic dropdowns */ - -.ui.dropdown .inverted.menu, -.ui.inverted.dropdown .menu { - background: #1b1c1d; - box-shadow: none; - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.ui.dropdown .inverted.menu > .item, -.ui.inverted.dropdown .menu > .item { - color: rgba(255, 255, 255, 0.8); -} - -.ui.dropdown .inverted.menu .active.item, -.ui.inverted.dropdown .menu .active.item { - background: transparent; - color: rgba(255, 255, 255, 0.8); - box-shadow: none; -} - -.ui.dropdown .inverted.menu > .item:hover, -.ui.inverted.dropdown .menu > .item:hover { - background: #2d2e2f; - color: rgba(255, 255, 255, 0.8); -} - -.ui.inverted.dropdown.selected, -.ui.dropdown .inverted.menu .selected.item, -.ui.inverted.dropdown .menu .selected.item { - background: #3d3e3f; - color: rgba(255, 255, 255, 0.8); -} - -.ui.dropdown .inverted.menu > .header, -.ui.inverted.dropdown .menu > .header { - color: #fff; -} - -.ui.inverted.dropdown > .text > .description, -.ui.dropdown .inverted.menu > .item > .description, -.ui.inverted.dropdown .menu > .item > .description { - color: rgba(255, 255, 255, 0.5); -} - -.ui.dropdown .inverted.menu > .divider, -.ui.inverted.dropdown .menu > .divider { - border-top: 1px solid rgba(255, 255, 255, 0.15); -} - -.ui.dropdown .inverted.scrolling.menu, -.ui.inverted.dropdown .scrolling.menu { - border: none; - border-top: 1px solid rgba(255, 255, 255, 0.15); -} - -/* Selection */ - -.ui.inverted.selection.dropdown { - border: 1px solid rgba(255, 255, 255, 0.15); - background: #1b1c1d; - color: rgba(255, 255, 255, 0.8); -} - -.ui.inverted.selection.dropdown:hover { - border-color: rgba(255, 255, 255, 0.25); - box-shadow: none; -} - -.ui.inverted.selection.dropdown input { - color: #fff; -} - -.ui.inverted.selection.visible.dropdown > .text:not(.default) { - color: rgba(255, 255, 255, 0.9); -} - -.ui.selection.simple.dropdown:hover .inverted.menu, -.ui.inverted.selection.simple.dropdown:hover .menu, -.ui.selection.active.dropdown .inverted.menu, -.ui.inverted.selection.active.dropdown .menu, -.ui.inverted.selection.active.dropdown:hover { - border-color: rgba(255, 255, 255, 0.15); -} - -.ui.selection.dropdown .inverted.menu > .item, -.ui.inverted.selection.dropdown .menu > .item { - border-top: 1px solid #242526; -} - -.ui.inverted.dropdown:not(.button) > .default.text, -.ui.inverted.default.dropdown:not(.button) > .text { - color: rgba(255, 255, 255, 0.5); -} - -.ui.inverted.dropdown:not(.button) > input:focus ~ .default.text, -.ui.inverted.default.dropdown:not(.button) > input:focus ~ .text { - color: rgba(255, 255, 255, 0.7); -} - -.ui.inverted.active.search.dropdown input.search:focus + .text i.icon, -.ui.inverted.active.search.dropdown input.search:focus + .text .flag { - opacity: 0.45; -} - -.ui.inverted.active.search.dropdown input.search:focus + .text { - color: rgba(255, 255, 255, 0.7) !important; -} - -.ui.dropdown .inverted.menu > .message:not(.ui), -.ui.inverted.dropdown .menu > .message:not(.ui) { - color: rgba(255, 255, 255, 0.5); -} - -/* Fixing the border */ - -.ui.dropdown .inverted.menu > .item:first-child, -.ui.inverted.dropdown .menu > .item:first-child { - border-top-width: 0; -} - -/* Labels */ - -.ui.inverted.multiple.dropdown > .label { - background-color: rgba(255, 255, 255, 0.7); - background-image: none; - color: #000000; - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0) inset; -} - -.ui.inverted.multiple.dropdown > .label:hover { - background-color: rgba(255, 255, 255, 0.9); - border-color: rgba(255, 255, 255, 0.9); - background-image: none; - color: #000000; -} - -.ui.inverted.multiple.dropdown > .label > .close.icon, -.ui.inverted.multiple.dropdown > .label > .delete.icon { - opacity: 0.6; -} - -.ui.inverted.multiple.dropdown > .label > .close.icon:hover, -.ui.inverted.multiple.dropdown > .label > .delete.icon:hover { - opacity: 0.8; -} - -/* Selection for form elements */ - -.ui.inverted.dropdown textarea::selection, -.ui.inverted.dropdown input::selection { - background-color: rgba(255, 255, 255, 0.25); - color: rgba(255, 255, 255, 0.8); -} - -/* Scrollbars */ - -.ui.dropdown .inverted.menu::-webkit-scrollbar-track, -.ui.inverted.dropdown .menu::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.1); -} - -.ui.dropdown .inverted.menu::-webkit-scrollbar-thumb, -.ui.inverted.dropdown .menu::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.25); -} - -.ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:window-inactive, -.ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:window-inactive { - background: rgba(255, 255, 255, 0.15); -} - -.ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:hover, -.ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.35); -} - -.ui.dropdown .inverted.menu, -.ui.inverted.dropdown .menu { - /* IE11 */ - scrollbar-face-color: #656565; - scrollbar-shadow-color: #656565; - scrollbar-track-color: #323232; - scrollbar-arrow-color: #323232; - /* firefox: first color thumb, second track */ - scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.1); -} - -.ui.pointing.dropdown > .inverted.menu::after, -.ui.inverted.pointing.dropdown > .menu::after { - background: #1b1c1d; - box-shadow: -1px -1px 0 0 rgba(255, 255, 255, 0.15); -} - -.ui.inverted.upward.pointing.dropdown > .menu::after { - box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.15); -} - -@supports selector(:has(.f)) { - .ui.inverted.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after, - .ui.inverted.upward.pointing.dropdown .menu:has(:last-child:hover)::after { - background: #2d2e2f; - } - - .ui.inverted.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after, - .ui.inverted.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after { - background: #3d3e3f; - } -} - -/******************************* - Theme Overrides -*******************************/ - -/* Dropdown Carets */ - -@font-face { - font-family: Dropdown; - src: url("data:application/font-woff;base64,d09GRk9UVE8AAASEAAsAAAAABwQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAC5AAAAU8AAAHrSr22AUZGVE0AAARQAAAAHAAAAByNrZ/TR0RFRgAABDQAAAAcAAAAIAAnABhPUy8yAAABYAAAAEIAAABgTadXCGNtYXAAAAKEAAAAVAAAAWQFcOKQaGVhZAAAAQgAAAAyAAAANg+j805oaGVhAAABPAAAABsAAAAkAwcBDWhtdHgAAARsAAAAFgAAAB4EAQASbWF4cAAAAVgAAAAGAAAABgAIUABuYW1lAAABpAAAAN8AAAG2rSbAM3Bvc3QAAALYAAAADAAAACAAAwAAeJxjYGRgYADiKjtG3nh+m68M3EwMIHCBwT0CRN9PyHYCUp6Mqox5QJqDASwNAMNOBrgAAHicY2BkYGB88P8BkFRlYACTjAyogB0AWWsDFgAAAFAAAAgAAHicY2Bm+Mg4gYGVgYHRhzGNgYHBHUp/ZZBkaGFABYwCSJyANNcUBgcGhg+3GB/8fwCUfMCgAFIDV6AAhIwAUbEMSQAAeJx1zTEKwkAUBNBJjIoKIggW2mwvBEVvIAgiNhY2VjEuQUh2YY2FeACPYOltvIH3cZJ8ywQS3p/d+QEwwAce/o8v9tDGUOzTU3GDXokD+ihuooeHuMX8Je5ijC9bXtCRP1T20Kcq+/RE3KAX4oDeipsYIRa3mD/FXSzxLtZeeGyR8bUwHGObWUvsoZHghhQRHEed3NLI1d+vyw/c43DleZErzBFixli768UaNQ9n9d11OedsJdxiyk0RZ40zsxPu/G7K7k66IUvW5CrRRrso12d1uqtNbHfcF+IHrnU+mwB4nGNgYGBmgGAZBkYGEIgD8hjBfBYGJyDNxcDBwASEjAwKH279//v/P1iVwofrYDbj/8dgPkQvGwMPkGRhYAWy2MHCbEDMxIAXMOOXHvIAAINhDt14nGNgZsALAAB9AAR4nE2Pv0rEQBCHZ3J7d4vGqEcOFaKC/zolZ6OWwmElNj6ClYWmyivcblyzE+RaK8EHsPMxBBtrwUdwA1fobpI7ZWBYfux8fD8ExgAR+fVVcpMkt4AeIAzLLSi3sdzxyt1WucqU31I+25iDtcvej1Kzh99V7+a19NoRPC1GAEsRvCxHwCP87MG8I7WgDRwWoAcrEMGmnT3YT+N0kB7G6Vk8PHLr2K0Tt04HB3FjMhUCQIESM7xDhfeYA3dcz5IZdOAcHuAD14MgeAu+zTNTRV5oTUR5obgZdwpVZFqQzEfKTiaE4JNwEralHGUuErnQNjE2oYxUwS0ldBTSxI3L7cOyKo60ib0lezSl1Rw+GXdq1pQiH03SdzKka4ymosLQTMcedSuIlEJUMqNcUi0jdIP5Ysb++leqLtSI/NWSTS0xq0WyYajQXPSVP/cLitO4NgB4nGNgZGBg4AFiAQYJBiYgzQLEIJoRggEFbQBAAAAAAQAAAADeTO04AAAAANAAR1gAAAAA32BrQnicY2BAAEYQVoVghu0MQgwMAAc/ARcAAA==") format("woff"); - font-weight: normal; - font-style: normal; -} - -.ui.dropdown > .dropdown.icon { - font-family: Dropdown; - line-height: 1; - height: 1em; - width: 1.23em; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - font-weight: normal; - font-style: normal; - text-align: center; -} - -.ui.dropdown > .dropdown.icon { - width: auto; -} - -.ui.dropdown > .dropdown.icon::before { - content: "\f0d7"; -} - -/* Sub Menu */ - -.ui.dropdown .menu .item .dropdown.icon::before { - content: "\f0da" -; -} - -.ui.dropdown .item .left.dropdown.icon::before, -.ui.dropdown .left.menu .item .dropdown.icon::before { - content: "\f0d9" ; -} - -/* Vertical Menu Dropdown */ - -.ui.vertical.menu .dropdown.item > .dropdown.icon::before { - content: "\f0da" -; -} - -/* Icons for Reference -.dropdown.down.icon { - content: "\f0d7"; -} -.dropdown.up.icon { - content: "\f0d8"; -} -.dropdown.left.icon { - content: "\f0d9"; -} -.dropdown.icon.icon { - content: "\f0da"; -} -*/ - -/******************************* - User Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Embed - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Types -*******************************/ - -.ui.embed { - position: relative; - max-width: 100%; - height: 0; - overflow: hidden; - background: #dcddde; - padding-bottom: 56.25%; -} - -/* ----------------- - Embedded Content ------------------- */ - -.ui.embed iframe, -.ui.embed embed, -.ui.embed object { - position: absolute; - border: none; - width: 100%; - height: 100%; - top: 0; - left: 0; - margin: 0; - padding: 0; - overflow: hidden; -} - -/* ----------------- - Embed ------------------- */ - -.ui.embed > .embed { - display: none; -} - -/* -------------- - Placeholder ---------------- */ - -.ui.embed > .placeholder { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - display: block; - width: 100%; - height: 100%; - background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); -} - -/* -------------- - Icon ---------------- */ - -.ui.embed > i.icon { - cursor: pointer; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 2; -} - -.ui.embed > i.icon::after { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 3; - content: ""; - background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); - opacity: 0.5; - transition: opacity 0.5s ease; -} - -.ui.embed > i.icon::before { - position: absolute; - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); - color: #fff; - font-size: 6rem; - text-shadow: 0 2px 10px rgba(34, 36, 38, 0.2); - transition: opacity 0.5s ease, color 0.5s ease; - z-index: 10; -} - -/******************************* - States -*******************************/ - -/* -------------- - Hover ---------------- */ - -.ui.embed i.icon:hover::after { - background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); - opacity: 1; -} - -.ui.embed i.icon:hover::before { - color: #fff; -} - -/* -------------- - Active ---------------- */ - -.ui.active.embed > i.icon, -.ui.active.embed > .placeholder { - display: none; -} - -.ui.active.embed > .embed { - display: block; -} - -/******************************* - Variations -*******************************/ - -.ui.square.embed { - padding-bottom: 100%; -} - -.ui[class*="4:3"].embed { - padding-bottom: 75%; -} - -.ui[class*="16:9"].embed { - padding-bottom: 56.25%; -} - -.ui[class*="21:9"].embed { - padding-bottom: 42.85714286%; -} - -/******************************* - Video Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Popup - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Popup -*******************************/ - -.ui.popup { - display: none; - position: absolute; - top: 0; - right: 0; - /* Fixes content being squished when inline (moz only) */ - min-width: min-content; - z-index: 1900; - border: 1px solid #d4d4d5; - line-height: 1.4285em; - max-width: 250px; - background: #fff; - padding: 0.833em 1em; - font-weight: normal; - font-style: normal; - color: rgba(0, 0, 0, 0.87); - border-radius: 0.28571429rem; - box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); -} - -.ui.popup > .header { - padding: 0; - font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-size: 1.14285714em; - line-height: 1.2; - font-weight: bold; -} - -.ui.popup > .header + .content { - padding-top: 0.5em; -} - -.ui.popup::before { - position: absolute; - content: ""; - width: 0.71428571em; - height: 0.71428571em; - background: #fff; - transform: rotate(45deg); - z-index: 1901; - box-shadow: 1px 1px 0 0 #bababc; -} - -/******************************* - Types -*******************************/ - -/* -------------- - Tooltip - --------------- */ - -/* Content */ - -[data-tooltip] { - position: relative; -} - -/* Arrow */ - -[data-tooltip]::before { - pointer-events: none; - position: absolute; - content: ""; - font-size: 1rem; - width: 0.71428571em; - height: 0.71428571em; - background: #fff; - z-index: 1901; - box-shadow: 1px 1px 0 0 #bababc; -} - -/* Popup */ - -[data-tooltip]::after { - pointer-events: none; - content: attr(data-tooltip); - position: absolute; - text-transform: none; - text-align: left; - text-shadow: none; - white-space: nowrap; - font-size: 1rem; - border: 1px solid #d4d4d5; - line-height: 1.4285em; - max-width: none; - background: #fff; - padding: 0.833em 1em; - font-weight: normal; - font-style: normal; - color: rgba(0, 0, 0, 0.87); - border-radius: 0.28571429rem; - box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); - z-index: 1900; -} - -/* Animation */ - -[data-tooltip]::before, -[data-tooltip]::after { - pointer-events: none; - opacity: 0; - transition: transform 0.2s ease, opacity 0.2s ease; -} - -[data-tooltip]::after, -[data-tooltip]:hover::before { - transition-delay: 0.04s; -} - -[data-tooltip]::before, -[data-tooltip]:hover::after { - transition-delay: 0s; -} - -[data-tooltip]::before { - transform: rotate(45deg) scale(0.8); - transform-origin: center top; -} - -[data-tooltip]::after { - transform-origin: center bottom; -} - -[data-tooltip][data-variation~="visible"]::before, -[data-tooltip][data-variation~="visible"]::after, -[data-tooltip]:hover::before, -[data-tooltip]:hover::after { - pointer-events: auto; - opacity: 1; -} - -[data-tooltip]:hover::before { - transform: rotate(45deg) scale(1); -} - -/* Animation Position */ - -[data-tooltip]:not([data-position])::after, -[data-tooltip][data-position="top center"]::after, -[data-tooltip][data-position="bottom center"]::after { - transform: translateX(-50%) scale(0.8); -} - -[data-tooltip]:not([data-position]):hover::after, -[data-tooltip][data-position="top center"]:hover::after, -[data-tooltip][data-position="bottom center"]:hover::after { - transform: translateX(-50%) scale(1); -} - -[data-tooltip][data-position="left center"]::after, -[data-tooltip][data-position="right center"]::after { - transform: translateY(-50%) scale(0.8); -} - -[data-tooltip][data-position="left center"]:hover::after, -[data-tooltip][data-position="right center"]:hover::after { - transform: translateY(-50%) scale(1); - -moz-transform: translateY(-50%) scale(1.0001) !important; -} - -[data-tooltip][data-position="top left"]::after, -[data-tooltip][data-position="top right"]::after, -[data-tooltip][data-position="bottom left"]::after, -[data-tooltip][data-position="bottom right"]::after { - transform: scale(0.8); -} - -[data-tooltip][data-position="top left"]:hover::after, -[data-tooltip][data-position="top right"]:hover::after, -[data-tooltip][data-position="bottom left"]:hover::after, -[data-tooltip][data-position="bottom right"]:hover::after { - transform: scale(1); -} - -[data-tooltip][data-variation~="fixed"]::after { - white-space: normal; - width: 250px; -} - -[data-tooltip][data-variation*="wide fixed"]::after { - width: 350px; -} - -[data-tooltip][data-variation*="very wide fixed"]::after { - width: 550px; -} - -@media only screen and (max-width: 767.98px) { - [data-tooltip][data-variation~="fixed"]::after { - width: 250px; - } -} - -/* -------------- - Inverted - --------------- */ - -/* Arrow */ - -[data-tooltip][data-inverted]::before { - box-shadow: none; -} - -/* Arrow Position */ - -[data-tooltip]:not([data-position])[data-inverted]::before { - background: #1b1c1d; -} - -/* Popup */ - -[data-tooltip][data-inverted]::after { - background: #1b1c1d; - color: #fff; - border: none; - box-shadow: none; -} - -/* -------------- - Position - --------------- */ - -[data-position~="top"][data-tooltip]::before { - background: #fff; -} - -/* Top Center (default) */ - -[data-tooltip]:not([data-position])::after, -[data-position="top center"][data-tooltip]::after { - top: auto; - right: auto; - left: 50%; - bottom: 100%; - margin-bottom: 0.5em; -} - -[data-tooltip]:not([data-position])::before, -[data-position="top center"][data-tooltip]::before { - top: auto; - right: auto; - bottom: 100%; - left: 50%; - background: #fff; - margin-left: -0.07142857rem; - margin-bottom: 0.14285714rem; -} - -/* Top Left */ - -[data-position="top left"][data-tooltip]::after { - top: auto; - right: auto; - left: 0; - bottom: 100%; - margin-bottom: 0.5em; -} - -[data-position="top left"][data-tooltip]::before { - top: auto; - right: auto; - bottom: 100%; - left: 1em; - margin-left: -0.07142857rem; - margin-bottom: 0.14285714rem; -} - -/* Top Right */ - -[data-position="top right"][data-tooltip]::after { - top: auto; - left: auto; - right: 0; - bottom: 100%; - margin-bottom: 0.5em; -} - -[data-position="top right"][data-tooltip]::before { - top: auto; - left: auto; - bottom: 100%; - right: 1em; - margin-left: -0.07142857rem; - margin-bottom: 0.14285714rem; -} - -[data-position~="bottom"][data-tooltip]::before { - background: #fff; - box-shadow: -1px -1px 0 0 #bababc; -} - -/* Bottom Center */ - -[data-position="bottom center"][data-tooltip]::after { - bottom: auto; - right: auto; - left: 50%; - top: 100%; - margin-top: 0.5em; -} - -[data-position="bottom center"][data-tooltip]::before { - bottom: auto; - right: auto; - top: 100%; - left: 50%; - margin-left: -0.07142857rem; - margin-top: 0.30714286em; -} - -/* Bottom Left */ - -[data-position="bottom left"][data-tooltip]::after { - left: 0; - top: 100%; - margin-top: 0.5em; -} - -[data-position="bottom left"][data-tooltip]::before { - bottom: auto; - right: auto; - top: 100%; - left: 1em; - margin-left: -0.07142857rem; - margin-top: 0.14285714rem; -} - -/* Bottom Right */ - -[data-position="bottom right"][data-tooltip]::after { - right: 0; - top: 100%; - margin-top: 0.5em; -} - -[data-position="bottom right"][data-tooltip]::before { - bottom: auto; - left: auto; - top: 100%; - right: 1em; - margin-left: -0.14285714rem; - margin-top: 0.07142857rem; -} - -/* Left Center */ - -[data-position="left center"][data-tooltip]::after { - right: 100%; - top: 50%; - margin-right: 0.5em; -} - -[data-position="left center"][data-tooltip]::before { - right: 100%; - top: 50%; - margin-top: -0.14285714rem; - margin-right: -0.07142857rem; - background: #fff; - box-shadow: 1px -1px 0 0 #bababc; -} - -/* Right Center */ - -[data-position="right center"][data-tooltip]::after { - left: 100%; - top: 50%; - margin-left: 0.5em; -} - -[data-position="right center"][data-tooltip]::before { - left: 100%; - top: 50%; - margin-top: -0.07142857rem; - margin-left: 0.14285714rem; - background: #fff; - box-shadow: -1px 1px 0 0 #bababc; -} - -/* Inverted Arrow Color */ - -[data-inverted][data-position~="bottom"][data-tooltip]::before { - background: #1b1c1d; - box-shadow: -1px -1px 0 0 #bababc; -} - -[data-inverted][data-position="left center"][data-tooltip]::before { - background: #1b1c1d; - box-shadow: 1px -1px 0 0 #bababc; -} - -[data-inverted][data-position="right center"][data-tooltip]::before { - background: #1b1c1d; - box-shadow: -1px 1px 0 0 #bababc; -} - -[data-inverted][data-position~="top"][data-tooltip]::before { - background: #1b1c1d; -} - -[data-position~="bottom"][data-tooltip]::before { - transform-origin: center bottom; -} - -[data-position~="bottom"][data-tooltip]::after { - transform-origin: center top; -} - -[data-position="bottom center"][data-tooltip]::before { - transform-origin: center top; -} - -[data-position="left center"][data-tooltip]::before { - transform-origin: top center; -} - -[data-position="left center"][data-tooltip]::after { - transform-origin: right center; -} - -[data-position="right center"][data-tooltip]::before { - transform-origin: right center; -} - -[data-position="right center"][data-tooltip]::after { - transform-origin: left center; -} - -[data-position="top left"][data-tooltip]::after { - transform-origin: bottom left; -} - -[data-position="top right"][data-tooltip]::after { - transform-origin: bottom right; -} - -[data-position="bottom left"][data-tooltip]::after { - transform-origin: top left; -} - -[data-position="bottom right"][data-tooltip]::after { - transform-origin: top right; -} - -/* -------------- - Basic - --------------- */ - -[data-tooltip][data-variation~="basic"]::before { - display: none; -} - -[data-tooltip][data-variation~="multiline"]::after { - white-space: pre-line; -} - -/* -------------- - Spacing ---------------- */ - -.ui.popup { - margin: 0; -} - -/* Extending from Top */ - -.ui.top.popup { - margin: 0 0 0.71428571em; -} - -.ui.top.left.popup { - transform-origin: left bottom; -} - -.ui.top.center.popup { - transform-origin: center bottom; -} - -.ui.top.right.popup { - transform-origin: right bottom; -} - -/* Extending from Vertical Center */ - -.ui.left.center.popup { - margin: 0 0.71428571em 0 0; - transform-origin: right 50%; -} - -.ui.right.center.popup { - margin: 0 0 0 0.71428571em; - transform-origin: left 50%; -} - -/* Extending from Bottom */ - -.ui.bottom.popup { - margin: 0.71428571em 0 0; -} - -.ui.bottom.left.popup { - transform-origin: left top; -} - -.ui.bottom.center.popup { - transform-origin: center top; -} - -.ui.bottom.right.popup { - transform-origin: right top; -} - -/* -------------- - Pointer - --------------- */ - -/* --- Below --- */ - -.ui.bottom.center.popup::before { - margin-left: -0.30714286em; - top: -0.30714286em; - left: 50%; - right: auto; - bottom: auto; - box-shadow: -1px -1px 0 0 #bababc; -} - -.ui.bottom.left.popup { - margin-left: 0; -} - -/* rtl:rename */ - -.ui.bottom.left.popup::before { - top: -0.30714286em; - left: 1em; - right: auto; - bottom: auto; - margin-left: 0; - box-shadow: -1px -1px 0 0 #bababc; -} - -.ui.bottom.right.popup { - margin-right: 0; -} - -/* rtl:rename */ - -.ui.bottom.right.popup::before { - top: -0.30714286em; - right: 1em; - bottom: auto; - left: auto; - margin-left: 0; - box-shadow: -1px -1px 0 0 #bababc; -} - -/* --- Above --- */ - -.ui.top.center.popup::before { - top: auto; - right: auto; - bottom: -0.30714286em; - left: 50%; - margin-left: -0.30714286em; -} - -.ui.top.left.popup { - margin-left: 0; -} - -/* rtl:rename */ - -.ui.top.left.popup::before { - bottom: -0.30714286em; - left: 1em; - top: auto; - right: auto; - margin-left: 0; -} - -.ui.top.right.popup { - margin-right: 0; -} - -/* rtl:rename */ - -.ui.top.right.popup::before { - bottom: -0.30714286em; - right: 1em; - top: auto; - left: auto; - margin-left: 0; -} - -/* --- Left Center --- */ - -/* rtl:rename */ - -.ui.left.center.popup::before { - top: 50%; - right: -0.30714286em; - bottom: auto; - left: auto; - margin-top: -0.30714286em; - box-shadow: 1px -1px 0 0 #bababc; -} - -/* --- Right Center --- */ - -/* rtl:rename */ - -.ui.right.center.popup::before { - top: 50%; - left: -0.30714286em; - bottom: auto; - right: auto; - margin-top: -0.30714286em; - box-shadow: -1px 1px 0 0 #bababc; -} - -.ui.right.center.popup::before, -.ui.left.center.popup::before { - background: #fff; -} - -/* Arrow Color By Location */ - -.ui.bottom.popup::before { - background: #fff; -} - -.ui.top.popup::before { - background: #fff; -} - -/* Inverted Arrow Color */ - -.ui.inverted.bottom.popup::before { - background: #1b1c1d; -} - -.ui.inverted.right.center.popup::before, -.ui.inverted.left.center.popup::before { - background: #1b1c1d; -} - -.ui.inverted.top.popup::before { - background: #1b1c1d; -} - -/******************************* - Coupling -*******************************/ - -/* Immediate Nested Grid */ - -.ui.ui.ui.popup > .ui.grid:not(.padded) { - width: calc(100% + 1.75rem); - margin: -0.7rem -0.875rem; -} - -/******************************* - States -*******************************/ - -.ui.loading.popup { - cursor: default; - pointer-events: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ui.loading.popup * { - opacity: 0.3; -} - -.ui.loading.popup::after { - position: absolute; - content: ""; - top: 50%; - left: 50%; - margin: -1em 0 0 -1em; - width: 2em; - height: 2em; - animation: loader 0.6s infinite linear; - border: 0.2em solid #767676; - border-radius: 500rem; - box-shadow: 0 0 0 1px transparent; - visibility: visible; - z-index: 101; -} - -.ui.invisible.popup { - display: block; - visibility: hidden !important; - z-index: -1; -} - -.ui.animating.popup, -.ui.visible.popup { - display: block; -} - -.ui.visible.popup { - transform: translateZ(0); - -webkit-backface-visibility: hidden; - backface-visibility: hidden; -} - -/******************************* - Variations -*******************************/ - -/* -------------- - Basic - --------------- */ - -.ui.basic.popup::before { - display: none; -} - -.ui.fixed.popup { - width: 250px; -} - -/* -------------- - Wide - --------------- */ - -.ui.wide.popup { - max-width: 350px; -} - -.ui.wide.popup.fixed { - width: 350px; -} - -.ui[class*="very wide"].popup { - max-width: 550px; -} - -.ui[class*="very wide"].popup.fixed { - width: 550px; -} - -@media only screen and (max-width: 767.98px) { - .ui.wide.popup, - .ui[class*="very wide"].popup { - max-width: 250px; - } - - .ui.wide.popup.fixed, - .ui[class*="very wide"].popup.fixed { - width: 250px; - } -} - -/* -------------- - Fluid - --------------- */ - -.ui.fluid.popup { - width: 100%; - max-width: none; -} - -/* -------------- - Colors - --------------- */ - -/* Inverted colors */ - -.ui.inverted.popup { - background: #1b1c1d; - color: #fff; - border: none; - box-shadow: none; -} - -.ui.inverted.popup .header { - background: none; - color: #fff; -} - -.ui.inverted.popup::before { - background-color: #1b1c1d; - box-shadow: none; -} - -.ui.ui.ui.primary.popup::before, -.ui.primary.popup, -[data-tooltip][data-variation~="primary"]::after, -[data-tooltip][data-variation~="primary"]::before { - background: #2185d0; - color: #fff; - border: none; -} - -.ui.ui.ui.primary.loading.popup::before, -.ui.primary.loading.popup { - background: #9bcbef; -} - -.ui.ui.ui.primary.popup::before, -[data-tooltip][data-variation~="primary"]::before { - box-shadow: none; -} - -.ui.ui.ui.inverted.primary.popup::before, -.ui.inverted.primary.popup, -[data-tooltip][data-inverted][data-variation~="primary"]::after, -[data-tooltip][data-inverted][data-variation~="primary"]::before { - background: #54c8ff; - color: #1b1c1d; -} - -.ui.ui.ui.inverted.primary.loading.popup::before, -.ui.inverted.primary.loading.popup { - background: #007eba; -} - -.ui.ui.ui.secondary.popup::before, -.ui.secondary.popup, -[data-tooltip][data-variation~="secondary"]::after, -[data-tooltip][data-variation~="secondary"]::before { - background: #1b1c1d; - color: #fff; - border: none; -} - -.ui.ui.ui.secondary.loading.popup::before, -.ui.secondary.loading.popup { - background: #65696c; -} - -.ui.ui.ui.secondary.popup::before, -[data-tooltip][data-variation~="secondary"]::before { - box-shadow: none; -} - -.ui.ui.ui.inverted.secondary.popup::before, -.ui.inverted.secondary.popup, -[data-tooltip][data-inverted][data-variation~="secondary"]::after, -[data-tooltip][data-inverted][data-variation~="secondary"]::before { - background: #545454; - color: #1b1c1d; -} - -.ui.ui.ui.inverted.secondary.loading.popup::before, -.ui.inverted.secondary.loading.popup { - background: #080808; -} - -.ui.ui.ui.red.popup::before, -.ui.red.popup, -[data-tooltip][data-variation~="red"]::after, -[data-tooltip][data-variation~="red"]::before { - background: #db2828; - color: #fff; - border: none; -} - -.ui.ui.ui.red.loading.popup::before, -.ui.red.loading.popup { - background: #f1abab; -} - -.ui.ui.ui.red.popup::before, -[data-tooltip][data-variation~="red"]::before { - box-shadow: none; -} - -.ui.ui.ui.inverted.red.popup::before, -.ui.inverted.red.popup, -[data-tooltip][data-inverted][data-variation~="red"]::after, -[data-tooltip][data-inverted][data-variation~="red"]::before { - background: #ff695e; - color: #1b1c1d; -} - -.ui.ui.ui.inverted.red.loading.popup::before, -.ui.inverted.red.loading.popup { - background: #c40d00; -} - -.ui.ui.ui.orange.popup::before, -.ui.orange.popup, -[data-tooltip][data-variation~="orange"]::after, -[data-tooltip][data-variation~="orange"]::before { - background: #f2711c; - color: #fff; - border: none; -} - -.ui.ui.ui.orange.loading.popup::before, -.ui.orange.loading.popup { - background: #faccad; -} - -.ui.ui.ui.orange.popup::before, -[data-tooltip][data-variation~="orange"]::before { - box-shadow: none; -} - -.ui.ui.ui.inverted.orange.popup::before, -.ui.inverted.orange.popup, -[data-tooltip][data-inverted][data-variation~="orange"]::after, -[data-tooltip][data-inverted][data-variation~="orange"]::before { - background: #ff851b; - color: #1b1c1d; -} - -.ui.ui.ui.inverted.orange.loading.popup::before, -.ui.inverted.orange.loading.popup { - background: #813c00; -} - -.ui.ui.ui.yellow.popup::before, -.ui.yellow.popup, -[data-tooltip][data-variation~="yellow"]::after, -[data-tooltip][data-variation~="yellow"]::before { - background: #fbbd08; - color: #fff; - border: none; -} - -.ui.ui.ui.yellow.loading.popup::before, -.ui.yellow.loading.popup { - background: #fde59f; -} - -.ui.ui.ui.yellow.popup::before, -[data-tooltip][data-variation~="yellow"]::before { - box-shadow: none; -} - -.ui.ui.ui.inverted.yellow.popup::before, -.ui.inverted.yellow.popup, -[data-tooltip][data-inverted][data-variation~="yellow"]::after, -[data-tooltip][data-inverted][data-variation~="yellow"]::before { - background: #ffe21f; - color: #1b1c1d; -} - -.ui.ui.ui.inverted.yellow.loading.popup::before, -.ui.inverted.yellow.loading.popup { - background: #857400; -} - -.ui.ui.ui.olive.popup::before, -.ui.olive.popup, -[data-tooltip][data-variation~="olive"]::after, -[data-tooltip][data-variation~="olive"]::before { - background: #b5cc18; - color: #fff; - border: none; -} - -.ui.ui.ui.olive.loading.popup::before, -.ui.olive.loading.popup { - background: #e4f18c; -} - -.ui.ui.ui.olive.popup::before, -[data-tooltip][data-variation~="olive"]::before { - box-shadow: none; -} - -.ui.ui.ui.inverted.olive.popup::before, -.ui.inverted.olive.popup, -[data-tooltip][data-inverted][data-variation~="olive"]::after, -[data-tooltip][data-inverted][data-variation~="olive"]::before { - background: #d9e778; - color: #1b1c1d; -} - -.ui.ui.ui.inverted.olive.loading.popup::before, -.ui.inverted.olive.loading.popup { - background: #97a81e; -} - -.ui.ui.ui.green.popup::before, -.ui.green.popup, -[data-tooltip][data-variation~="green"]::after, -[data-tooltip][data-variation~="green"]::before { - background: #21ba45; - color: #fff; - border: none; -} - -.ui.ui.ui.green.loading.popup::before, -.ui.green.loading.popup { - background: #8aeaa0; -} - -.ui.ui.ui.green.popup::before, -[data-tooltip][data-variation~="green"]::before { - box-shadow: none; -} - -.ui.ui.ui.inverted.green.popup::before, -.ui.inverted.green.popup, -[data-tooltip][data-inverted][data-variation~="green"]::after, -[data-tooltip][data-inverted][data-variation~="green"]::before { - background: #2ecc40; - color: #1b1c1d; -} - -.ui.ui.ui.inverted.green.loading.popup::before, -.ui.inverted.green.loading.popup { - background: #124f19; -} - -.ui.ui.ui.teal.popup::before, -.ui.teal.popup, -[data-tooltip][data-variation~="teal"]::after, -[data-tooltip][data-variation~="teal"]::before { - background: #00b5ad; - color: #fff; - border: none; -} - -.ui.ui.ui.teal.loading.popup::before, -.ui.teal.loading.popup { - background: #4ffff7; -} - -.ui.ui.ui.teal.popup::before, -[data-tooltip][data-variation~="teal"]::before { - box-shadow: none; -} - -.ui.ui.ui.inverted.teal.popup::before, -.ui.inverted.teal.popup, -[data-tooltip][data-inverted][data-variation~="teal"]::after, -[data-tooltip][data-inverted][data-variation~="teal"]::before { - background: #6dffff; - color: #1b1c1d; -} - -.ui.ui.ui.inverted.teal.loading.popup::before, -.ui.inverted.teal.loading.popup { - background: #00d3d3; -} - -.ui.ui.ui.blue.popup::before, -.ui.blue.popup, -[data-tooltip][data-variation~="blue"]::after, -[data-tooltip][data-variation~="blue"]::before { - background: #2185d0; - color: #fff; - border: none; -} - -.ui.ui.ui.blue.loading.popup::before, -.ui.blue.loading.popup { - background: #9bcbef; -} - -.ui.ui.ui.blue.popup::before, -[data-tooltip][data-variation~="blue"]::before { - box-shadow: none; -} - -.ui.ui.ui.inverted.blue.popup::before, -.ui.inverted.blue.popup, -[data-tooltip][data-inverted][data-variation~="blue"]::after, -[data-tooltip][data-inverted][data-variation~="blue"]::before { - background: #54c8ff; - color: #1b1c1d; -} - -.ui.ui.ui.inverted.blue.loading.popup::before, -.ui.inverted.blue.loading.popup { - background: #007eba; -} - -.ui.ui.ui.violet.popup::before, -.ui.violet.popup, -[data-tooltip][data-variation~="violet"]::after, -[data-tooltip][data-variation~="violet"]::before { - background: #6435c9; - color: #fff; - border: none; -} - -.ui.ui.ui.violet.loading.popup::before, -.ui.violet.loading.popup { - background: #c1adea; -} - -.ui.ui.ui.violet.popup::before, -[data-tooltip][data-variation~="violet"]::before { - box-shadow: none; -} - -.ui.ui.ui.inverted.violet.popup::before, -.ui.inverted.violet.popup, -[data-tooltip][data-inverted][data-variation~="violet"]::after, -[data-tooltip][data-inverted][data-variation~="violet"]::before { - background: #a291fb; - color: #1b1c1d; -} - -.ui.ui.ui.inverted.violet.loading.popup::before, -.ui.inverted.violet.loading.popup { - background: #2d09ea; -} - -.ui.ui.ui.purple.popup::before, -.ui.purple.popup, -[data-tooltip][data-variation~="purple"]::after, -[data-tooltip][data-variation~="purple"]::before { - background: #a333c8; - color: #fff; - border: none; -} - -.ui.ui.ui.purple.loading.popup::before, -.ui.purple.loading.popup { - background: #daabe9; -} - -.ui.ui.ui.purple.popup::before, -[data-tooltip][data-variation~="purple"]::before { - box-shadow: none; -} - -.ui.ui.ui.inverted.purple.popup::before, -.ui.inverted.purple.popup, -[data-tooltip][data-inverted][data-variation~="purple"]::after, -[data-tooltip][data-inverted][data-variation~="purple"]::before { - background: #dc73ff; - color: #1b1c1d; -} - -.ui.ui.ui.inverted.purple.loading.popup::before, -.ui.inverted.purple.loading.popup { - background: #a300d9; -} - -.ui.ui.ui.pink.popup::before, -.ui.pink.popup, -[data-tooltip][data-variation~="pink"]::after, -[data-tooltip][data-variation~="pink"]::before { - background: #e03997; - color: #fff; - border: none; -} - -.ui.ui.ui.pink.loading.popup::before, -.ui.pink.loading.popup { - background: #f5bddc; -} - -.ui.ui.ui.pink.popup::before, -[data-tooltip][data-variation~="pink"]::before { - box-shadow: none; -} - -.ui.ui.ui.inverted.pink.popup::before, -.ui.inverted.pink.popup, -[data-tooltip][data-inverted][data-variation~="pink"]::after, -[data-tooltip][data-inverted][data-variation~="pink"]::before { - background: #ff8edf; - color: #1b1c1d; -} - -.ui.ui.ui.inverted.pink.loading.popup::before, -.ui.inverted.pink.loading.popup { - background: #f400af; -} - -.ui.ui.ui.brown.popup::before, -.ui.brown.popup, -[data-tooltip][data-variation~="brown"]::after, -[data-tooltip][data-variation~="brown"]::before { - background: #a5673f; - color: #fff; - border: none; -} - -.ui.ui.ui.brown.loading.popup::before, -.ui.brown.loading.popup { - background: #dbb8a2; -} - -.ui.ui.ui.brown.popup::before, -[data-tooltip][data-variation~="brown"]::before { - box-shadow: none; -} - -.ui.ui.ui.inverted.brown.popup::before, -.ui.inverted.brown.popup, -[data-tooltip][data-inverted][data-variation~="brown"]::after, -[data-tooltip][data-inverted][data-variation~="brown"]::before { - background: #d67c1c; - color: #1b1c1d; -} - -.ui.ui.ui.inverted.brown.loading.popup::before, -.ui.inverted.brown.loading.popup { - background: #4f2e0a; -} - -.ui.ui.ui.grey.popup::before, -.ui.grey.popup, -[data-tooltip][data-variation~="grey"]::after, -[data-tooltip][data-variation~="grey"]::before { - background: #767676; - color: #fff; - border: none; -} - -.ui.ui.ui.grey.loading.popup::before, -.ui.grey.loading.popup { - background: #c3c3c3; -} - -.ui.ui.ui.grey.popup::before, -[data-tooltip][data-variation~="grey"]::before { - box-shadow: none; -} - -.ui.ui.ui.inverted.grey.popup::before, -.ui.inverted.grey.popup, -[data-tooltip][data-inverted][data-variation~="grey"]::after, -[data-tooltip][data-inverted][data-variation~="grey"]::before { - background: #dcddde; - color: #1b1c1d; -} - -.ui.ui.ui.inverted.grey.loading.popup::before, -.ui.inverted.grey.loading.popup { - background: #8d9194; -} - -.ui.ui.ui.black.popup::before, -.ui.black.popup, -[data-tooltip][data-variation~="black"]::after, -[data-tooltip][data-variation~="black"]::before { - background: #1b1c1d; - color: #fff; - border: none; -} - -.ui.ui.ui.black.loading.popup::before, -.ui.black.loading.popup { - background: #65696c; -} - -.ui.ui.ui.black.popup::before, -[data-tooltip][data-variation~="black"]::before { - box-shadow: none; -} - -.ui.ui.ui.inverted.black.popup::before, -.ui.inverted.black.popup, -[data-tooltip][data-inverted][data-variation~="black"]::after, -[data-tooltip][data-inverted][data-variation~="black"]::before { - background: #545454; - color: #1b1c1d; -} - -.ui.ui.ui.inverted.black.loading.popup::before, -.ui.inverted.black.loading.popup { - background: #080808; -} - -/* -------------- - Flowing - --------------- */ - -.ui.flowing.popup { - max-width: none; -} - -/* -------------- - Sizes ---------------- */ - -.ui.popup { - font-size: 1rem; -} - -.ui.mini.popup { - font-size: 0.78571429rem; -} - -[data-tooltip][data-variation~="mini"]::before, -[data-tooltip][data-variation~="mini"]::after { - font-size: 0.78571429rem; -} - -.ui.tiny.popup { - font-size: 0.85714286rem; -} - -[data-tooltip][data-variation~="tiny"]::before, -[data-tooltip][data-variation~="tiny"]::after { - font-size: 0.85714286rem; -} - -.ui.small.popup { - font-size: 0.92857143rem; -} - -[data-tooltip][data-variation~="small"]::before, -[data-tooltip][data-variation~="small"]::after { - font-size: 0.92857143rem; -} - -.ui.large.popup { - font-size: 1.14285714rem; -} - -[data-tooltip][data-variation~="large"]::before, -[data-tooltip][data-variation~="large"]::after { - font-size: 1.14285714rem; -} - -.ui.big.popup { - font-size: 1.28571429rem; -} - -[data-tooltip][data-variation~="big"]::before, -[data-tooltip][data-variation~="big"]::after { - font-size: 1.28571429rem; -} - -.ui.huge.popup { - font-size: 1.42857143rem; -} - -[data-tooltip][data-variation~="huge"]::before, -[data-tooltip][data-variation~="huge"]::after { - font-size: 1.42857143rem; -} - -.ui.massive.popup { - font-size: 1.71428571rem; -} - -[data-tooltip][data-variation~="massive"]::before, -[data-tooltip][data-variation~="massive"]::after { - font-size: 1.71428571rem; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - User Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Progress - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Progress -*******************************/ - -.ui.progress { - position: relative; - display: flex; - max-width: 100%; - border: none; - margin: 1em 0 2.5em; - box-shadow: none; - background: rgba(0, 0, 0, 0.1); - padding: 0; - border-radius: 0.28571429rem; -} - -.ui.progress:first-child { - margin: 0 0 2.5em; -} - -.ui.progress:last-child { - margin: 0 0 1.5em; -} - -/******************************* - Content -*******************************/ - -/* Activity Bar */ - -.ui.progress .bar { - display: block; - line-height: 1; - position: relative; - width: 0; - min-width: 2em; - background: #888; - border-radius: 0.28571429rem; - transition: width 0.1s ease, background-color 0.1s ease; - overflow: hidden; -} - -.ui.ui.ui.progress:not([data-percent]):not(.indeterminate) .bar, -.ui.ui.ui.progress[data-percent="0"]:not(.indeterminate) .bar { - background: transparent; -} - -.ui.progress[data-percent="0"] .bar .progress { - color: rgba(0, 0, 0, 0.87); -} - -.ui.inverted.progress[data-percent="0"] .bar .progress { - color: rgba(255, 255, 255, 0.9); -} - -/* Percent Complete */ - -.ui.progress .bar > .progress { - white-space: nowrap; - position: absolute; - width: auto; - font-size: 0.92857143em; - top: 50%; - right: 0.5em; - left: auto; - bottom: auto; - color: rgba(255, 255, 255, 0.7); - text-shadow: none; - margin-top: -0.5em; - font-weight: bold; - text-align: left; -} - -.ui.right.aligned.progress { - justify-content: flex-end; -} - -.ui.right.aligned.progress .bar > .progress { - left: 0.5em; - right: auto; -} - -/* Label */ - -.ui.progress > .label { - position: absolute; - width: 100%; - font-size: 1em; - top: 100%; - right: auto; - left: 0; - bottom: auto; - color: rgba(0, 0, 0, 0.87); - font-weight: bold; - text-shadow: none; - margin-top: 0.2em; - text-align: center; - transition: color 0.4s ease; -} - -/******************************* - Types -*******************************/ - -/* Indicating */ - -.ui.indicating.progress[data-percent^="1"] .bar, -.ui.indicating.progress[data-percent^="2"] .bar { - background-color: #d95c5c; -} - -.ui.indicating.progress[data-percent^="3"] .bar { - background-color: #efbc72; -} - -.ui.indicating.progress[data-percent^="4"] .bar, -.ui.indicating.progress[data-percent^="5"] .bar { - background-color: #e6bb48; -} - -.ui.indicating.progress[data-percent^="6"] .bar { - background-color: #ddc928; -} - -.ui.indicating.progress[data-percent^="7"] .bar, -.ui.indicating.progress[data-percent^="8"] .bar { - background-color: #b4d95c; -} - -.ui.indicating.progress[data-percent^="9"] .bar, -.ui.indicating.progress[data-percent^="100"] .bar { - background-color: #66da81; -} - -/* Indicating Label */ - -.ui.indicating.progress[data-percent^="1"] .label, -.ui.indicating.progress[data-percent^="2"] .label { - color: rgba(0, 0, 0, 0.87); -} - -.ui.indicating.progress[data-percent^="3"] .label { - color: rgba(0, 0, 0, 0.87); -} - -.ui.indicating.progress[data-percent^="4"] .label, -.ui.indicating.progress[data-percent^="5"] .label { - color: rgba(0, 0, 0, 0.87); -} - -.ui.indicating.progress[data-percent^="6"] .label { - color: rgba(0, 0, 0, 0.87); -} - -.ui.indicating.progress[data-percent^="7"] .label, -.ui.indicating.progress[data-percent^="8"] .label { - color: rgba(0, 0, 0, 0.87); -} - -.ui.indicating.progress[data-percent^="9"] .label, -.ui.indicating.progress[data-percent^="100"] .label { - color: rgba(0, 0, 0, 0.87); -} - -/* Inverted Indicating Label */ - -.ui.inverted.indicating.progress[data-percent^="1"] .label, -.ui.inverted.indicating.progress[data-percent^="2"] .label { - color: rgba(255, 255, 255, 0.9); -} - -.ui.inverted.indicating.progress[data-percent^="3"] .label { - color: rgba(255, 255, 255, 0.9); -} - -.ui.inverted.indicating.progress[data-percent^="4"] .label, -.ui.inverted.indicating.progress[data-percent^="5"] .label { - color: rgba(255, 255, 255, 0.9); -} - -.ui.inverted.indicating.progress[data-percent^="6"] .label { - color: rgba(255, 255, 255, 0.9); -} - -.ui.inverted.indicating.progress[data-percent^="7"] .label, -.ui.inverted.indicating.progress[data-percent^="8"] .label { - color: rgba(255, 255, 255, 0.9); -} - -.ui.inverted.indicating.progress[data-percent^="9"] .label, -.ui.inverted.indicating.progress[data-percent^="100"] .label { - color: rgba(255, 255, 255, 0.9); -} - -/* Single Digits */ - -.ui.indicating.progress[data-percent="1"] .bar, -.ui.indicating.progress[data-percent^="1."] .bar, -.ui.indicating.progress[data-percent="2"] .bar, -.ui.indicating.progress[data-percent^="2."] .bar, -.ui.indicating.progress[data-percent="3"] .bar, -.ui.indicating.progress[data-percent^="3."] .bar, -.ui.indicating.progress[data-percent="4"] .bar, -.ui.indicating.progress[data-percent^="4."] .bar, -.ui.indicating.progress[data-percent="5"] .bar, -.ui.indicating.progress[data-percent^="5."] .bar, -.ui.indicating.progress[data-percent="6"] .bar, -.ui.indicating.progress[data-percent^="6."] .bar, -.ui.indicating.progress[data-percent="7"] .bar, -.ui.indicating.progress[data-percent^="7."] .bar, -.ui.indicating.progress[data-percent="8"] .bar, -.ui.indicating.progress[data-percent^="8."] .bar, -.ui.indicating.progress[data-percent="9"] .bar, -.ui.indicating.progress[data-percent^="9."] .bar { - background-color: #d95c5c; -} - -.ui.indicating.progress[data-percent="0"] .label, -.ui.indicating.progress[data-percent^="0."] .label, -.ui.indicating.progress[data-percent="1"] .label, -.ui.indicating.progress[data-percent^="1."] .label, -.ui.indicating.progress[data-percent="2"] .label, -.ui.indicating.progress[data-percent^="2."] .label, -.ui.indicating.progress[data-percent="3"] .label, -.ui.indicating.progress[data-percent^="3."] .label, -.ui.indicating.progress[data-percent="4"] .label, -.ui.indicating.progress[data-percent^="4."] .label, -.ui.indicating.progress[data-percent="5"] .label, -.ui.indicating.progress[data-percent^="5."] .label, -.ui.indicating.progress[data-percent="6"] .label, -.ui.indicating.progress[data-percent^="6."] .label, -.ui.indicating.progress[data-percent="7"] .label, -.ui.indicating.progress[data-percent^="7."] .label, -.ui.indicating.progress[data-percent="8"] .label, -.ui.indicating.progress[data-percent^="8."] .label, -.ui.indicating.progress[data-percent="9"] .label, -.ui.indicating.progress[data-percent^="9."] .label { - color: rgba(0, 0, 0, 0.87); -} - -.ui.inverted.indicating.progress[data-percent="0"] .label, -.ui.inverted.indicating.progress[data-percent^="0."] .label, -.ui.inverted.indicating.progress[data-percent="1"] .label, -.ui.inverted.indicating.progress[data-percent^="1."] .label, -.ui.inverted.indicating.progress[data-percent="2"] .label, -.ui.inverted.indicating.progress[data-percent^="2."] .label, -.ui.inverted.indicating.progress[data-percent="3"] .label, -.ui.inverted.indicating.progress[data-percent^="3."] .label, -.ui.inverted.indicating.progress[data-percent="4"] .label, -.ui.inverted.indicating.progress[data-percent^="4."] .label, -.ui.inverted.indicating.progress[data-percent="5"] .label, -.ui.inverted.indicating.progress[data-percent^="5."] .label, -.ui.inverted.indicating.progress[data-percent="6"] .label, -.ui.inverted.indicating.progress[data-percent^="6."] .label, -.ui.inverted.indicating.progress[data-percent="7"] .label, -.ui.inverted.indicating.progress[data-percent^="7."] .label, -.ui.inverted.indicating.progress[data-percent="8"] .label, -.ui.inverted.indicating.progress[data-percent^="8."] .label, -.ui.inverted.indicating.progress[data-percent="9"] .label, -.ui.inverted.indicating.progress[data-percent^="9."] .label { - color: rgba(255, 255, 255, 0.9); -} - -/* Indicating Success */ - -.ui.ui.indicating.progress.success .label { - color: #1a531b; -} - -/******************************* - States -*******************************/ - -/* -------------- - Success - --------------- */ - -.ui.ui.progress.success .bar { - background-color: #21ba45; -} - -.ui.ui.progress.success .bar, -.ui.ui.progress.success .bar::after { - animation: none; -} - -.ui.progress.success > .label { - color: #1a531b; -} - -/* -------------- - Warning - --------------- */ - -.ui.ui.progress.warning .bar { - background-color: #f2c037; -} - -.ui.ui.progress.warning .bar, -.ui.ui.progress.warning .bar::after { - animation: none; -} - -.ui.progress.warning > .label { - color: #794b02; -} - -/* -------------- - Error - --------------- */ - -.ui.ui.progress.error .bar { - background-color: #db2828; -} - -.ui.ui.progress.error .bar, -.ui.ui.progress.error .bar::after { - animation: none; -} - -.ui.progress.error > .label { - color: #912d2b; -} - -/* -------------- - Active - --------------- */ - -.ui.active.progress .bar { - position: relative; - min-width: 2em; -} - -.ui.active.progress .bar::after { - content: ""; - opacity: 0; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: #fff; - border-radius: 0.28571429rem; - animation: progress-active 2s ease infinite; - transform-origin: left; -} - -.ui.active.right.aligned.progress .bar::after { - transform-origin: right; -} - -@keyframes progress-active { - 0% { - opacity: 0.3; - transform: scale(0, 1); - } - - 100% { - opacity: 0; - transform: scale(1); - } -} - -/* -------------- - Disabled - --------------- */ - -.ui.disabled.progress { - opacity: 0.35; -} - -.ui.ui.disabled.progress .bar, -.ui.ui.disabled.progress .bar::after { - animation: none; -} - -/******************************* - Variations -*******************************/ - -/* -------------- - Inverted - --------------- */ - -.ui.inverted.progress { - background: rgba(255, 255, 255, 0.08); - border: none; -} - -.ui.inverted.progress .bar { - background: #888; -} - -.ui.inverted.progress .bar > .progress { - color: #1b1c1d; -} - -.ui.inverted.progress > .label { - color: #fff; -} - -.ui.inverted.progress.success > .label { - color: #21ba45; -} - -.ui.inverted.progress.warning > .label { - color: #f2c037; -} - -.ui.inverted.progress.error > .label { - color: #db2828; -} - -/* -------------- - Attached - --------------- */ - -/* bottom attached */ - -.ui.progress.attached { - background: transparent; - position: relative; - border: none; - margin: 0; -} - -.ui.progress.attached, -.ui.progress.attached .bar { - height: 0.2rem; - padding: 0; - overflow: hidden; - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -.ui.progress.attached .bar { - border-radius: 0; -} - -/* top attached */ - -.ui.progress.top.attached, -.ui.progress.top.attached .bar { - top: 0; - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui.progress.top.attached .bar { - border-radius: 0; -} - -/* Coupling */ - -.ui.segment > .ui.attached.progress, -.ui.card > .ui.attached.progress { - position: absolute; - top: auto; - left: 0; - bottom: 100%; - width: 100%; -} - -.ui.segment > .ui.bottom.attached.progress, -.ui.card > .ui.bottom.attached.progress { - top: 100%; - bottom: auto; -} - -/* -------------- - Colors ---------------- */ - -.ui.indeterminate.primary.progress .bar::before, -.ui.primary.progress .bar, -.ui.progress .primary.bar { - background-color: #2185d0; -} - -.ui.inverted.indeterminate.primary.progress .bar::before, -.ui.primary.inverted.progress .bar, -.ui.inverted.progress .primary.bar { - background-color: #54c8ff; -} - -.ui.indeterminate.secondary.progress .bar::before, -.ui.secondary.progress .bar, -.ui.progress .secondary.bar { - background-color: #1b1c1d; -} - -.ui.inverted.indeterminate.secondary.progress .bar::before, -.ui.secondary.inverted.progress .bar, -.ui.inverted.progress .secondary.bar { - background-color: #545454; -} - -.ui.indeterminate.red.progress .bar::before, -.ui.red.progress .bar, -.ui.progress .red.bar { - background-color: #db2828; -} - -.ui.inverted.indeterminate.red.progress .bar::before, -.ui.red.inverted.progress .bar, -.ui.inverted.progress .red.bar { - background-color: #ff695e; -} - -.ui.indeterminate.orange.progress .bar::before, -.ui.orange.progress .bar, -.ui.progress .orange.bar { - background-color: #f2711c; -} - -.ui.inverted.indeterminate.orange.progress .bar::before, -.ui.orange.inverted.progress .bar, -.ui.inverted.progress .orange.bar { - background-color: #ff851b; -} - -.ui.indeterminate.yellow.progress .bar::before, -.ui.yellow.progress .bar, -.ui.progress .yellow.bar { - background-color: #fbbd08; -} - -.ui.inverted.indeterminate.yellow.progress .bar::before, -.ui.yellow.inverted.progress .bar, -.ui.inverted.progress .yellow.bar { - background-color: #ffe21f; -} - -.ui.indeterminate.olive.progress .bar::before, -.ui.olive.progress .bar, -.ui.progress .olive.bar { - background-color: #b5cc18; -} - -.ui.inverted.indeterminate.olive.progress .bar::before, -.ui.olive.inverted.progress .bar, -.ui.inverted.progress .olive.bar { - background-color: #d9e778; -} - -.ui.indeterminate.green.progress .bar::before, -.ui.green.progress .bar, -.ui.progress .green.bar { - background-color: #21ba45; -} - -.ui.inverted.indeterminate.green.progress .bar::before, -.ui.green.inverted.progress .bar, -.ui.inverted.progress .green.bar { - background-color: #2ecc40; -} - -.ui.indeterminate.teal.progress .bar::before, -.ui.teal.progress .bar, -.ui.progress .teal.bar { - background-color: #00b5ad; -} - -.ui.inverted.indeterminate.teal.progress .bar::before, -.ui.teal.inverted.progress .bar, -.ui.inverted.progress .teal.bar { - background-color: #6dffff; -} - -.ui.indeterminate.blue.progress .bar::before, -.ui.blue.progress .bar, -.ui.progress .blue.bar { - background-color: #2185d0; -} - -.ui.inverted.indeterminate.blue.progress .bar::before, -.ui.blue.inverted.progress .bar, -.ui.inverted.progress .blue.bar { - background-color: #54c8ff; -} - -.ui.indeterminate.violet.progress .bar::before, -.ui.violet.progress .bar, -.ui.progress .violet.bar { - background-color: #6435c9; -} - -.ui.inverted.indeterminate.violet.progress .bar::before, -.ui.violet.inverted.progress .bar, -.ui.inverted.progress .violet.bar { - background-color: #a291fb; -} - -.ui.indeterminate.purple.progress .bar::before, -.ui.purple.progress .bar, -.ui.progress .purple.bar { - background-color: #a333c8; -} - -.ui.inverted.indeterminate.purple.progress .bar::before, -.ui.purple.inverted.progress .bar, -.ui.inverted.progress .purple.bar { - background-color: #dc73ff; -} - -.ui.indeterminate.pink.progress .bar::before, -.ui.pink.progress .bar, -.ui.progress .pink.bar { - background-color: #e03997; -} - -.ui.inverted.indeterminate.pink.progress .bar::before, -.ui.pink.inverted.progress .bar, -.ui.inverted.progress .pink.bar { - background-color: #ff8edf; -} - -.ui.indeterminate.brown.progress .bar::before, -.ui.brown.progress .bar, -.ui.progress .brown.bar { - background-color: #a5673f; -} - -.ui.inverted.indeterminate.brown.progress .bar::before, -.ui.brown.inverted.progress .bar, -.ui.inverted.progress .brown.bar { - background-color: #d67c1c; -} - -.ui.indeterminate.grey.progress .bar::before, -.ui.grey.progress .bar, -.ui.progress .grey.bar { - background-color: #767676; -} - -.ui.inverted.indeterminate.grey.progress .bar::before, -.ui.grey.inverted.progress .bar, -.ui.inverted.progress .grey.bar { - background-color: #dcddde; -} - -.ui.indeterminate.black.progress .bar::before, -.ui.black.progress .bar, -.ui.progress .black.bar { - background-color: #1b1c1d; -} - -.ui.inverted.indeterminate.black.progress .bar::before, -.ui.black.inverted.progress .bar, -.ui.inverted.progress .black.bar { - background-color: #545454; -} - -/* -------------- - Sizes ---------------- */ - -.ui.progress { - font-size: 1rem; -} - -.ui.progress .bar { - height: 1.75em; -} - -.ui.mini.progress { - font-size: 0.78571429rem; -} - -.ui.mini.progress .bar { - height: 0.3em; -} - -.ui.tiny.progress { - font-size: 0.85714286rem; -} - -.ui.tiny.progress .bar { - height: 0.5em; -} - -.ui.small.progress { - font-size: 0.92857143rem; -} - -.ui.small.progress .bar { - height: 1em; -} - -.ui.large.progress { - font-size: 1.14285714rem; -} - -.ui.large.progress .bar { - height: 2.5em; -} - -.ui.big.progress { - font-size: 1.28571429rem; -} - -.ui.big.progress .bar { - height: 3.5em; -} - -.ui.huge.progress { - font-size: 1.42857143rem; -} - -.ui.huge.progress .bar { - height: 4em; -} - -.ui.massive.progress { - font-size: 1.71428571rem; -} - -.ui.massive.progress .bar { - height: 5em; -} - -/* --------------- - Indeterminate - ---------------- */ - -.ui.indeterminate.progress .bar { - width: 100%; -} - -.ui.indeterminate.progress .bar .progress, -.ui.progress .bar .centered.progress { - text-align: center; - position: relative; - right: 0; -} - -.ui.indeterminate.progress .bar::before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - border-radius: 0.28571429rem; - animation: progress-pulsating 2s ease infinite; - transform-origin: center; - width: 100%; -} - -.ui.slow.indeterminate.progress .bar::before { - animation-duration: 4s; -} - -.ui.fast.indeterminate.progress .bar::before { - animation-duration: 1s; -} - -.ui.swinging.indeterminate.progress .bar::before { - transform-origin: left; - animation-name: progress-swinging; -} - -.ui.sliding.indeterminate.progress .bar::before { - transform-origin: left; - animation-name: progress-sliding; -} - -.ui.filling.indeterminate.progress .bar::before { - animation-name: progress-filling; -} - -.ui.indeterminate.progress:not(.sliding):not(.filling):not(.swinging) .bar::before { - background: #fff; -} - -.ui.sliding.indeterminate.progress .bar, -.ui.swinging.indeterminate.progress .bar, -.ui.filling.indeterminate.progress .bar { - background: rgba(0, 0, 0, 0.1); -} - -.ui.sliding.indeterminate.progress .bar .progress, -.ui.swinging.indeterminate.progress .bar .progress { - color: #1b1c1d; -} - -.ui.inverted.sliding.indeterminate.progress .bar, -.ui.inverted.swinging.indeterminate.progress .bar, -.ui.inverted.filling.indeterminate.progress .bar { - background: rgba(255, 255, 255, 0.08); -} - -.ui.inverted.sliding.indeterminate.progress .bar .progress, -.ui.inverted.swinging.indeterminate.progress .bar .progress { - color: rgba(255, 255, 255, 0.7); -} - -@keyframes progress-swinging { - 0%, 100% { - width: 10%; - left: -25%; - } - - 25%, 65% { - width: 70%; - } - - 50% { - width: 10%; - left: 100%; - } -} - -@keyframes progress-sliding { - 0% { - width: 10%; - left: -25%; - } - - 50% { - width: 70%; - } - - 100% { - width: 10%; - left: 100%; - } -} - -@keyframes progress-filling { - 0% { - transform: scale(0, 1); - } - - 80% { - transform: scale(1); - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -@keyframes progress-pulsating { - 0% { - transform: scale(0, 1); - opacity: 0.7; - } - - 100% { - transform: scale(1); - opacity: 0; - } -} - -/******************************* - Progress -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Rating - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Rating -*******************************/ - -.ui.rating { - display: inline-flex; - white-space: nowrap; - vertical-align: baseline; -} - -.ui.rating:last-child { - margin-right: 0; -} - -/* Icon */ - -.ui.rating .icon { - padding: 0; - margin: 0; - text-align: center; - font-weight: normal; - font-style: normal; - flex: 1 0 auto; - cursor: pointer; - width: 1.25em; - height: auto; - transition: opacity 0.1s ease, background 0.1s ease, text-shadow 0.1s ease, color 0.1s ease; - line-height: 1; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; -} - -/******************************* - Types -*******************************/ - -/* ------------------- - Standard --------------------- */ - -/* Inactive Icon */ - -.ui.rating .icon { - background: transparent; - color: rgba(0, 0, 0, 0.15); -} - -/* Active Icon */ - -.ui.rating .active.icon { - background: transparent; - color: rgba(0, 0, 0, 0.85); -} - -/* Partially Active Icon */ - -.ui.rating .icon.partial.active { - background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); -} - -/* central override for colors */ - -.ui.ui.ui.rating .icon.partial.active { - -webkit-background-clip: text; - background-clip: text; - color: transparent; - text-shadow: none; -} - -/* Selected Icon */ - -.ui.rating .icon.selected, -.ui.rating .icon.selected.active, -.ui.rating .icon.selected.partial.active { - background: transparent; - color: rgba(0, 0, 0, 0.87); - background-clip: unset; -} - -/* -------------- - Colors --------------- */ - -.ui.primary.rating .active.icon { - color: #54c8ff; - text-shadow: 0 -1px 0 #2185d0, -1px 0 0 #2185d0, 0 1px 0 #2185d0, 1px 0 0 #2185d0; -} - -.ui.primary.rating .icon.selected, -.ui.primary.rating .icon.selected.active, -.ui.primary.rating .icon.selected.partial.active { - background: inherit; - color: #21b8ff; - text-shadow: 0 -1px 0 #1678c2, -1px 0 0 #1678c2, 0 1px 0 #1678c2, 1px 0 0 #1678c2; - -webkit-text-stroke: unset; - background-clip: unset; -} - -.ui.primary.rating .icon.partial.active { - background: linear-gradient(to right, #54c8ff 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); - -webkit-text-stroke: #2185d0 0.78px; -} - -.ui.secondary.rating .active.icon { - color: #545454; - text-shadow: 0 -1px 0 #1b1c1d, -1px 0 0 #1b1c1d, 0 1px 0 #1b1c1d, 1px 0 0 #1b1c1d; -} - -.ui.secondary.rating .icon.selected, -.ui.secondary.rating .icon.selected.active, -.ui.secondary.rating .icon.selected.partial.active { - background: inherit; - color: #6e6e6e; - text-shadow: 0 -1px 0 #27292a, -1px 0 0 #27292a, 0 1px 0 #27292a, 1px 0 0 #27292a; - -webkit-text-stroke: unset; - background-clip: unset; -} - -.ui.secondary.rating .icon.partial.active { - background: linear-gradient(to right, #545454 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); - -webkit-text-stroke: #1b1c1d 0.78px; -} - -.ui.red.rating .active.icon { - color: #ff695e; - text-shadow: 0 -1px 0 #db2828, -1px 0 0 #db2828, 0 1px 0 #db2828, 1px 0 0 #db2828; -} - -.ui.red.rating .icon.selected, -.ui.red.rating .icon.selected.active, -.ui.red.rating .icon.selected.partial.active { - background: inherit; - color: #ff392b; - text-shadow: 0 -1px 0 #d01919, -1px 0 0 #d01919, 0 1px 0 #d01919, 1px 0 0 #d01919; - -webkit-text-stroke: unset; - background-clip: unset; -} - -.ui.red.rating .icon.partial.active { - background: linear-gradient(to right, #ff695e 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); - -webkit-text-stroke: #db2828 0.78px; -} - -.ui.orange.rating .active.icon { - color: #ff851b; - text-shadow: 0 -1px 0 #f2711c, -1px 0 0 #f2711c, 0 1px 0 #f2711c, 1px 0 0 #f2711c; -} - -.ui.orange.rating .icon.selected, -.ui.orange.rating .icon.selected.active, -.ui.orange.rating .icon.selected.partial.active { - background: inherit; - color: #e76b00; - text-shadow: 0 -1px 0 #f26202, -1px 0 0 #f26202, 0 1px 0 #f26202, 1px 0 0 #f26202; - -webkit-text-stroke: unset; - background-clip: unset; -} - -.ui.orange.rating .icon.partial.active { - background: linear-gradient(to right, #ff851b 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); - -webkit-text-stroke: #f2711c 0.78px; -} - -.ui.yellow.rating .active.icon { - color: #ffe21f; - text-shadow: 0 -1px 0 #fbbd08, -1px 0 0 #fbbd08, 0 1px 0 #fbbd08, 1px 0 0 #fbbd08; -} - -.ui.yellow.rating .icon.selected, -.ui.yellow.rating .icon.selected.active, -.ui.yellow.rating .icon.selected.partial.active { - background: inherit; - color: #ebcd00; - text-shadow: 0 -1px 0 #eaae00, -1px 0 0 #eaae00, 0 1px 0 #eaae00, 1px 0 0 #eaae00; - -webkit-text-stroke: unset; - background-clip: unset; -} - -.ui.yellow.rating .icon.partial.active { - background: linear-gradient(to right, #ffe21f 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); - -webkit-text-stroke: #fbbd08 0.78px; -} - -.ui.olive.rating .active.icon { - color: #d9e778; - text-shadow: 0 -1px 0 #b5cc18, -1px 0 0 #b5cc18, 0 1px 0 #b5cc18, 1px 0 0 #b5cc18; -} - -.ui.olive.rating .icon.selected, -.ui.olive.rating .icon.selected.active, -.ui.olive.rating .icon.selected.partial.active { - background: inherit; - color: #d2e745; - text-shadow: 0 -1px 0 #a7bd0d, -1px 0 0 #a7bd0d, 0 1px 0 #a7bd0d, 1px 0 0 #a7bd0d; - -webkit-text-stroke: unset; - background-clip: unset; -} - -.ui.olive.rating .icon.partial.active { - background: linear-gradient(to right, #d9e778 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); - -webkit-text-stroke: #b5cc18 0.78px; -} - -.ui.green.rating .active.icon { - color: #2ecc40; - text-shadow: 0 -1px 0 #21ba45, -1px 0 0 #21ba45, 0 1px 0 #21ba45, 1px 0 0 #21ba45; -} - -.ui.green.rating .icon.selected, -.ui.green.rating .icon.selected.active, -.ui.green.rating .icon.selected.partial.active { - background: inherit; - color: #1ea92e; - text-shadow: 0 -1px 0 #16ab39, -1px 0 0 #16ab39, 0 1px 0 #16ab39, 1px 0 0 #16ab39; - -webkit-text-stroke: unset; - background-clip: unset; -} - -.ui.green.rating .icon.partial.active { - background: linear-gradient(to right, #2ecc40 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); - -webkit-text-stroke: #21ba45 0.78px; -} - -.ui.teal.rating .active.icon { - color: #6dffff; - text-shadow: 0 -1px 0 #00b5ad, -1px 0 0 #00b5ad, 0 1px 0 #00b5ad, 1px 0 0 #00b5ad; -} - -.ui.teal.rating .icon.selected, -.ui.teal.rating .icon.selected.active, -.ui.teal.rating .icon.selected.partial.active { - background: inherit; - color: #3affff; - text-shadow: 0 -1px 0 #009c95, -1px 0 0 #009c95, 0 1px 0 #009c95, 1px 0 0 #009c95; - -webkit-text-stroke: unset; - background-clip: unset; -} - -.ui.teal.rating .icon.partial.active { - background: linear-gradient(to right, #6dffff 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); - -webkit-text-stroke: #00b5ad 0.78px; -} - -.ui.blue.rating .active.icon { - color: #54c8ff; - text-shadow: 0 -1px 0 #2185d0, -1px 0 0 #2185d0, 0 1px 0 #2185d0, 1px 0 0 #2185d0; -} - -.ui.blue.rating .icon.selected, -.ui.blue.rating .icon.selected.active, -.ui.blue.rating .icon.selected.partial.active { - background: inherit; - color: #21b8ff; - text-shadow: 0 -1px 0 #1678c2, -1px 0 0 #1678c2, 0 1px 0 #1678c2, 1px 0 0 #1678c2; - -webkit-text-stroke: unset; - background-clip: unset; -} - -.ui.blue.rating .icon.partial.active { - background: linear-gradient(to right, #54c8ff 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); - -webkit-text-stroke: #2185d0 0.78px; -} - -.ui.violet.rating .active.icon { - color: #a291fb; - text-shadow: 0 -1px 0 #6435c9, -1px 0 0 #6435c9, 0 1px 0 #6435c9, 1px 0 0 #6435c9; -} - -.ui.violet.rating .icon.selected, -.ui.violet.rating .icon.selected.active, -.ui.violet.rating .icon.selected.partial.active { - background: inherit; - color: #745aff; - text-shadow: 0 -1px 0 #5829bb, -1px 0 0 #5829bb, 0 1px 0 #5829bb, 1px 0 0 #5829bb; - -webkit-text-stroke: unset; - background-clip: unset; -} - -.ui.violet.rating .icon.partial.active { - background: linear-gradient(to right, #a291fb 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); - -webkit-text-stroke: #6435c9 0.78px; -} - -.ui.purple.rating .active.icon { - color: #dc73ff; - text-shadow: 0 -1px 0 #a333c8, -1px 0 0 #a333c8, 0 1px 0 #a333c8, 1px 0 0 #a333c8; -} - -.ui.purple.rating .icon.selected, -.ui.purple.rating .icon.selected.active, -.ui.purple.rating .icon.selected.partial.active { - background: inherit; - color: #cf40ff; - text-shadow: 0 -1px 0 #9627ba, -1px 0 0 #9627ba, 0 1px 0 #9627ba, 1px 0 0 #9627ba; - -webkit-text-stroke: unset; - background-clip: unset; -} - -.ui.purple.rating .icon.partial.active { - background: linear-gradient(to right, #dc73ff 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); - -webkit-text-stroke: #a333c8 0.78px; -} - -.ui.pink.rating .active.icon { - color: #ff8edf; - text-shadow: 0 -1px 0 #e03997, -1px 0 0 #e03997, 0 1px 0 #e03997, 1px 0 0 #e03997; -} - -.ui.pink.rating .icon.selected, -.ui.pink.rating .icon.selected.active, -.ui.pink.rating .icon.selected.partial.active { - background: inherit; - color: #ff5bd1; - text-shadow: 0 -1px 0 #e61a8d, -1px 0 0 #e61a8d, 0 1px 0 #e61a8d, 1px 0 0 #e61a8d; - -webkit-text-stroke: unset; - background-clip: unset; -} - -.ui.pink.rating .icon.partial.active { - background: linear-gradient(to right, #ff8edf 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); - -webkit-text-stroke: #e03997 0.78px; -} - -.ui.brown.rating .active.icon { - color: #d67c1c; - text-shadow: 0 -1px 0 #a5673f, -1px 0 0 #a5673f, 0 1px 0 #a5673f, 1px 0 0 #a5673f; -} - -.ui.brown.rating .icon.selected, -.ui.brown.rating .icon.selected.active, -.ui.brown.rating .icon.selected.partial.active { - background: inherit; - color: #b0620f; - text-shadow: 0 -1px 0 #975b33, -1px 0 0 #975b33, 0 1px 0 #975b33, 1px 0 0 #975b33; - -webkit-text-stroke: unset; - background-clip: unset; -} - -.ui.brown.rating .icon.partial.active { - background: linear-gradient(to right, #d67c1c 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); - -webkit-text-stroke: #a5673f 0.78px; -} - -.ui.grey.rating .active.icon { - color: #dcddde; - text-shadow: 0 -1px 0 #767676, -1px 0 0 #767676, 0 1px 0 #767676, 1px 0 0 #767676; -} - -.ui.grey.rating .icon.selected, -.ui.grey.rating .icon.selected.active, -.ui.grey.rating .icon.selected.partial.active { - background: inherit; - color: #c2c4c5; - text-shadow: 0 -1px 0 #838383, -1px 0 0 #838383, 0 1px 0 #838383, 1px 0 0 #838383; - -webkit-text-stroke: unset; - background-clip: unset; -} - -.ui.grey.rating .icon.partial.active { - background: linear-gradient(to right, #dcddde 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); - -webkit-text-stroke: #767676 0.78px; -} - -.ui.black.rating .active.icon { - color: #545454; - text-shadow: 0 -1px 0 #1b1c1d, -1px 0 0 #1b1c1d, 0 1px 0 #1b1c1d, 1px 0 0 #1b1c1d; -} - -.ui.black.rating .icon.selected, -.ui.black.rating .icon.selected.active, -.ui.black.rating .icon.selected.partial.active { - background: inherit; - color: #000000; - text-shadow: 0 -1px 0 #27292a, -1px 0 0 #27292a, 0 1px 0 #27292a, 1px 0 0 #27292a; - -webkit-text-stroke: unset; - background-clip: unset; -} - -.ui.black.rating .icon.partial.active { - background: linear-gradient(to right, #545454 0% var(--full), rgba(0, 0, 0, 0.15) var(--full) 100%); - -webkit-text-stroke: #1b1c1d 0.78px; -} - -/******************************* - States -*******************************/ - -/* ------------------- - Disabled - -------------------- */ - -/* disabled rating */ - -.ui.disabled.rating .icon { - cursor: default; - pointer-events: none; -} - -/* ------------------- - User Interactive --------------------- */ - -/* Selected Rating */ - -.ui.rating.selected .active.icon { - opacity: 1; -} - -.ui.rating.selected .icon.selected, -.ui.rating .icon.selected { - opacity: 1; -} - -/******************************* - Variations -*******************************/ - -.ui.rating { - font-size: 1rem; -} - -.ui.mini.rating { - font-size: 0.78571429rem; -} - -.ui.tiny.rating { - font-size: 0.85714286rem; -} - -.ui.small.rating { - font-size: 0.92857143rem; -} - -.ui.large.rating { - font-size: 1.14285714rem; -} - -.ui.big.rating { - font-size: 1.28571429rem; -} - -.ui.huge.rating { - font-size: 1.42857143rem; -} - -.ui.massive.rating { - font-size: 2rem; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Tab - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://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; -} - -.ui.tab.loading * { - position: relative !important; - left: -10000px !important; -} - -.ui.tab.loading::before, -.ui.tab.loading.segment::before { - position: absolute; - content: ""; - top: 50%; - left: 50%; - margin: -1.25em 0 0 -1.25em; - width: 2.5em; - height: 2.5em; - border-radius: 500rem; - border: 0.2em solid rgba(0, 0, 0, 0.1); -} - -.ui.tab.loading::after, -.ui.tab.loading.segment::after { - position: absolute; - content: ""; - top: 50%; - left: 50%; - margin: -1.25em 0 0 -1.25em; - width: 2.5em; - height: 2.5em; - animation: loader 0.6s infinite linear; - border: 0.2em solid #767676; - border-radius: 500rem; - box-shadow: 0 0 0 1px transparent; -} - -/******************************* - Tab Overrides -*******************************/ - -/******************************* - User Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Text - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Text -*******************************/ - -span.ui.text { - line-height: 1; -} - -span.ui.primary.text { - color: #2185d0; -} - -span.ui.inverted.primary.text { - color: #54c8ff; -} - -span.ui.secondary.text { - color: #1b1c1d; -} - -span.ui.inverted.secondary.text { - color: #545454; -} - -span.ui.red.text { - color: #db2828; -} - -span.ui.inverted.red.text { - color: #ff695e; -} - -span.ui.orange.text { - color: #f2711c; -} - -span.ui.inverted.orange.text { - color: #ff851b; -} - -span.ui.yellow.text { - color: #fbbd08; -} - -span.ui.inverted.yellow.text { - color: #ffe21f; -} - -span.ui.olive.text { - color: #b5cc18; -} - -span.ui.inverted.olive.text { - color: #d9e778; -} - -span.ui.green.text { - color: #21ba45; -} - -span.ui.inverted.green.text { - color: #2ecc40; -} - -span.ui.teal.text { - color: #00b5ad; -} - -span.ui.inverted.teal.text { - color: #6dffff; -} - -span.ui.blue.text { - color: #2185d0; -} - -span.ui.inverted.blue.text { - color: #54c8ff; -} - -span.ui.violet.text { - color: #6435c9; -} - -span.ui.inverted.violet.text { - color: #a291fb; -} - -span.ui.purple.text { - color: #a333c8; -} - -span.ui.inverted.purple.text { - color: #dc73ff; -} - -span.ui.pink.text { - color: #e03997; -} - -span.ui.inverted.pink.text { - color: #ff8edf; -} - -span.ui.brown.text { - color: #a5673f; -} - -span.ui.inverted.brown.text { - color: #d67c1c; -} - -span.ui.grey.text { - color: #767676; -} - -span.ui.inverted.grey.text { - color: #dcddde; -} - -span.ui.black.text { - color: #1b1c1d; -} - -span.ui.inverted.black.text { - color: #545454; -} - -span.ui.error.text { - color: #db2828; -} - -span.ui.info.text { - color: #31ccec; -} - -span.ui.success.text { - color: #21ba45; -} - -span.ui.warning.text { - color: #f2c037; -} - -span.ui.disabled.text { - opacity: 0.45; -} - -/* Sizes */ - -span.ui.medium.text { - font-size: 1em; -} - -span.ui.mini.text { - font-size: 0.4em; -} - -span.ui.tiny.text { - font-size: 0.5em; -} - -span.ui.small.text { - font-size: 0.75em; -} - -span.ui.large.text { - font-size: 1.5em; -} - -span.ui.big.text { - font-size: 2em; -} - -span.ui.huge.text { - font-size: 4em; -} - -span.ui.massive.text { - font-size: 8em; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI 2.9.3 - Transition - * https://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * https://opensource.org/licenses/MIT - * - */ - -/******************************* - Transitions -*******************************/ - -.transition { - animation-iteration-count: 1; - animation-duration: 300ms; - animation-timing-function: ease; - animation-fill-mode: both; -} - -/******************************* - States -*******************************/ - -/* Animating */ - -.animating.transition { - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - visibility: visible !important; -} - -/* Loading */ - -.loading.transition { - position: absolute; - top: -99999px; - left: -99999px; -} - -/* Hidden */ - -.hidden.transition { - display: none; - visibility: hidden; -} - -/* Visible */ - -.visible.transition { - display: block !important; - visibility: visible !important; - /* backface-visibility: @backfaceVisibility; - transform: @use3DAcceleration; */ -} - -/* Disabled */ - -.disabled.transition { - animation-play-state: paused; -} - -/******************************* - Variations -*******************************/ - -.looping.transition { - animation-iteration-count: infinite; -} - -/* Pulsating */ - -.pulsating.transition { - animation-name: pulsating; - animation-duration: 2000ms; - box-shadow: 0 0 0 0 rgba(128, 128, 128, 0.5); -} - -.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); -} - -@keyframes pulsating { - 100% { - box-shadow: 0 0 0 0.8rem rgba(255, 255, 255, 0); - } -} - -.primary.pulsating.transition { - box-shadow: 0 0 0 0 rgba(33, 133, 208, 0.5); -} - -.primary.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(84, 200, 255, 0.7); -} - -.secondary.pulsating.transition { - box-shadow: 0 0 0 0 rgba(27, 28, 29, 0.5); -} - -.secondary.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(84, 84, 84, 0.7); -} - -.red.pulsating.transition { - box-shadow: 0 0 0 0 rgba(219, 40, 40, 0.5); -} - -.red.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(255, 105, 94, 0.7); -} - -.orange.pulsating.transition { - box-shadow: 0 0 0 0 rgba(242, 113, 28, 0.5); -} - -.orange.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(255, 133, 27, 0.7); -} - -.yellow.pulsating.transition { - box-shadow: 0 0 0 0 rgba(251, 189, 8, 0.5); -} - -.yellow.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(255, 226, 31, 0.7); -} - -.olive.pulsating.transition { - box-shadow: 0 0 0 0 rgba(181, 204, 24, 0.5); -} - -.olive.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(217, 231, 120, 0.7); -} - -.green.pulsating.transition { - box-shadow: 0 0 0 0 rgba(33, 186, 69, 0.5); -} - -.green.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(46, 204, 64, 0.7); -} - -.teal.pulsating.transition { - box-shadow: 0 0 0 0 rgba(0, 181, 173, 0.5); -} - -.teal.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(109, 255, 255, 0.7); -} - -.blue.pulsating.transition { - box-shadow: 0 0 0 0 rgba(33, 133, 208, 0.5); -} - -.blue.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(84, 200, 255, 0.7); -} - -.violet.pulsating.transition { - box-shadow: 0 0 0 0 rgba(100, 53, 201, 0.5); -} - -.violet.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(162, 145, 251, 0.7); -} - -.purple.pulsating.transition { - box-shadow: 0 0 0 0 rgba(163, 51, 200, 0.5); -} - -.purple.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(220, 115, 255, 0.7); -} - -.pink.pulsating.transition { - box-shadow: 0 0 0 0 rgba(224, 57, 151, 0.5); -} - -.pink.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(255, 142, 223, 0.7); -} - -.brown.pulsating.transition { - box-shadow: 0 0 0 0 rgba(165, 103, 63, 0.5); -} - -.brown.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(214, 124, 28, 0.7); -} - -.grey.pulsating.transition { - box-shadow: 0 0 0 0 rgba(118, 118, 118, 0.5); -} - -.grey.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(220, 221, 222, 0.7); -} - -.black.pulsating.transition { - box-shadow: 0 0 0 0 rgba(27, 28, 29, 0.5); -} - -.black.inverted.pulsating.transition { - box-shadow: 0 0 0 0 rgba(84, 84, 84, 0.7); -} - -/******************************* - Transitions -*******************************/ - -/* - Some transitions adapted from Animate CSS - https://github.com/daneden/animate.css - - Additional transitions adapted from Glide - by Nick Pettit - https://github.com/nickpettit/glide -*/ - -/* -------------- - Browse - --------------- */ - -.transition.browse { - animation-duration: 500ms; -} - -.transition.browse.in { - animation-name: browseIn; -} - -.transition.browse.out, -.transition.browse.left.out { - animation-name: browseOutLeft; -} - -.transition.browse.right.out { - animation-name: browseOutRight; -} - -/* In */ - -@keyframes browseIn { - 0% { - transform: scale(0.8) translateZ(0); - z-index: -1; - } - - 10% { - transform: scale(0.8) translateZ(0); - z-index: -1; - opacity: 0.7; - } - - 80% { - transform: scale(1.05) translateZ(0); - opacity: 1; - z-index: 999; - } - - 100% { - transform: scale(1) translateZ(0); - z-index: 999; - } -} - -/* Out */ - -@keyframes browseOutLeft { - 0% { - z-index: 999; - transform: translateX(0) rotateY(0) rotateX(0); - } - - 50% { - z-index: -1; - transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); - } - - 80% { - opacity: 1; - } - - 100% { - z-index: -1; - transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px); - opacity: 0; - } -} - -@keyframes browseOutRight { - 0% { - z-index: 999; - transform: translateX(0) rotateY(0) rotateX(0); - } - - 50% { - z-index: 1; - transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); - } - - 80% { - opacity: 1; - } - - 100% { - z-index: 1; - transform: translateX(0) rotateY(0) rotateX(0) translateZ(-10px); - opacity: 0; - } -} - -/* -------------- - Drop - --------------- */ - -.drop.transition { - transform-origin: top center; - animation-duration: 400ms; - animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); -} - -.drop.transition.in { - animation-name: dropIn; -} - -.drop.transition.out { - animation-name: dropOut; -} - -/* Drop */ - -@keyframes dropIn { - 0% { - opacity: 0; - transform: scale(0); - } - - 100% { - opacity: 1; - transform: scale(1); - } -} - -@keyframes dropOut { - 0% { - opacity: 1; - transform: scale(1); - } - - 100% { - opacity: 0; - transform: scale(0); - } -} - -/* -------------- - Fade - --------------- */ - -.transition.fade.in { - animation-name: fadeIn; -} - -.transition[class*="fade up"].in { - animation-name: fadeInUp; -} - -.transition[class*="fade down"].in { - animation-name: fadeInDown; -} - -.transition[class*="fade left"].in { - animation-name: fadeInLeft; -} - -.transition[class*="fade right"].in { - animation-name: fadeInRight; -} - -.transition.fade.out { - animation-name: fadeOut; -} - -.transition[class*="fade up"].out { - animation-name: fadeOutUp; -} - -.transition[class*="fade down"].out { - animation-name: fadeOutDown; -} - -.transition[class*="fade left"].out { - animation-name: fadeOutLeft; -} - -.transition[class*="fade right"].out { - animation-name: fadeOutRight; -} - -/* In */ - -@keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@keyframes fadeInUp { - 0% { - opacity: 0; - transform: translateY(10%); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes fadeInDown { - 0% { - opacity: 0; - transform: translateY(-10%); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes fadeInLeft { - 0% { - opacity: 0; - transform: translateX(10%); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -@keyframes fadeInRight { - 0% { - opacity: 0; - transform: translateX(-10%); - } - - 100% { - opacity: 1; - transform: translateX(0); - } -} - -/* Out */ - -@keyframes fadeOut { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -@keyframes fadeOutUp { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(5%); - } -} - -@keyframes fadeOutDown { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0; - transform: translateY(-5%); - } -} - -@keyframes fadeOutLeft { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(5%); - } -} - -@keyframes fadeOutRight { - 0% { - opacity: 1; - transform: translateX(0); - } - - 100% { - opacity: 0; - transform: translateX(-5%); - } -} - -/* -------------- - Flips - --------------- */ - -.flip.transition.in, -.flip.transition.out { - animation-duration: 600ms; -} - -.horizontal.flip.transition.in { - animation-name: horizontalFlipIn; -} - -.horizontal.flip.transition.out { - animation-name: horizontalFlipOut; -} - -.vertical.flip.transition.in { - animation-name: verticalFlipIn; -} - -.vertical.flip.transition.out { - animation-name: verticalFlipOut; -} - -/* In */ - -@keyframes horizontalFlipIn { - 0% { - transform: perspective(2000px) rotateY(-90deg); - opacity: 0; - } - - 100% { - transform: perspective(2000px) rotateY(0); - opacity: 1; - } -} - -@keyframes verticalFlipIn { - 0% { - transform: perspective(2000px) rotateX(-90deg); - opacity: 0; - } - - 100% { - transform: perspective(2000px) rotateX(0); - opacity: 1; - } -} - -/* Out */ - -@keyframes horizontalFlipOut { - 0% { - transform: perspective(2000px) rotateY(0); - opacity: 1; - } - - 100% { - transform: perspective(2000px) rotateY(90deg); - opacity: 0; - } -} - -@keyframes verticalFlipOut { - 0% { - transform: perspective(2000px) rotateX(0); - opacity: 1; - } - - 100% { - transform: perspective(2000px) rotateX(-90deg); - opacity: 0; - } -} - -/* -------------- - Scale - --------------- */ - -.scale.transition.in { - animation-name: scaleIn; -} - -.scale.transition.out { - animation-name: scaleOut; -} - -@keyframes scaleIn { - 0% { - opacity: 0; - transform: scale(0.8); - } - - 100% { - opacity: 1; - transform: scale(1); - } -} - -/* Out */ - -@keyframes scaleOut { - 0% { - opacity: 1; - transform: scale(1); - } - - 100% { - opacity: 0; - transform: scale(0.9); - } -} - -/* -------------- - Fly - --------------- */ - -/* Inward */ - -.transition.fly { - animation-duration: 0.6s; - transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -} - -.transition.fly.in { - animation-name: flyIn; -} - -.transition[class*="fly up"].in { - animation-name: flyInUp; -} - -.transition[class*="fly down"].in { - animation-name: flyInDown; -} - -.transition[class*="fly left"].in { - animation-name: flyInLeft; -} - -.transition[class*="fly right"].in { - animation-name: flyInRight; -} - -/* Outward */ - -.transition.fly.out { - animation-name: flyOut; -} - -.transition[class*="fly up"].out { - animation-name: flyOutUp; -} - -.transition[class*="fly down"].out { - animation-name: flyOutDown; -} - -.transition[class*="fly left"].out { - animation-name: flyOutLeft; -} - -.transition[class*="fly right"].out { - animation-name: flyOutRight; -} - -/* In */ - -@keyframes flyIn { - 0% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); - } - - 20% { - transform: scale3d(1.1, 1.1, 1.1); - } - - 40% { - transform: scale3d(0.9, 0.9, 0.9); - } - - 60% { - opacity: 1; - transform: scale3d(1.03, 1.03, 1.03); - } - - 80% { - transform: scale3d(0.97, 0.97, 0.97); - } - - 100% { - opacity: 1; - transform: scale3d(1, 1, 1); - } -} - -@keyframes flyInUp { - 0% { - opacity: 0; - transform: translate3d(0, 1500px, 0); - } - - 60% { - opacity: 1; - transform: translate3d(0, -20px, 0); - } - - 75% { - transform: translate3d(0, 10px, 0); - } - - 90% { - transform: translate3d(0, -5px, 0); - } - - 100% { - transform: translate3d(0, 0, 0); - } -} - -@keyframes flyInDown { - 0% { - opacity: 0; - transform: translate3d(0, -1500px, 0); - } - - 60% { - opacity: 1; - transform: translate3d(0, 25px, 0); - } - - 75% { - transform: translate3d(0, -10px, 0); - } - - 90% { - transform: translate3d(0, 5px, 0); - } - - 100% { - transform: none; - } -} - -@keyframes flyInLeft { - 0% { - opacity: 0; - transform: translate3d(1500px, 0, 0); - } - - 60% { - opacity: 1; - transform: translate3d(-25px, 0, 0); - } - - 75% { - transform: translate3d(10px, 0, 0); - } - - 90% { - transform: translate3d(-5px, 0, 0); - } - - 100% { - transform: none; - } -} - -@keyframes flyInRight { - 0% { - opacity: 0; - transform: translate3d(-1500px, 0, 0); - } - - 60% { - opacity: 1; - transform: translate3d(25px, 0, 0); - } - - 75% { - transform: translate3d(-10px, 0, 0); - } - - 90% { - transform: translate3d(5px, 0, 0); - } - - 100% { - transform: none; - } -} - -/* Out */ - -@keyframes flyOut { - 20% { - transform: scale3d(0.9, 0.9, 0.9); - } - - 50%, 55% { - opacity: 1; - transform: scale3d(1.1, 1.1, 1.1); - } - - 100% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); - } -} - -@keyframes flyOutUp { - 20% { - transform: translate3d(0, 10px, 0); - } - - 40%, 45% { - opacity: 1; - transform: translate3d(0, -20px, 0); - } - - 100% { - opacity: 0; - transform: translate3d(0, 2000px, 0); - } -} - -@keyframes flyOutDown { - 20% { - transform: translate3d(0, -10px, 0); - } - - 40%, 45% { - opacity: 1; - transform: translate3d(0, 20px, 0); - } - - 100% { - opacity: 0; - transform: translate3d(0, -2000px, 0); - } -} - -@keyframes flyOutRight { - 20% { - opacity: 1; - transform: translate3d(20px, 0, 0); - } - - 100% { - opacity: 0; - transform: translate3d(-2000px, 0, 0); - } -} - -@keyframes flyOutLeft { - 20% { - opacity: 1; - transform: translate3d(-20px, 0, 0); - } - - 100% { - opacity: 0; - transform: translate3d(2000px, 0, 0); - } -} - -/* -------------- - Slide - --------------- */ - -.transition.slide.in, -.transition[class*="slide down"].in { - animation-name: slideInY; - transform-origin: top center; -} - -.transition[class*="slide up"].in { - animation-name: slideInY; - transform-origin: bottom center; -} - -.transition[class*="slide left"].in { - animation-name: slideInX; - transform-origin: right center; -} - -.transition[class*="slide right"].in { - animation-name: slideInX; - transform-origin: left center; -} - -.transition.slide.out, -.transition[class*="slide down"].out { - animation-name: slideOutY; - transform-origin: top center; -} - -.transition[class*="slide up"].out { - animation-name: slideOutY; - transform-origin: bottom center; -} - -.transition[class*="slide left"].out { - animation-name: slideOutX; - transform-origin: right center; -} - -.transition[class*="slide right"].out { - animation-name: slideOutX; - transform-origin: left center; -} - -/* In */ - -@keyframes slideInY { - 0% { - opacity: 0; - transform: scaleY(0); - } - - 100% { - opacity: 1; - transform: scaleY(1); - } -} - -@keyframes slideInX { - 0% { - opacity: 0; - transform: scaleX(0); - } - - 100% { - opacity: 1; - transform: scaleX(1); - } -} - -/* Out */ - -@keyframes slideOutY { - 0% { - opacity: 1; - transform: scaleY(1); - } - - 100% { - opacity: 0; - transform: scaleY(0); - } -} - -@keyframes slideOutX { - 0% { - opacity: 1; - transform: scaleX(1); - } - - 100% { - opacity: 0; - transform: scaleX(0); - } -} - -/* -------------- - Swing - --------------- */ - -.transition.swing { - animation-duration: 800ms; -} - -.transition[class*="swing down"].in { - animation-name: swingInX; - transform-origin: top center; -} - -.transition[class*="swing up"].in { - animation-name: swingInX; - transform-origin: bottom center; -} - -.transition[class*="swing left"].in { - animation-name: swingInY; - transform-origin: right center; -} - -.transition[class*="swing right"].in { - animation-name: swingInY; - transform-origin: left center; -} - -.transition.swing.out, -.transition[class*="swing down"].out { - animation-name: swingOutX; - transform-origin: top center; -} - -.transition[class*="swing up"].out { - animation-name: swingOutX; - transform-origin: bottom center; -} - -.transition[class*="swing left"].out { - animation-name: swingOutY; - transform-origin: right center; -} - -.transition[class*="swing right"].out { - animation-name: swingOutY; - transform-origin: left center; -} - -/* In */ - -@keyframes swingInX { - 0% { - transform: perspective(1000px) rotateX(90deg); - opacity: 0; - } - - 40% { - transform: perspective(1000px) rotateX(-30deg); - opacity: 1; - } - - 60% { - transform: perspective(1000px) rotateX(15deg); - } - - 80% { - transform: perspective(1000px) rotateX(-7.5deg); - } - - 100% { - transform: perspective(1000px) rotateX(0); - } -} - -@keyframes swingInY { - 0% { - transform: perspective(1000px) rotateY(-90deg); - opacity: 0; - } - - 40% { - transform: perspective(1000px) rotateY(30deg); - opacity: 1; - } - - 60% { - transform: perspective(1000px) rotateY(-17.5deg); - } - - 80% { - transform: perspective(1000px) rotateY(7.5deg); - } - - 100% { - transform: perspective(1000px) rotateY(0); - } -} - -/* Out */ - -@keyframes swingOutX { - 0% { - transform: perspective(1000px) rotateX(0); - } - - 40% { - transform: perspective(1000px) rotateX(-7.5deg); - } - - 60% { - transform: perspective(1000px) rotateX(17.5deg); - } - - 80% { - transform: perspective(1000px) rotateX(-30deg); - opacity: 1; - } - - 100% { - transform: perspective(1000px) rotateX(90deg); - opacity: 0; - } -} - -@keyframes swingOutY { - 0% { - transform: perspective(1000px) rotateY(0); - } - - 40% { - transform: perspective(1000px) rotateY(7.5deg); - } - - 60% { - transform: perspective(1000px) rotateY(-10deg); - } - - 80% { - transform: perspective(1000px) rotateY(30deg); - opacity: 1; - } - - 100% { - transform: perspective(1000px) rotateY(-90deg); - opacity: 0; - } -} - -/* -------------- - Zoom - --------------- */ - -.transition.zoom.in { - animation-name: zoomIn; -} - -.transition.zoom.out { - animation-name: zoomOut; -} - -@keyframes zoomIn { - 0% { - opacity: 1; - transform: scale(0); - } - - 100% { - opacity: 1; - transform: scale(1); - } -} - -@keyframes zoomOut { - 0% { - opacity: 1; - transform: scale(1); - } - - 100% { - opacity: 1; - transform: scale(0); - } -} - -/******************************* - Static Animations -*******************************/ - -/* -------------- - Emphasis ---------------- */ - -.flash.transition { - animation-duration: 750ms; - animation-name: flash; -} - -.shake.transition { - animation-duration: 750ms; - animation-name: shake; -} - -.bounce.transition { - animation-duration: 750ms; - animation-name: bounce; -} - -.tada.transition { - animation-duration: 750ms; - animation-name: tada; -} - -.pulse.transition { - animation-duration: 500ms; - animation-name: pulse; -} - -.jiggle.transition { - animation-duration: 750ms; - animation-name: jiggle; -} - -.transition.glow { - animation-duration: 2000ms; - animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); -} - -.transition.glow { - animation-name: glow; -} - -/* Flash */ - -@keyframes flash { - 0%, 50%, 100% { - opacity: 1; - } - - 25%, 75% { - opacity: 0; - } -} - -/* Shake */ - -@keyframes shake { - 0%, 100% { - transform: translateX(0); - } - - 10%, 30%, 50%, 70%, 90% { - transform: translateX(-10px); - } - - 20%, 40%, 60%, 80% { - transform: translateX(10px); - } -} - -/* Bounce */ - -@keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - transform: translateY(0); - } - - 40% { - transform: translateY(-30px); - } - - 60% { - transform: translateY(-15px); - } -} - -/* Tada */ - -@keyframes tada { - 0% { - transform: scale(1); - } - - 10%, 20% { - transform: scale(0.9) rotate(-3deg); - } - - 30%, 50%, 70%, 90% { - transform: scale(1.1) rotate(3deg); - } - - 40%, 60%, 80% { - transform: scale(1.1) rotate(-3deg); - } - - 100% { - transform: scale(1) rotate(0); - } -} - -/* Pulse */ - -@keyframes pulse { - 0% { - transform: scale(1); - opacity: 1; - } - - 50% { - transform: scale(0.9); - opacity: 0.7; - } - - 100% { - transform: scale(1); - opacity: 1; - } -} - -/* Jiggle */ - -@keyframes jiggle { - 0% { - transform: scale3d(1, 1, 1); - } - - 30% { - transform: scale3d(1.25, 0.75, 1); - } - - 40% { - transform: scale3d(0.75, 1.25, 1); - } - - 50% { - transform: scale3d(1.15, 0.85, 1); - } - - 65% { - transform: scale3d(0.95, 1.05, 1); - } - - 75% { - transform: scale3d(1.05, 0.95, 1); - } - - 100% { - transform: scale3d(1, 1, 1); - } -} - -/* Glow */ - -@keyframes glow { - 0% { - background-color: #fcfcfd; - } - - 30% { - background-color: #fff6cd; - } - - 100% { - background-color: #fcfcfd; - } -} - -/******************************* - Site Overrides -*******************************/ \ No newline at end of file diff --git a/public/img/arrow-menucolor-down.png b/public/img/arrow-menucolor-down.png deleted file mode 100644 index 8f65351d67..0000000000 Binary files a/public/img/arrow-menucolor-down.png and /dev/null differ diff --git a/public/img/arrow-menucolor.png b/public/img/arrow-menucolor.png deleted file mode 100644 index eafffb8d87..0000000000 Binary files a/public/img/arrow-menucolor.png and /dev/null differ diff --git a/public/img/asc.gif b/public/img/asc.gif deleted file mode 100644 index 74157867f2..0000000000 Binary files a/public/img/asc.gif and /dev/null differ diff --git a/public/img/bad.png b/public/img/bad.png deleted file mode 100644 index e0ef12a968..0000000000 Binary files a/public/img/bad.png and /dev/null differ diff --git a/public/img/bg.gif b/public/img/bg.gif deleted file mode 100644 index fac668fcf4..0000000000 Binary files a/public/img/bg.gif and /dev/null differ diff --git a/public/img/btn_gg_sprite.png b/public/img/btn_gg_sprite.png deleted file mode 100644 index 34dfd875d3..0000000000 Binary files a/public/img/btn_gg_sprite.png and /dev/null differ diff --git a/public/img/desc.gif b/public/img/desc.gif deleted file mode 100644 index 3b30b3c58e..0000000000 Binary files a/public/img/desc.gif and /dev/null differ diff --git a/public/img/dot.png b/public/img/dot.png deleted file mode 100644 index b83855993d..0000000000 Binary files a/public/img/dot.png and /dev/null differ diff --git a/public/img/fbimg.png b/public/img/fbimg.png deleted file mode 100644 index 5549212a38..0000000000 Binary files a/public/img/fbimg.png and /dev/null differ diff --git a/public/img/hard-return.png b/public/img/hard-return.png deleted file mode 100644 index 1c6b2ae518..0000000000 Binary files a/public/img/hard-return.png and /dev/null differ diff --git a/public/img/highlighter_icon.png b/public/img/highlighter_icon.png deleted file mode 100644 index 9ba7d79828..0000000000 Binary files a/public/img/highlighter_icon.png and /dev/null differ diff --git a/public/img/icons/AlertIcon.js b/public/img/icons/AlertIcon.js index ac399762aa..202bfea103 100644 --- a/public/img/icons/AlertIcon.js +++ b/public/img/icons/AlertIcon.js @@ -4,11 +4,11 @@ import PropTypes from 'prop-types' const AlertIcon = ({size = 18}) => { return ( { + return ( + + + + ) +} + +AlertIconFull.propTypes = { + size: PropTypes.number, +} + +export default AlertIconFull diff --git a/public/js/components/icons/Alternatives.js b/public/img/icons/Alternatives.js similarity index 100% rename from public/js/components/icons/Alternatives.js rename to public/img/icons/Alternatives.js diff --git a/public/js/components/icons/Assistant.js b/public/img/icons/Assistant.js similarity index 100% rename from public/js/components/icons/Assistant.js rename to public/img/icons/Assistant.js diff --git a/public/img/icons/CheckCircleBroken.js b/public/img/icons/CheckCircleBroken.js new file mode 100644 index 0000000000..86b0abf51f --- /dev/null +++ b/public/img/icons/CheckCircleBroken.js @@ -0,0 +1,21 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const CheckCircleBroken = ({size = 24}) => { + return ( + + + + ) +} + +CheckCircleBroken.propTypes = { + size: PropTypes.number, +} + +export default CheckCircleBroken diff --git a/public/img/icons/ChevronDown.js b/public/img/icons/ChevronDown.js index c3eaef6183..d6bab5eaeb 100644 --- a/public/img/icons/ChevronDown.js +++ b/public/img/icons/ChevronDown.js @@ -3,13 +3,18 @@ import PropTypes from 'prop-types' const ChevronDown = ({size = 14}) => { return ( - + ) diff --git a/public/img/icons/ChevronLeft.js b/public/img/icons/ChevronLeft.js new file mode 100644 index 0000000000..7b273c9036 --- /dev/null +++ b/public/img/icons/ChevronLeft.js @@ -0,0 +1,21 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const ChevronLeft = ({size = 24}) => { + return ( + + + + ) +} + +ChevronLeft.propTypes = { + size: PropTypes.number, +} + +export default ChevronLeft diff --git a/public/img/icons/ChevronUp.js b/public/img/icons/ChevronUp.js new file mode 100644 index 0000000000..7702e78d9e --- /dev/null +++ b/public/img/icons/ChevronUp.js @@ -0,0 +1,27 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const ChevronUp = ({size = 14}) => { + return ( + + + + ) +} + +ChevronUp.propTypes = { + size: PropTypes.number, +} + +export default ChevronUp diff --git a/public/img/icons/CommentsIcon.js b/public/img/icons/CommentsIcon.js index 0b8fc0254f..53feda2184 100644 --- a/public/img/icons/CommentsIcon.js +++ b/public/img/icons/CommentsIcon.js @@ -3,13 +3,7 @@ import PropTypes from 'prop-types' const CommentsIcon = ({size = 18}) => { return ( - + { + return ( + + + + ) +} + +CommentsIconFilled.propTypes = { + size: PropTypes.number, +} + +export default CommentsIconFilled diff --git a/public/img/icons/CommentsSquareIcon.js b/public/img/icons/CommentsSquareIcon.js new file mode 100644 index 0000000000..ebd889df34 --- /dev/null +++ b/public/img/icons/CommentsSquareIcon.js @@ -0,0 +1,27 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const CommentsSquareIcon = ({size = 18}) => { + return ( + + + + ) +} + +CommentsSquareIcon.propTypes = { + size: PropTypes.number, +} + +export default CommentsSquareIcon diff --git a/public/img/icons/CommentsSquareIconFilled.js b/public/img/icons/CommentsSquareIconFilled.js new file mode 100644 index 0000000000..8db36ec1e3 --- /dev/null +++ b/public/img/icons/CommentsSquareIconFilled.js @@ -0,0 +1,27 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const CommentsSquareIcon = ({size = 18}) => { + return ( + + + + ) +} + +CommentsSquareIcon.propTypes = { + size: PropTypes.number, +} + +export default CommentsSquareIcon diff --git a/public/js/components/icons/Copy.js b/public/img/icons/Copy.js similarity index 100% rename from public/js/components/icons/Copy.js rename to public/img/icons/Copy.js diff --git a/public/img/icons/CopyIcon.js b/public/img/icons/CopyIcon.js new file mode 100644 index 0000000000..236d55a7a4 --- /dev/null +++ b/public/img/icons/CopyIcon.js @@ -0,0 +1,27 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const CopyIcon = ({size = 24}) => { + return ( + + + + ) +} + +CopyIcon.propTypes = { + size: PropTypes.number, +} + +export default CopyIcon diff --git a/public/js/components/icons/Education.js b/public/img/icons/Education.js similarity index 100% rename from public/js/components/icons/Education.js rename to public/img/icons/Education.js diff --git a/public/img/icons/EyeOff.js b/public/img/icons/EyeOff.js new file mode 100644 index 0000000000..49fafb36d4 --- /dev/null +++ b/public/img/icons/EyeOff.js @@ -0,0 +1,25 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const EyeOff = ({size = 24}) => { + return ( + + + + + ) +} + +EyeOff.propTypes = { + size: PropTypes.number, +} + +export default EyeOff diff --git a/public/img/icons/EyeOn.js b/public/img/icons/EyeOn.js new file mode 100644 index 0000000000..935202d9f1 --- /dev/null +++ b/public/img/icons/EyeOn.js @@ -0,0 +1,25 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const EyeOn = ({size = 24}) => { + return ( + + + + + ) +} + +EyeOn.propTypes = { + size: PropTypes.number, +} + +export default EyeOn diff --git a/public/js/components/icons/Feedback.js b/public/img/icons/Feedback.js similarity index 100% rename from public/js/components/icons/Feedback.js rename to public/img/icons/Feedback.js diff --git a/public/img/icons/FileAttachment.js b/public/img/icons/FileAttachment.js new file mode 100644 index 0000000000..ea3ca004d0 --- /dev/null +++ b/public/img/icons/FileAttachment.js @@ -0,0 +1,27 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileAttachment = ({size = 24}) => { + return ( + + + + ) +} + +FileAttachment.propTypes = { + size: PropTypes.number, +} + +export default FileAttachment diff --git a/public/img/icons/FileTypeCode.js b/public/img/icons/FileTypeCode.js new file mode 100644 index 0000000000..7218a14086 --- /dev/null +++ b/public/img/icons/FileTypeCode.js @@ -0,0 +1,41 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileTypeCode = ({size = 24}) => { + return ( + + + + + + + + ) +} + +FileTypeCode.propTypes = { + size: PropTypes.number, +} + +export default FileTypeCode diff --git a/public/img/icons/FileTypeFile.js b/public/img/icons/FileTypeFile.js new file mode 100644 index 0000000000..3b782d5892 --- /dev/null +++ b/public/img/icons/FileTypeFile.js @@ -0,0 +1,41 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileTypeFile = ({size = 24}) => { + return ( + + + + + + + + ) +} + +FileTypeFile.propTypes = { + size: PropTypes.number, +} + +export default FileTypeFile diff --git a/public/img/icons/FileTypeFolder.js b/public/img/icons/FileTypeFolder.js new file mode 100644 index 0000000000..704a4cc727 --- /dev/null +++ b/public/img/icons/FileTypeFolder.js @@ -0,0 +1,29 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileTypeFolder = ({size = 24}) => { + return ( + + + + + ) +} + +FileTypeFolder.propTypes = { + size: PropTypes.number, +} + +export default FileTypeFolder diff --git a/public/img/icons/FileTypeHtml.js b/public/img/icons/FileTypeHtml.js new file mode 100644 index 0000000000..b889c7cb8e --- /dev/null +++ b/public/img/icons/FileTypeHtml.js @@ -0,0 +1,36 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileTypeHtml = ({size = 24}) => { + return ( + + + + + + ) +} + +FileTypeHtml.propTypes = { + size: PropTypes.number, +} + +export default FileTypeHtml diff --git a/public/img/icons/FileTypeImage.js b/public/img/icons/FileTypeImage.js new file mode 100644 index 0000000000..5a39e040eb --- /dev/null +++ b/public/img/icons/FileTypeImage.js @@ -0,0 +1,35 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileTypeImage = ({size = 24}) => { + return ( + + + + + + ) +} + +FileTypeImage.propTypes = { + size: PropTypes.number, +} + +export default FileTypeImage diff --git a/public/img/icons/FileTypeLink.js b/public/img/icons/FileTypeLink.js new file mode 100644 index 0000000000..2e84be53b8 --- /dev/null +++ b/public/img/icons/FileTypeLink.js @@ -0,0 +1,33 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileTypeLink = ({size = 24}) => { + return ( + + + + + + ) +} + +FileTypeLink.propTypes = { + size: PropTypes.number, +} + +export default FileTypeLink diff --git a/public/img/icons/FileTypePdf.js b/public/img/icons/FileTypePdf.js new file mode 100644 index 0000000000..0fc4ba0389 --- /dev/null +++ b/public/img/icons/FileTypePdf.js @@ -0,0 +1,41 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileTypePdf = ({size = 24}) => { + return ( + + + + + + + + ) +} + +FileTypePdf.propTypes = { + size: PropTypes.number, +} + +export default FileTypePdf diff --git a/public/img/icons/FileTypePresentation.js b/public/img/icons/FileTypePresentation.js new file mode 100644 index 0000000000..2fb6cca04d --- /dev/null +++ b/public/img/icons/FileTypePresentation.js @@ -0,0 +1,33 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileTypePresentation = ({size = 24}) => { + return ( + + + + + + ) +} + +FileTypePresentation.propTypes = { + size: PropTypes.number, +} + +export default FileTypePresentation diff --git a/public/img/icons/FileTypePub.js b/public/img/icons/FileTypePub.js new file mode 100644 index 0000000000..191241199d --- /dev/null +++ b/public/img/icons/FileTypePub.js @@ -0,0 +1,33 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileTypePub = ({size = 24}) => { + return ( + + + + + + ) +} + +FileTypePub.propTypes = { + size: PropTypes.number, +} + +export default FileTypePub diff --git a/public/img/icons/FileTypeSpreadsheet.js b/public/img/icons/FileTypeSpreadsheet.js new file mode 100644 index 0000000000..232f59dd84 --- /dev/null +++ b/public/img/icons/FileTypeSpreadsheet.js @@ -0,0 +1,65 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileTypeSpreadsheet = ({size = 24}) => { + return ( + + + + + + + + + + + + + + ) +} + +FileTypeSpreadsheet.propTypes = { + size: PropTypes.number, +} + +export default FileTypeSpreadsheet diff --git a/public/img/icons/FileTypeSub.js b/public/img/icons/FileTypeSub.js new file mode 100644 index 0000000000..871ecd6e0d --- /dev/null +++ b/public/img/icons/FileTypeSub.js @@ -0,0 +1,33 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileTypeSub = ({size = 24}) => { + return ( + + + + + + ) +} + +FileTypeSub.propTypes = { + size: PropTypes.number, +} + +export default FileTypeSub diff --git a/public/img/icons/FileTypeText.js b/public/img/icons/FileTypeText.js new file mode 100644 index 0000000000..7971c525cd --- /dev/null +++ b/public/img/icons/FileTypeText.js @@ -0,0 +1,37 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileTypeText = ({size = 24}) => { + return ( + + + + + + + ) +} + +FileTypeText.propTypes = { + size: PropTypes.number, +} + +export default FileTypeText diff --git a/public/img/icons/FileTypeXliff.js b/public/img/icons/FileTypeXliff.js new file mode 100644 index 0000000000..a9f628b284 --- /dev/null +++ b/public/img/icons/FileTypeXliff.js @@ -0,0 +1,33 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileTypeXliff = ({size = 24}) => { + return ( + + + + + + ) +} + +FileTypeXliff.propTypes = { + size: PropTypes.number, +} + +export default FileTypeXliff diff --git a/public/img/icons/FileTypeXls.js b/public/img/icons/FileTypeXls.js new file mode 100644 index 0000000000..33ae83254e --- /dev/null +++ b/public/img/icons/FileTypeXls.js @@ -0,0 +1,35 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileTypeXls = ({size = 24}) => { + return ( + + + + + + ) +} + +FileTypeXls.propTypes = { + size: PropTypes.number, +} + +export default FileTypeXls diff --git a/public/img/icons/FileTypeZip.js b/public/img/icons/FileTypeZip.js new file mode 100644 index 0000000000..855d655399 --- /dev/null +++ b/public/img/icons/FileTypeZip.js @@ -0,0 +1,37 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FileTypeZip = ({size = 24}) => { + return ( + + + + + + + + + + + + + ) +} + +FileTypeZip.propTypes = { + size: PropTypes.number, +} + +export default FileTypeZip diff --git a/public/img/icons/Files.js b/public/img/icons/Files.js new file mode 100644 index 0000000000..b9acb5cdf9 --- /dev/null +++ b/public/img/icons/Files.js @@ -0,0 +1,31 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const Files = ({size = 24}) => { + return ( + + + + + ) +} + +Files.propTypes = { + size: PropTypes.number, +} + +export default Files diff --git a/public/img/icons/FilterFilledIcon.js b/public/img/icons/FilterFilledIcon.js new file mode 100644 index 0000000000..4eaba14584 --- /dev/null +++ b/public/img/icons/FilterFilledIcon.js @@ -0,0 +1,27 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FilterFilledIcon = ({size = 24}) => { + return ( + + + + ) +} + +FilterFilledIcon.propTypes = { + size: PropTypes.number, +} + +export default FilterFilledIcon diff --git a/public/img/icons/FilterIcon.js b/public/img/icons/FilterIcon.js new file mode 100644 index 0000000000..f93799dad0 --- /dev/null +++ b/public/img/icons/FilterIcon.js @@ -0,0 +1,27 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FilterIcon = ({size = 24}) => { + return ( + + + + ) +} + +FilterIcon.propTypes = { + size: PropTypes.number, +} + +export default FilterIcon diff --git a/public/js/components/icons/FlipBackward.js b/public/img/icons/FlipBackward.js similarity index 100% rename from public/js/components/icons/FlipBackward.js rename to public/img/icons/FlipBackward.js diff --git a/public/img/icons/FlipBackwardIcon.js b/public/img/icons/FlipBackwardIcon.js new file mode 100644 index 0000000000..2f1aa57296 --- /dev/null +++ b/public/img/icons/FlipBackwardIcon.js @@ -0,0 +1,19 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const FlipBackwardIcon = ({size = 24}) => { + return ( + + + + ) +} + +FlipBackwardIcon.propTypes = { + size: PropTypes.number, +} + +export default FlipBackwardIcon diff --git a/public/img/icons/GoToIcon.js b/public/img/icons/GoToIcon.js new file mode 100644 index 0000000000..9678915b38 --- /dev/null +++ b/public/img/icons/GoToIcon.js @@ -0,0 +1,25 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const GoToIcon = ({size = 24}) => { + return ( + + + + ) +} + +GoToIcon.propTypes = { + size: PropTypes.number, +} + +export default GoToIcon diff --git a/public/js/components/icons/Hide.js b/public/img/icons/Hide.js similarity index 100% rename from public/js/components/icons/Hide.js rename to public/img/icons/Hide.js diff --git a/public/js/components/icons/Icon3Dots.js b/public/img/icons/Icon3Dots.js similarity index 100% rename from public/js/components/icons/Icon3Dots.js rename to public/img/icons/Icon3Dots.js diff --git a/public/js/components/icons/IconAdd.js b/public/img/icons/IconAdd.js similarity index 100% rename from public/js/components/icons/IconAdd.js rename to public/img/icons/IconAdd.js diff --git a/public/js/components/icons/IconArrowRight.js b/public/img/icons/IconArrowRight.js similarity index 100% rename from public/js/components/icons/IconArrowRight.js rename to public/img/icons/IconArrowRight.js diff --git a/public/js/components/icons/IconChevronLeft.js b/public/img/icons/IconChevronLeft.js similarity index 100% rename from public/js/components/icons/IconChevronLeft.js rename to public/img/icons/IconChevronLeft.js diff --git a/public/js/components/icons/IconChevronRight.js b/public/img/icons/IconChevronRight.js similarity index 100% rename from public/js/components/icons/IconChevronRight.js rename to public/img/icons/IconChevronRight.js diff --git a/public/js/components/icons/IconClose.js b/public/img/icons/IconClose.js similarity index 100% rename from public/js/components/icons/IconClose.js rename to public/img/icons/IconClose.js diff --git a/public/js/components/icons/IconCloseCircle.js b/public/img/icons/IconCloseCircle.js similarity index 100% rename from public/js/components/icons/IconCloseCircle.js rename to public/img/icons/IconCloseCircle.js diff --git a/public/js/components/icons/IconDislike.js b/public/img/icons/IconDislike.js similarity index 100% rename from public/js/components/icons/IconDislike.js rename to public/img/icons/IconDislike.js diff --git a/public/js/components/icons/IconDown.js b/public/img/icons/IconDown.js similarity index 100% rename from public/js/components/icons/IconDown.js rename to public/img/icons/IconDown.js diff --git a/public/js/components/icons/IconEdit.js b/public/img/icons/IconEdit.js similarity index 100% rename from public/js/components/icons/IconEdit.js rename to public/img/icons/IconEdit.js diff --git a/public/img/icons/IconErrorOutline.js b/public/img/icons/IconErrorOutline.js new file mode 100644 index 0000000000..e92f780ab2 --- /dev/null +++ b/public/img/icons/IconErrorOutline.js @@ -0,0 +1,10 @@ +import * as React from 'react' + +const IconErrorOutline = ({size = 24}) => ( + + + + +) + +export default IconErrorOutline diff --git a/public/js/components/icons/IconFilter.js b/public/img/icons/IconFilter.js similarity index 100% rename from public/js/components/icons/IconFilter.js rename to public/img/icons/IconFilter.js diff --git a/public/img/icons/IconInfo.js b/public/img/icons/IconInfo.js new file mode 100644 index 0000000000..a846cca62f --- /dev/null +++ b/public/img/icons/IconInfo.js @@ -0,0 +1,9 @@ +import * as React from 'react' + +const IconInfo = ({size = 24}) => ( + + + +) + +export default IconInfo diff --git a/public/js/components/icons/IconLike.js b/public/img/icons/IconLike.js similarity index 100% rename from public/js/components/icons/IconLike.js rename to public/img/icons/IconLike.js diff --git a/public/img/icons/IconLock.js b/public/img/icons/IconLock.js new file mode 100644 index 0000000000..c9582656cd --- /dev/null +++ b/public/img/icons/IconLock.js @@ -0,0 +1,9 @@ +import * as React from 'react' + +const IconLock = ({size = 24}) => ( + + + +) + +export default IconLock diff --git a/public/js/components/icons/IconManage.js b/public/img/icons/IconManage.js similarity index 100% rename from public/js/components/icons/IconManage.js rename to public/img/icons/IconManage.js diff --git a/public/js/components/icons/IconMatecatLogo.js b/public/img/icons/IconMatecatLogo.js similarity index 100% rename from public/js/components/icons/IconMatecatLogo.js rename to public/img/icons/IconMatecatLogo.js diff --git a/public/js/components/icons/IconPin.js b/public/img/icons/IconPin.js similarity index 100% rename from public/js/components/icons/IconPin.js rename to public/img/icons/IconPin.js diff --git a/public/js/components/icons/IconRedirect.js b/public/img/icons/IconRedirect.js similarity index 100% rename from public/js/components/icons/IconRedirect.js rename to public/img/icons/IconRedirect.js diff --git a/public/js/components/icons/IconSave.js b/public/img/icons/IconSave.js similarity index 100% rename from public/js/components/icons/IconSave.js rename to public/img/icons/IconSave.js diff --git a/public/js/components/icons/IconSaveChanges.js b/public/img/icons/IconSaveChanges.js similarity index 100% rename from public/js/components/icons/IconSaveChanges.js rename to public/img/icons/IconSaveChanges.js diff --git a/public/js/components/icons/IconSearch.js b/public/img/icons/IconSearch.js similarity index 100% rename from public/js/components/icons/IconSearch.js rename to public/img/icons/IconSearch.js diff --git a/public/js/components/icons/IconSettings.js b/public/img/icons/IconSettings.js similarity index 100% rename from public/js/components/icons/IconSettings.js rename to public/img/icons/IconSettings.js diff --git a/public/img/icons/IconSplit.js b/public/img/icons/IconSplit.js new file mode 100644 index 0000000000..98d3d543bd --- /dev/null +++ b/public/img/icons/IconSplit.js @@ -0,0 +1,15 @@ +import * as React from 'react' + +const IconSplit = ({size = 24}) => ( + + + + +) + +export default IconSplit diff --git a/public/js/components/icons/IconTick.js b/public/img/icons/IconTick.js similarity index 100% rename from public/js/components/icons/IconTick.js rename to public/img/icons/IconTick.js diff --git a/public/img/icons/IconUnlock.js b/public/img/icons/IconUnlock.js new file mode 100644 index 0000000000..276380d180 --- /dev/null +++ b/public/img/icons/IconUnlock.js @@ -0,0 +1,9 @@ +import * as React from 'react' + +const IconUnlock = ({size = 24}) => ( + + + +) + +export default IconUnlock diff --git a/public/img/icons/IconUser.js b/public/img/icons/IconUser.js new file mode 100644 index 0000000000..c0b9a24e46 --- /dev/null +++ b/public/img/icons/IconUser.js @@ -0,0 +1,9 @@ +import * as React from 'react' + +const IconUser = ({size = 24}) => ( + + + +) + +export default IconUser diff --git a/public/js/components/icons/IconUserLogout.js b/public/img/icons/IconUserLogout.js similarity index 100% rename from public/js/components/icons/IconUserLogout.js rename to public/img/icons/IconUserLogout.js diff --git a/public/img/icons/IconWarning.js b/public/img/icons/IconWarning.js new file mode 100644 index 0000000000..6fb1dda226 --- /dev/null +++ b/public/img/icons/IconWarning.js @@ -0,0 +1,9 @@ +import * as React from 'react' + +const IconWarning = ({size = 24}) => ( + + + +) + +export default IconWarning diff --git a/public/img/icons/InfoIcon.js b/public/img/icons/InfoIcon.js index 6f8b91c10d..6882a174f4 100644 --- a/public/img/icons/InfoIcon.js +++ b/public/img/icons/InfoIcon.js @@ -1,13 +1,13 @@ import React from 'react' import PropTypes from 'prop-types' -const InfoIcon = ({size = 16}) => { +const InfoIcon = ({size = 24}) => { return ( - + diff --git a/public/img/icons/More.js b/public/img/icons/More.js deleted file mode 100644 index 62a465aa4a..0000000000 --- a/public/img/icons/More.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' - -const More = ({size = 24}) => { - return ( - - - - - - {' '} - - - - - - ) -} - -More.propTypes = { - size: PropTypes.number, -} - -export default More diff --git a/public/js/components/icons/Palette.js b/public/img/icons/Palette.js similarity index 100% rename from public/js/components/icons/Palette.js rename to public/img/icons/Palette.js diff --git a/public/img/icons/QAFilledICon.js b/public/img/icons/QAFilledICon.js new file mode 100644 index 0000000000..37997a57bb --- /dev/null +++ b/public/img/icons/QAFilledICon.js @@ -0,0 +1,25 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const QAFilledIcon = ({size = 24}) => { + return ( + + + + ) +} + +QAFilledIcon.propTypes = { + size: PropTypes.number, +} + +export default QAFilledIcon diff --git a/public/img/icons/QAICon.js b/public/img/icons/QAICon.js new file mode 100644 index 0000000000..4662477880 --- /dev/null +++ b/public/img/icons/QAICon.js @@ -0,0 +1,50 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const QAIcon = ({size = 24}) => { + return ( + + + + + + + + + ) +} + +QAIcon.propTypes = { + size: PropTypes.number, +} + +export default QAIcon diff --git a/public/img/icons/QualityReportIcon.js b/public/img/icons/QualityReportIcon.js index 0991b66d47..253e8aa6f3 100644 --- a/public/img/icons/QualityReportIcon.js +++ b/public/img/icons/QualityReportIcon.js @@ -1,12 +1,26 @@ import React from 'react' import PropTypes from 'prop-types' -const QualityReportIcon = ({size = 16}) => { +const QualityReportIcon = ({size = 20}) => { return ( - + + ) diff --git a/public/img/icons/ReviseIssuesIcon.js b/public/img/icons/ReviseIssuesIcon.js index 48ccb1a533..c1681303e6 100644 --- a/public/img/icons/ReviseIssuesIcon.js +++ b/public/img/icons/ReviseIssuesIcon.js @@ -15,7 +15,7 @@ const ReviseIssuesIcon = ({size = 18}) => { fillRule="evenodd" clipRule="evenodd" d="M9 2.25C5.27208 2.25 2.25 5.27208 2.25 9C2.25 12.7279 5.27208 15.75 9 15.75C12.7279 15.75 15.75 12.7279 15.75 9C15.75 5.27208 12.7279 2.25 9 2.25ZM0.75 9C0.75 4.44365 4.44365 0.75 9 0.75C13.5563 0.75 17.25 4.44365 17.25 9C17.25 13.5563 13.5563 17.25 9 17.25C4.44365 17.25 0.75 13.5563 0.75 9ZM9 5.25C9.41421 5.25 9.75 5.58579 9.75 6V9C9.75 9.41421 9.41421 9.75 9 9.75C8.58579 9.75 8.25 9.41421 8.25 9V6C8.25 5.58579 8.58579 5.25 9 5.25ZM8.25 12C8.25 11.5858 8.58579 11.25 9 11.25H9.0075C9.42171 11.25 9.7575 11.5858 9.7575 12C9.7575 12.4142 9.42171 12.75 9.0075 12.75H9C8.58579 12.75 8.25 12.4142 8.25 12Z" - fill="#29292D" + fill="currentColor" /> diff --git a/public/img/icons/Search.js b/public/img/icons/Search.js index b08c0adc67..352e55209a 100644 --- a/public/img/icons/Search.js +++ b/public/img/icons/Search.js @@ -3,10 +3,17 @@ import PropTypes from 'prop-types' const Search = ({size = 24}) => { return ( - + diff --git a/public/img/icons/SearchFilled.js b/public/img/icons/SearchFilled.js new file mode 100644 index 0000000000..f9af643943 --- /dev/null +++ b/public/img/icons/SearchFilled.js @@ -0,0 +1,19 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const SearchFilled = ({size = 24}) => { + return ( + + + + ) +} + +SearchFilled.propTypes = { + size: PropTypes.number, +} + +export default SearchFilled diff --git a/public/img/icons/SegmentQA.js b/public/img/icons/SegmentQA.js index fa35f70c3b..f21c905717 100644 --- a/public/img/icons/SegmentQA.js +++ b/public/img/icons/SegmentQA.js @@ -3,19 +3,19 @@ import PropTypes from 'prop-types' const SegmentQA = ({size = 18}) => { return ( - - - - - - - - - + + ) } diff --git a/public/img/icons/SettingsIcon.js b/public/img/icons/SettingsIcon.js new file mode 100644 index 0000000000..de072982bb --- /dev/null +++ b/public/img/icons/SettingsIcon.js @@ -0,0 +1,27 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const SettingsIcon = ({size = 16}) => { + return ( + + + + ) +} + +SettingsIcon.propTypes = { + size: PropTypes.number, +} + +export default SettingsIcon diff --git a/public/js/components/icons/Show.js b/public/img/icons/Show.js similarity index 100% rename from public/js/components/icons/Show.js rename to public/img/icons/Show.js diff --git a/public/img/icons/Star.js b/public/img/icons/Star.js new file mode 100644 index 0000000000..10ce6824b3 --- /dev/null +++ b/public/img/icons/Star.js @@ -0,0 +1,21 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const Star = ({size = 24}) => { + return ( + + + + ) +} + +Star.propTypes = { + size: PropTypes.number, +} + +export default Star diff --git a/public/img/icons/TranslatedIcon.js b/public/img/icons/TranslatedIcon.js index ea2beafe97..06bafbc355 100644 --- a/public/img/icons/TranslatedIcon.js +++ b/public/img/icons/TranslatedIcon.js @@ -1,20 +1,21 @@ import React from 'react' import PropTypes from 'prop-types' -const TranslatedIcon = ({}) => { +const TranslatedIcon = ({size = 40}) => { return ( - - - - - - + + ) } diff --git a/public/img/icons/icon-3dots.svg b/public/img/icons/icon-3dots.svg deleted file mode 100644 index e2c262e750..0000000000 --- a/public/img/icons/icon-3dots.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-QA-line.svg b/public/img/icons/icon-QA-line.svg deleted file mode 100644 index 20c2efbe52..0000000000 --- a/public/img/icons/icon-QA-line.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-QA.svg b/public/img/icons/icon-QA.svg deleted file mode 100644 index a00b0ced8a..0000000000 --- a/public/img/icons/icon-QA.svg +++ /dev/null @@ -1,3 +0,0 @@ - - QA - \ No newline at end of file diff --git a/public/img/icons/icon-QR-line.svg b/public/img/icons/icon-QR-line.svg deleted file mode 100644 index 4f7c664626..0000000000 --- a/public/img/icons/icon-QR-line.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-QR.svg b/public/img/icons/icon-QR.svg deleted file mode 100644 index 5f52e1c1d6..0000000000 --- a/public/img/icons/icon-QR.svg +++ /dev/null @@ -1,3 +0,0 @@ - - QR - \ No newline at end of file diff --git a/public/img/icons/icon-check.svg b/public/img/icons/icon-check.svg deleted file mode 100644 index 628b05fb24..0000000000 --- a/public/img/icons/icon-check.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-comments.svg b/public/img/icons/icon-comments.svg deleted file mode 100644 index bfe42e60e4..0000000000 --- a/public/img/icons/icon-comments.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-down.svg b/public/img/icons/icon-down.svg deleted file mode 100644 index 9c3d8aca19..0000000000 --- a/public/img/icons/icon-down.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-download-complete.svg b/public/img/icons/icon-download-complete.svg deleted file mode 100644 index 1572aa4ce3..0000000000 --- a/public/img/icons/icon-download-complete.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-download.svg b/public/img/icons/icon-download.svg deleted file mode 100644 index 2042789069..0000000000 --- a/public/img/icons/icon-download.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-filter-active.svg b/public/img/icons/icon-filter-active.svg deleted file mode 100644 index fc7621a4a9..0000000000 --- a/public/img/icons/icon-filter-active.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-filter.svg b/public/img/icons/icon-filter.svg deleted file mode 100644 index 13b1f14a1e..0000000000 --- a/public/img/icons/icon-filter.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-folder.svg b/public/img/icons/icon-folder.svg deleted file mode 100644 index 8c4231f9e8..0000000000 --- a/public/img/icons/icon-folder.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-manage.svg b/public/img/icons/icon-manage.svg deleted file mode 100644 index 3a42bf643d..0000000000 --- a/public/img/icons/icon-manage.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-mark-active.svg b/public/img/icons/icon-mark-active.svg deleted file mode 100644 index 645739717c..0000000000 --- a/public/img/icons/icon-mark-active.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-mark.svg b/public/img/icons/icon-mark.svg deleted file mode 100644 index f17fe1624e..0000000000 --- a/public/img/icons/icon-mark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-search-active.svg b/public/img/icons/icon-search-active.svg deleted file mode 100644 index 0c2eae940f..0000000000 --- a/public/img/icons/icon-search-active.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-search.svg b/public/img/icons/icon-search.svg deleted file mode 100644 index d38fe37069..0000000000 --- a/public/img/icons/icon-search.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-settings.svg b/public/img/icons/icon-settings.svg deleted file mode 100644 index e81bffeadb..0000000000 --- a/public/img/icons/icon-settings.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-upload-main-page.svg b/public/img/icons/icon-upload-main-page.svg deleted file mode 100644 index 552ba250d3..0000000000 --- a/public/img/icons/icon-upload-main-page.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-upload.svg b/public/img/icons/icon-upload.svg deleted file mode 100644 index 064980b5d4..0000000000 --- a/public/img/icons/icon-upload.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/icon-user-logout.svg b/public/img/icons/icon-user-logout.svg deleted file mode 100644 index da354847b1..0000000000 --- a/public/img/icons/icon-user-logout.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/icons/social/Github.js b/public/img/icons/social/Github.js new file mode 100644 index 0000000000..d91494e78f --- /dev/null +++ b/public/img/icons/social/Github.js @@ -0,0 +1,34 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const Github = ({size = 16}) => { + return ( + + + + + + + + + + + ) +} + +Github.propTypes = { + size: PropTypes.number, +} + +export default Github diff --git a/public/img/icons/social/Google.js b/public/img/icons/social/Google.js new file mode 100644 index 0000000000..dee900ead6 --- /dev/null +++ b/public/img/icons/social/Google.js @@ -0,0 +1,44 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const Google = ({size = 16}) => { + return ( + + + + + + + + + + + + + + ) +} + +Google.propTypes = { + size: PropTypes.number, +} + +export default Google diff --git a/public/img/icons/social/LinkedIn.js b/public/img/icons/social/LinkedIn.js new file mode 100644 index 0000000000..d17c0337cd --- /dev/null +++ b/public/img/icons/social/LinkedIn.js @@ -0,0 +1,32 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const LinkedIn = ({size = 16}) => { + return ( + + + + + + + + + + + ) +} + +LinkedIn.propTypes = { + size: PropTypes.number, +} + +export default LinkedIn diff --git a/public/img/icons/social/Meta.js b/public/img/icons/social/Meta.js new file mode 100644 index 0000000000..53948bf490 --- /dev/null +++ b/public/img/icons/social/Meta.js @@ -0,0 +1,59 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const Meta = ({size = 16}) => { + return ( + + + + + + + + + + + + + + + + + + ) +} + +Meta.propTypes = { + size: PropTypes.number, +} + +export default Meta diff --git a/public/img/icons/social/Microsoft.js b/public/img/icons/social/Microsoft.js new file mode 100644 index 0000000000..6467ce0d82 --- /dev/null +++ b/public/img/icons/social/Microsoft.js @@ -0,0 +1,32 @@ +import React from 'react' +import PropTypes from 'prop-types' + +const Microsoft = ({size = 16}) => { + return ( + + + + + + + + + + + + + + ) +} + +Microsoft.propTypes = { + size: PropTypes.number, +} + +export default Microsoft diff --git a/public/img/info.png b/public/img/info.png deleted file mode 100644 index af08cd56db..0000000000 Binary files a/public/img/info.png and /dev/null differ diff --git a/public/img/jobarchived.png b/public/img/jobarchived.png deleted file mode 100644 index 98557615a7..0000000000 Binary files a/public/img/jobarchived.png and /dev/null differ diff --git a/public/img/jobcancelled.png b/public/img/jobcancelled.png deleted file mode 100644 index 07e595ffca..0000000000 Binary files a/public/img/jobcancelled.png and /dev/null differ diff --git a/public/img/lexiqa-new-2_old.png b/public/img/lexiqa-new-2_old.png deleted file mode 100644 index fc7b226ad9..0000000000 Binary files a/public/img/lexiqa-new-2_old.png and /dev/null differ diff --git a/public/img/logo-drive-16.png b/public/img/logo-drive-16.png deleted file mode 100644 index d7cfffea65..0000000000 Binary files a/public/img/logo-drive-16.png and /dev/null differ diff --git a/public/img/logo_matecat_big.png b/public/img/logo_matecat_big.png deleted file mode 100644 index c3d343b8ad..0000000000 Binary files a/public/img/logo_matecat_big.png and /dev/null differ diff --git a/public/img/logo_matecat_big_translated.svg b/public/img/logo_matecat_big_translated.svg deleted file mode 100644 index cb1e651f8f..0000000000 --- a/public/img/logo_matecat_big_translated.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/logo_matecat_big_white.png b/public/img/logo_matecat_big_white.png deleted file mode 100644 index 32a3e4d3d9..0000000000 Binary files a/public/img/logo_matecat_big_white.png and /dev/null differ diff --git a/public/img/matecat_cat.svg b/public/img/matecat_cat.svg deleted file mode 100644 index 2b0513a76f..0000000000 --- a/public/img/matecat_cat.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/matecat_file_icons.png b/public/img/matecat_file_icons.png deleted file mode 100644 index 0b64c85d11..0000000000 Binary files a/public/img/matecat_file_icons.png and /dev/null differ diff --git a/public/img/matecat_file_icons2x.png b/public/img/matecat_file_icons2x.png deleted file mode 100644 index b6f476c0bf..0000000000 Binary files a/public/img/matecat_file_icons2x.png and /dev/null differ diff --git a/public/img/matecat_file_icons_ts.png b/public/img/matecat_file_icons_ts.png deleted file mode 100644 index 97a6199d2d..0000000000 Binary files a/public/img/matecat_file_icons_ts.png and /dev/null differ diff --git a/public/img/matecat_file_icons_ts2x.png b/public/img/matecat_file_icons_ts2x.png deleted file mode 100644 index 021b93db0e..0000000000 Binary files a/public/img/matecat_file_icons_ts2x.png and /dev/null differ diff --git a/public/img/matecat_smiling.png b/public/img/matecat_smiling.png deleted file mode 100644 index 4d5b7fe046..0000000000 Binary files a/public/img/matecat_smiling.png and /dev/null differ diff --git a/public/img/matecat_watch-left-border.png b/public/img/matecat_watch-left-border.png deleted file mode 100644 index 38c923805f..0000000000 Binary files a/public/img/matecat_watch-left-border.png and /dev/null differ diff --git a/public/img/matecat_watch.png b/public/img/matecat_watch.png deleted file mode 100644 index 3e419cca16..0000000000 Binary files a/public/img/matecat_watch.png and /dev/null differ diff --git a/public/img/offline2.png b/public/img/offline2.png deleted file mode 100644 index dd203fd77c..0000000000 Binary files a/public/img/offline2.png and /dev/null differ diff --git a/public/img/progressbar-green.gif b/public/img/progressbar-green.gif deleted file mode 100644 index 3dd5919327..0000000000 Binary files a/public/img/progressbar-green.gif and /dev/null differ diff --git a/public/img/progressbar.gif b/public/img/progressbar.gif deleted file mode 100644 index 1477bc7970..0000000000 Binary files a/public/img/progressbar.gif and /dev/null differ diff --git a/public/img/soft-return1.png b/public/img/soft-return1.png deleted file mode 100644 index aea9c45ba3..0000000000 Binary files a/public/img/soft-return1.png and /dev/null differ diff --git a/public/img/x.png b/public/img/x.png deleted file mode 100644 index 04eb500294..0000000000 Binary files a/public/img/x.png and /dev/null differ diff --git a/public/js/actions/CommentsActions.js b/public/js/actions/CommentsActions.js index d16e7859c7..34f9164f5e 100644 --- a/public/js/actions/CommentsActions.js +++ b/public/js/actions/CommentsActions.js @@ -24,7 +24,7 @@ const CommentsActions = { .then((resp) => { AppDispatcher.dispatch({ actionType: CommentsConstants.ADD_COMMENT, - comment: resp.data.entries.comment[0], + comment: resp.data.entries.comments[0], sid: sid, }) return resp @@ -43,7 +43,7 @@ const CommentsActions = { .then((resp) => { AppDispatcher.dispatch({ actionType: CommentsConstants.ADD_COMMENT, - comment: resp.data.entries.comment[0], + comment: resp.data.entries.comments[0], sid: sid, }) }) diff --git a/public/js/actions/QualityReportActions.js b/public/js/actions/QualityReportActions.js index cbe9ff5376..e7b9497205 100644 --- a/public/js/actions/QualityReportActions.js +++ b/public/js/actions/QualityReportActions.js @@ -23,6 +23,9 @@ let QualityReportActions = { }, getMoreQRSegments(filter, segmentId) { + AppDispatcher.dispatch({ + actionType: QRConstants.LOADING_MORE_SEGMENTS, + }) getQualityReportSegmentsFiles(filter, segmentId).then((response) => { if (response.segments && response.segments.length > 0) { AppDispatcher.dispatch({ diff --git a/public/js/actions/SegmentActions.js b/public/js/actions/SegmentActions.js index bbcd7b1b2e..4e2bc11632 100644 --- a/public/js/actions/SegmentActions.js +++ b/public/js/actions/SegmentActions.js @@ -603,24 +603,32 @@ const SegmentActions = { !config.isReview && config.job_completion_current_phase == 'revise' if (projectCompletionCheck) { - let message = - 'All segments are in read-only mode because this job is under review.' - - if (config.chunk_completion_undoable && config.last_completion_event_id) { - message = - message + - '

Re-Open Job

' - } + const showUndo = + config.chunk_completion_undoable && config.last_completion_event_id addNotification({ uid: 'translate-warning', autoDismiss: false, dismissable: true, position: 'tc', - text: message, + text: ( + <> + All segments are in read-only mode because this job is + under review. + {showUndo && ( +

+ + Re-Open Job + +

+ )} + + ), title: 'Warning', type: 'warning', - allowHtml: true, }) } if (TextUtils.justSelecting('readonly')) return diff --git a/public/js/api/downloadAnalysisReport/downloadAnalysisReport.js b/public/js/api/downloadAnalysisReport/downloadAnalysisReport.js new file mode 100644 index 0000000000..8e05280004 --- /dev/null +++ b/public/js/api/downloadAnalysisReport/downloadAnalysisReport.js @@ -0,0 +1,53 @@ +import {getMatecatApiDomain} from '../../utils/getMatecatApiDomain' + +/** + * Download Analysis Report + * + * @param {Object} options + * @param {string} options.idProject + * @param {string} options.password + * @param {string} [options.downloadType='XTRF'] + * @returns {Promise} + */ +export const downloadAnalysisReport = async ({ + idProject, + password, + downloadType = 'XTRF', +}) => { + const response = await fetch( + `${getMatecatApiDomain()}api/app/download-analysis-report`, + { + method: 'POST', + credentials: 'include', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: new URLSearchParams({ + id_project: idProject, + password, + download_type: downloadType, + }), + }, + ) + + if (!response.ok) return Promise.reject(response) + + const blob = await response.blob() + const contentDisposition = response.headers.get('Content-Disposition') + let filename = 'analysis-report.zip' + if (contentDisposition) { + const match = contentDisposition.match(/filename="?([^";\n]+)"?/) + if (match?.[1]) { + filename = match[1] + } + } + + const url = window.URL.createObjectURL(blob) + const link = document.createElement('a') + link.href = url + link.download = filename + document.body.appendChild(link) + link.click() + link.remove() + window.URL.revokeObjectURL(url) +} diff --git a/public/js/api/downloadAnalysisReport/index.js b/public/js/api/downloadAnalysisReport/index.js new file mode 100644 index 0000000000..acd3163130 --- /dev/null +++ b/public/js/api/downloadAnalysisReport/index.js @@ -0,0 +1 @@ +export * from './downloadAnalysisReport' diff --git a/public/js/components/activityLog/ColumnSorting.js b/public/js/components/activityLog/ColumnSorting.js index e1e7fea5ed..34cbb3188e 100644 --- a/public/js/components/activityLog/ColumnSorting.js +++ b/public/js/components/activityLog/ColumnSorting.js @@ -1,7 +1,7 @@ import React, {useContext, useRef} from 'react' import PropTypes from 'prop-types' import {ActivityLogContext} from './ActivityLogContext' -import IconDown from '../icons/IconDown' +import IconDown from '../../../img/icons/IconDown' export const ColumnSorting = ({ id, diff --git a/public/js/components/analyze/AnalyzeChunksResume.js b/public/js/components/analyze/AnalyzeChunksResume.js index 44d28d8dd1..33ac8e61ff 100644 --- a/public/js/components/analyze/AnalyzeChunksResume.js +++ b/public/js/components/analyze/AnalyzeChunksResume.js @@ -1,650 +1,253 @@ -import React, {useRef} from 'react' -import {isUndefined, size} from 'lodash' -import {each, map} from 'lodash/collection' -import {pick} from 'lodash/object' -import $ from 'jquery' -import {Popup} from 'semantic-ui-react' -import OutsourceContainer from '../outsource/OutsourceContainer' +import React, {useRef, useState, useEffect, useCallback} from 'react' import ModalsActions from '../../actions/ModalsActions' -import TranslatedIcon from '../../../img/icons/TranslatedIcon' -import Tooltip from '../common/Tooltip' import CommonUtils from '../../utils/commonUtils' -import { - ANALYSIS_STATUS, - ANALYSIS_WORKFLOW_TYPES, - UNIT_COUNT, -} from '../../constants/Constants' +import {ANALYSIS_STATUS} from '../../constants/Constants' import UserStore from '../../stores/UserStore' -import LabelWithTooltip from '../common/LabelWithTooltip' -import Split from '../../../img/icons/Split' -import Merge from '../../../img/icons/Merge' -import HelpCircle from '../../../img/icons/HelpCircle' - -class AnalyzeChunksResume extends React.Component { - constructor(props) { - super(props) - this.payableValues = [] - this.payableValuesChenged = [] - this.containers = {} - this.state = { - openOutsource: false, - outsourceJobId: null, - } - - this.jobLinkRef = {} - } - - showDetails = (idJob) => (evt) => { - if ($(evt.target).parents('.outsource-container').length === 0) { - evt.preventDefault() - evt.stopPropagation() - this.props.openAnalysisReport(idJob, true) - } - } - openSplitModal = (id) => (e) => { - e.stopPropagation() - e.preventDefault() - const {project} = this.props - let job = project.get('jobs').find((item) => { - return item.get('id') === id - }) - ModalsActions.openSplitJobModal(job, project, () => - window.location.reload(), - ) - } - - openMergeModal = (id) => (e) => { - e.stopPropagation() - e.preventDefault() - const {project} = this.props - let job = this.props.project.get('jobs').find((item) => { - return item.get('id') === id - }) - ModalsActions.openMergeModal(project.toJS(), job.toJS(), () => - window.location.reload(), - ) - } - - thereIsChunkOutsourced = () => { - const {idJob} = this.props - let outsourceChunk = this.props.project.get('jobs').find((item) => { - return !!item.get('outsource') && item.get('id') === idJob - }) - return !isUndefined(outsourceChunk) - } - - getTranslateUrl = (job, index) => { - let chunk_id = index ? index : job.get('id') - return ( - '/translate/' + - this.props.project.get('project_slug') + - '/' + - job.get('source') + - '-' + - job.get('target') + - '/' + - chunk_id + - '-' + - job.get('password') + - (index ? '#' + job.get('job_first_segment') : '') - ) - } +import {Button, BUTTON_SIZE, BUTTON_TYPE} from '../common/Button/Button' +import CompareTableHeader from './CompareTableHeader' +import SingleChunkJob from './SingleChunkJob' +import SplitChunkJob from './SplitChunkJob' + +const AnalyzeChunksResume = ({ + project, + status, + jobsAnalysis, + idJob, + openAnalysisReport, +}) => { + const payableValues = useRef({}) + const payableValuesChanged = useRef({}) + const containers = useRef({}) + const jobLinkRef = useRef({}) + + const [openOutsource, setOpenOutsource] = useState(false) + const [outsourceJobId, setOutsourceJobId] = useState(null) + + const showDetails = useCallback( + (jobId) => (evt) => { + if (!evt.target.closest('.outsource-container')) { + evt.preventDefault() + evt.stopPropagation() + openAnalysisReport(jobId, true) + } + }, + [openAnalysisReport], + ) - openOutsourceModal = (idJob, chunk) => (e) => { - const {status} = this.props - e.stopPropagation() - e.preventDefault() - if (status !== ANALYSIS_STATUS.DONE) return + const openSplitModal = useCallback( + (id) => (e) => { + e.stopPropagation() + e.preventDefault() + const job = project.get('jobs').find((item) => item.get('id') === id) + ModalsActions.openSplitJobModal(job, project, () => + window.location.reload(), + ) + }, + [project], + ) - const data = { - event: 'outsource_request', - } - CommonUtils.dispatchAnalyticsEvents(data) - if (chunk.outsource_available) { - this.setState({ - openOutsource: true, - outsourceJobId: idJob, - }) - } else { - window.open('https://translated.com/contact-us', '_blank') - } - } + const openMergeModal = useCallback( + (id) => (e) => { + e.stopPropagation() + e.preventDefault() + const job = project.get('jobs').find((item) => item.get('id') === id) + ModalsActions.openMergeModal(project.toJS(), job.toJS(), () => + window.location.reload(), + ) + }, + [project], + ) - closeOutsourceModal = () => { - this.setState({ - openOutsource: false, - outsourceJobId: null, - }) - } + const thereIsChunkOutsourced = useCallback(() => { + const outsourceChunk = project + .get('jobs') + .find((item) => !!item.get('outsource') && item.get('id') === idJob) + return outsourceChunk !== undefined + }, [project, idJob]) + + const handleOpenOutsourceModal = useCallback( + (jobId, chunk) => (e) => { + e.stopPropagation() + e.preventDefault() + if (status !== ANALYSIS_STATUS.DONE) return + + CommonUtils.dispatchAnalyticsEvents({event: 'outsource_request'}) + if (chunk.outsource_available) { + setOpenOutsource(true) + setOutsourceJobId(jobId) + } else { + window.open('https://translated.com/contact-us', '_blank') + } + }, + [status], + ) - checkPayableChanged = (idJob, payable) => { - if (this.payableValues[idJob] && payable !== this.payableValues[idJob]) { - this.payableValuesChenged[idJob] = true + const closeOutsourceModal = useCallback(() => { + setOpenOutsource(false) + setOutsourceJobId(null) + }, []) + + const checkPayableChanged = useCallback((jobId, payable) => { + if ( + payableValues.current[jobId] && + payable !== payableValues.current[jobId] + ) { + payableValuesChanged.current[jobId] = true } - this.payableValues[idJob] = payable - } - - copyJobLinkToClipboard = (jid) => (e) => { - e.stopPropagation() - this.jobLinkRef[jid].select() - this.jobLinkRef[jid].setSelectionRange(0, 99999) - document.execCommand('copy') - } + payableValues.current[jobId] = payable + }, []) + + const copyJobLinkToClipboard = useCallback( + (jid) => (e) => { + e.stopPropagation() + const url = jobLinkRef.current[jid]?.value + if (url) { + navigator.clipboard.writeText(url) + } + }, + [], + ) - goToTranslate = (chunk, index, e) => { + const goToTranslate = useCallback((chunk, index, e) => { e.preventDefault() e.stopPropagation() - const key = 'first_translate_click' + config.id_project + const key = `first_translate_click${config.id_project}` if (!sessionStorage.getItem(key)) { - //Track Translate click const userInfo = UserStore.getUser() if (userInfo) { - const event = { + CommonUtils.dispatchAnalyticsEvents({ event: 'open_job', userStatus: 'loggedUser', userId: userInfo.user.uid, idProject: parseInt(config.id_project), - } - CommonUtils.dispatchAnalyticsEvents(event) + }) sessionStorage.setItem(key, 'true') } } window.open(chunk.urls.t, '_blank') - } - - getDirectOpenButton = (chunk, index) => { - const {status} = this.props - return ( -
{ - this.goToTranslate(chunk, index, e) - }} + }, []) + + const getDirectOpenButton = useCallback( + (chunk, index) => ( +
- ) - } - - getOutsourceButton = (chunk, index) => { - return ( - - ) - } - - getResumeJobs = () => { - const {copyJobLinkToClipboard, thereIsChunkOutsourced} = this - const {status, jobsAnalysis} = this.props - - let buttonsClass = - status !== 'DONE' || thereIsChunkOutsourced() ? 'disabled' : '' - if (jobsAnalysis) { - return jobsAnalysis.map((job, indexJob) => { - if (job.chunks.length > 1) { - let chunksHtml = map(job.chunks, (chunkAnalysis, index) => { - chunkAnalysis.id = job.id - chunkAnalysis.outsource_available = job.outsource_available - chunkAnalysis.target_name = job.target_name - chunkAnalysis.source_name = job.source_name - index++ - - let openOutsource = - this.state.openOutsource && - this.state.outsourceJobId === job.id + '-' + index - let chunkJob = this.props.project.get('jobs').find((item) => { - return ( - item.get('id') === chunkAnalysis.id && - item.get('password') === chunkAnalysis.password - ) - }) - this.checkPayableChanged( - job.id + index, - chunkAnalysis.total_equivalent, - ) - - let openOutsourceClass = openOutsource ? 'openOutsource' : '' - const jidChunk = `${chunkAnalysis.id}-${index}` - - return ( -
-
-
{'Chunk ' + index}
-
- (this.jobLinkRef[jidChunk] = el)} - type="text" - readOnly - value={encodeURI(chunkAnalysis.urls.t)} - onClick={(e) => e.stopPropagation()} - /> - - - - } - /> -
-
-
-
-
{chunkAnalysis.total_raw}
-
- {this.props.project.get('analysis').get('workflow_type') === - ANALYSIS_WORKFLOW_TYPES.STANDARD && ( -
-
{chunkAnalysis.total_industry}
-
- )} -
- (this.containers[chunkAnalysis.id + index] = container) - } - > -
{chunkAnalysis.total_equivalent}
-
-
-
-
- {/*{self.getOpenButton(job.toJS(), job.id + '-' + index)}*/} - {this.getDirectOpenButton( - chunkAnalysis, - job.id + '-' + index, - )} -
- {!config.jobAnalysis && - this.getOutsourceButton( - chunkAnalysis, - chunkAnalysis.id + '-' + index, - )} -
- -
- ) - }) - - return ( -
-
-
-
-
-
- ID: {jobsAnalysis[indexJob].id} -
-
- - {jobsAnalysis[indexJob].source_name} - -
- -
- - {jobsAnalysis[indexJob].target_name} - -
-
-
- -
-
- - Merge -
-
-
- {chunksHtml} -
-
- ) - } else { - let chunkAnalysis = jobsAnalysis[indexJob].chunks[0] - chunkAnalysis.id = job.id - chunkAnalysis.outsource_available = job.outsource_available - chunkAnalysis.outsource = job.outsource - chunkAnalysis.target_name = job.target_name - chunkAnalysis.source_name = job.source_name - let total_raw = chunkAnalysis.total_raw - let standardWordCount = chunkAnalysis.total_industry - let chunkJob = this.props.project.get('jobs').find((item) => { - return ( - item.get('id') === chunkAnalysis.id && - item.get('password') === chunkAnalysis.password - ) - }) - let total_standard = standardWordCount ? standardWordCount : 0 - - let openOutsource = - this.state.openOutsource && - this.state.outsourceJobId === jobsAnalysis[indexJob].id - let openOutsourceClass = openOutsource ? 'openOutsource' : '' - - this.checkPayableChanged( - jobsAnalysis[indexJob].id, - chunkAnalysis.total_equivalent, - ) + + ), + [status, goToTranslate], + ) - return ( -
-
-
-
-
-
- ID: {jobsAnalysis[indexJob].id} -
-
- - {jobsAnalysis[indexJob].source_name} - -
- -
- - {jobsAnalysis[indexJob].target_name} - -
-
-
- - (this.jobLinkRef[jobsAnalysis[indexJob].id] = el) - } - onClick={(e) => e.stopPropagation()} - /> - -
-
-
-
- {/*
Total words:
*/} -
{total_raw}
+ const workflowType = project.get('analysis').get('workflow_type') + const countUnit = jobsAnalysis?.[0]?.count_unit + + const sharedProps = { + project, + status, + openOutsource, + outsourceJobId, + showDetails, + checkPayableChanged, + copyJobLinkToClipboard, + getDirectOpenButton, + closeOutsourceModal, + handleOpenOutsourceModal, + jobLinkRef, + containers, + } + + const renderJobs = () => { + if (!jobsAnalysis) { + return project.get('jobs').map((jobInfo, indexJob) => ( +
+ +
+
+
+
+
+
+
0
- {this.props.project.get('analysis').get('workflow_type') === - ANALYSIS_WORKFLOW_TYPES.STANDARD && ( -
- {/*
Other CAT tool
*/} -
{total_standard}
-
- )} -
- (this.containers[jobsAnalysis[indexJob].id] = container) - } - > - {/*
Weighted words:
*/} -
- {/**/} - {chunkAnalysis.total_equivalent} -
+
+
0
-
-
-
- {!config.jobAnalysis && config.splitEnabled ? ( -
- - Split -
- ) : null} - {/*{this.getOpenButton(job.toJS(), jobsAnalysis[indexJob].id)}*/} - {this.getDirectOpenButton(chunkAnalysis)} +
+
0
- {!config.jobAnalysis && - this.getOutsourceButton(chunkAnalysis, chunkAnalysis.id)}
+
- -
-
- ) - } - }) - } else { - return this.props.project.get('jobs').map((jobInfo, indexJob) => { - return ( -
-
-
-
-
- - {jobInfo.get('sourceTxt')} - -
- -
- - {jobInfo.get('targetTxt')} - -
-
-
-
-
0
-
-
-
0
-
-
-
0
-
-
-
- ) - }) +
+ )) } - } - openAnalysisReport = (e) => { - e.preventDefault() - e.stopPropagation() - this.props.openAnalysisReport() + return jobsAnalysis.map((job, indexJob) => { + const isSplit = job.chunks.length > 1 + + return ( +
+ + {isSplit ? ( + + ) : ( + + )} +
+ ) + }) } - componentDidUpdate() { - let changedData = pick(this.payableValuesChenged, (item) => { - return item === true - }) - if (size(changedData) > 0) { - each(changedData, (item, i) => { - this.containers[i].classList.add('updated-count') - setTimeout(() => { - this.containers[i].classList.remove('updated-count') - }, 400) + // Animate payable value changes on update + useEffect(() => { + const changed = payableValuesChanged.current + const changedKeys = Object.keys(changed).filter((key) => changed[key]) + + if (changedKeys.length > 0) { + changedKeys.forEach((key) => { + const el = containers.current[key] + if (el) { + el.classList.add('updated-count') + setTimeout(() => el.classList.remove('updated-count'), 400) + } }) } - } - - componentDidMount() { - if (this.props.status === 'DONE') { - each(self.containers, (item, i) => { - this.classList.add('updated-count') - setTimeout(() => { - this.containers[i].classList.remove('updated-count') - }, 400) + }) + + // Initial animation on mount when analysis is done + useEffect(() => { + if (status === 'DONE') { + Object.entries(containers.current).forEach(([, el]) => { + if (el) { + el.classList.add('updated-count') + setTimeout(() => el.classList.remove('updated-count'), 400) + } }) } - } + }, []) // eslint-disable-line react-hooks/exhaustive-deps - render() { - let showHideText = this.props.showAnalysis ? 'Hide Details' : 'Show Details' - let iconClass = this.props.showAnalysis ? 'open' : '' - let html = this.getResumeJobs() - return ( -
-
-
-
-
-

-

-
- {this.props.jobsAnalysis.length && - this.props.jobsAnalysis[0].count_unit === UNIT_COUNT.WORDS ? ( -
-
Total word count
-
- ) : ( -
-
Total character count
-
- )} - {this.props.project.get('analysis').get('workflow_type') === - ANALYSIS_WORKFLOW_TYPES.STANDARD && ( -
-
- Industry weighted - - - -
-
- )} -
-
Matecat weighted
-
-
-
-
-
{html}
- {this.props.jobsAnalysis ? ( -
-
-

{showHideText}

-
- -
-
-
- ) : null} -
- ) - } -} - -const OutsourceButton = ({chunk, index, openOutsourceModal, status}) => { - const outsourceButton = useRef() - return !chunk.outsource_available && - chunk.outsource_info?.custom_payable_rate ? ( -
- - Jobs created with custom billing models cannot be outsourced to - Translated. -
- In order to outsource this job to Translated, please recreate it - using Matecat's standard billing model -
- } - > -
- Buy Translation - - from - -
- -
- ) : ( -
- Buy Translation - - from - -
+ return ( +
{renderJobs()}
) } diff --git a/public/js/components/analyze/AnalyzeHeader.js b/public/js/components/analyze/AnalyzeHeader.js index 90a5d22e0b..99dc23f443 100644 --- a/public/js/components/analyze/AnalyzeHeader.js +++ b/public/js/components/analyze/AnalyzeHeader.js @@ -1,52 +1,122 @@ -import React from 'react' -import $ from 'jquery' -import {TransitionGroup, CSSTransition} from 'react-transition-group' +import React, {createRef, useRef, useEffect, useCallback} from 'react' import {ANALYSIS_STATUS} from '../../constants/Constants' -import {Popup} from 'semantic-ui-react' -import HelpCircle from '../../../img/icons/HelpCircle' +import {downloadAnalysisReport} from '../../api/downloadAnalysisReport' +import Tooltip, {TOOLTIP_POSITION} from '../common/Tooltip' +import {PROGRESS_BAR_SIZE, ProgressBar} from '../common/ProgressBar' +import {Badge, BADGE_TYPE} from '../common/Badge' +import Check from '../../../img/icons/Check' +import Download from '../../../img/icons/Download' +import InfoIcon from '../../../img/icons/InfoIcon' -class AnalyzeHeader extends React.Component { - constructor(props) { - super(props) - this.previousQueueSize = 0 - this.lastProgressSegments = 0 - this.noProgressTail = 0 - this.state = {} - } +const AnalyzeHeader = ({data, project}) => { + const previousQueueSizeRef = useRef(0) + const lastProgressSegmentsRef = useRef(0) + const noProgressTailRef = useRef(0) - getAnalysisStateHtml() { - this.showProgressBar = false + const showProgressBarRef = useRef(false) - let html = ( + const errorAnalysisHtml = useCallback(() => { + let analyzerNotRunningErrorString + if (config.support_mail.indexOf('@') === -1) { + analyzerNotRunningErrorString = ( +

+ The analysis seems not to be running. Contact {config.support_mail}. +

+ ) + } else { + analyzerNotRunningErrorString = ( +

+ The analysis seems not to be running. Contact{' '} + {config.support_mail}. +

+ ) + } + return (
-
-
-
Fast word counting...
+
+ Analysis status: + + + Failed +
+ + {analyzerNotRunningErrorString} +
) - let status = this.props.data.get('status') - let in_queue_before = parseInt(this.props.data.get('in_queue_before')) + }, []) + + const handleDownloadAnalysisReport = useCallback(() => { + downloadAnalysisReport({ + idProject: project.get('id'), + password: project.get('password'), + }).catch((error) => { + console.error('Error downloading analysis report:', error) + }) + }, [project]) + + const getProgressBar = useCallback(() => { + if (showProgressBarRef.current) { + const progress = + (data.get('segments_analyzed') / data.get('total_segments')) * 100 + return ( +
+ + Searching for TM Matches + + {' '} + ({data.get('segments_analyzed')} of{' '} + + + {' '} + {data.get('total_segments')}) + +
+ } + className={'analysis-progressbar'} + /> +
+ ) + } + return null + }, [data]) + + let getAnalysisStateHtml + getAnalysisStateHtml = useCallback(() => { + showProgressBarRef.current = false + + let html = ( +
+
+
Fast word counting...
+
+ ) + let status = data.get('status') + const in_queue_before = parseInt(data.get('in_queue_before')) if (status === 'DONE') { html = (
-
(this.containerAnalysisComplete = container)} - > -
- Analysis: - - complete - -
- - Download Analysis Report - +
+ Analysis status: + + + Complete +
+ + Download Analysis Report + +
) } else if ( @@ -56,42 +126,29 @@ class AnalyzeHeader extends React.Component { in_queue_before > 0 ) { if (config.daemon_warning) { - html = this.errorAnalysisHtml() + html = errorAnalysisHtml() } else if (in_queue_before > 0) { - if (this.previousQueueSize <= in_queue_before) { + if (previousQueueSizeRef.current <= in_queue_before) { html = (
-
-
- - Please wait...{' '} -

There are other projects in queue.

- -
+
+ + Please wait...{' '} +

There are other projects in queue.

+
) } else { - //decreasing ( TM analysis on another project ) html = (
-
-
- - Please wait... -

- There are still{' '} - - {this.props.data.get('in_queue_before')} - {' '} - segments in queue. -

- +
+
+ Please wait... +

+ There are still{' '} + {data.get('in_queue_before')}{' '} + segments in queue. +

) @@ -99,46 +156,36 @@ class AnalyzeHeader extends React.Component { } else { html = (
-
-
- - Please wait... -

There are other projects in queue.

- +
+
+ Please wait... +

There are other projects in queue.

) } - this.previousQueueSize = in_queue_before - } else if (status === 'FAST_OK' && in_queue_before === 0) { - if ( - this.lastProgressSegments !== this.props.data.get('segments_analyzed') - ) { - this.lastProgressSegments = this.props.data.get('segments_analyzed') - this.noProgressTail = 0 - this.showProgressBar = true - html = this.getProgressBarText() + previousQueueSizeRef.current = in_queue_before + } else if (status === ANALYSIS_STATUS.FAST_OK && in_queue_before === 0) { + if (lastProgressSegmentsRef.current !== data.get('segments_analyzed')) { + lastProgressSegmentsRef.current = data.get('segments_analyzed') + noProgressTailRef.current = 0 + showProgressBarRef.current = true + html = getProgressBar() } else { - this.noProgressTail++ - if (this.noProgressTail > 9) { - html = this.errorAnalysisHtml() + noProgressTailRef.current++ + if (noProgressTailRef.current > 9) { + html = errorAnalysisHtml() } } - } else if (status === 'NOT_TO_ANALYZE') { + } else if (status === ANALYSIS_STATUS.NOT_TO_ANALYZE) { html = (
-
-
- We are having issues with the analysis of this project. -
+
+ We are having issues with the analysis of this project.
- {' '} Please contact us at{' '} - {config.support_mail}{' '} + {config.support_mail} {' '} for more information.
@@ -154,104 +201,28 @@ class AnalyzeHeader extends React.Component { {config.support_mail} ) } + html = (
-
- - Ops.. we got an error. No text to translate in the file{' '} - {this.props.data.get('NAME')}. - -
- Contact {error} +
+ Ops.. we got an error. No text to translate in the file . +
Contact {error}
) } else { - // Unknown error :) - html = this.errorAnalysisHtml() + html = errorAnalysisHtml() } return html - } + }, [data, errorAnalysisHtml, getProgressBar]) - errorAnalysisHtml() { - let analyzerNotRunningErrorString - if (config.support_mail.indexOf('@') === -1) { - analyzerNotRunningErrorString = ( -

- The analysis seems not to be running. Contact {config.support_mail}. -

- ) - } else { - analyzerNotRunningErrorString = ( -

- The analysis seems not to be running. Contact{' '} - {config.support_mail}. -

- ) - } - return ( -
-
- {analyzerNotRunningErrorString} -
-
- ) - } - - getProgressBarText() { - return ( -
-
-
Searching for TM Matches
- - {' '} - ({this.props.data.get('segments_analyzed')} of{' '} - - - {' '} - {' ' + this.props.data.get('total_segments')}) - -
-
- ) - } - - getProgressBar() { - if (this.showProgressBar) { - let width = - (this.props.data.get('segments_analyzed') / - this.props.data.get('total_segments')) * - 100 + - '%' - return ( - - ) - } - return null - } - getSavingWorkCount() { - const data = this.props.data.toJS() - const {total_equivalent} = data + const getSavingWorkCount = useCallback(() => { + const dataJS = data.toJS() + const {total_equivalent} = dataJS let wcTime = total_equivalent / 3000 let wcUnit = 'day' if (wcTime > 0 && wcTime < 1) { - wcTime = wcTime * 8 //convert to hours (1 work day = 8 hours) + wcTime = wcTime * 8 wcUnit = 'hour' } if (wcTime > 0 && wcTime < 1) { @@ -262,8 +233,14 @@ class AnalyzeHeader extends React.Component { wcUnit = wcUnit + 's' } return Math.round(wcTime) + ' work ' + wcUnit - } - getWordscount() { + }, [data]) + + const getWordscount = useCallback(() => { + const status = data.get('status') + const inProgress = + status === ANALYSIS_STATUS.FAST_OK && + data.get('in_queue_before') === 0 && + lastProgressSegmentsRef.current !== data.get('total_segments') const tooltipText = ( Matecat suggests MT only when it helps thanks to a dynamic penalty @@ -276,164 +253,65 @@ class AnalyzeHeader extends React.Component { ) - let status = this.props.data.get('status') - let raw_words = this.props.data.get('total_raw'), + let raw_words = data.get('total_raw'), weightedWords = '' if ( (status === ANALYSIS_STATUS.NEW || status === '' || - this.props.data.get('in_queue_before') > 0) && + data.get('in_queue_before') > 0) && config.daemon_warning ) { - weightedWords = this.props.data.get('total_raw') + weightedWords = data.get('total_raw') } else { - if ( - status === ANALYSIS_STATUS.DONE || - this.props.data.get('total_equivalent') > 0 - ) { - weightedWords = this.props.data.get('total_equivalent') + if (status === ANALYSIS_STATUS.DONE || data.get('total_equivalent') > 0) { + weightedWords = data.get('total_equivalent') } if (status === ANALYSIS_STATUS.NOT_TO_ANALYZE) { - weightedWords = this.props.data.get('total_raw') + weightedWords = data.get('total_raw') } } let saving_perc = raw_words > 0 ? parseInt(((raw_words - weightedWords) / raw_words) * 100) + '%' : '0%' - if (saving_perc !== this.saving_perc_value) { - this.updatedSavingWords = true - } - this.saving_perc_value = saving_perc return ( -
-
-
(this.containerSavingWords = container)} - > -

-
{saving_perc}
-
- Saving on word count -
- {this.getSavingWorkCount()} at 3.000 w/day -
-
-

-

- Matecat gives you more matches than any other tool thanks to a - better integration of machine translation and translation - memories. - - - - } - /> -

+
+
+

{saving_perc}

+
+ Saving on word count +
+ {getSavingWorkCount()} at 3.000 w/day +
+ +
+ +
+
) - } - - downloadAnalysisReport() { - const pid = this.props.project.get('id') - const ppassword = this.props.project.get('password') - - const form = - '
' + - ' ' + - ' ' + - ' ' + - '
' - $('body').append(form) - $('#downloadAnalysisReportForm').submit() - } + }, [data, getSavingWorkCount]) - /** - * To add informations from the plugins - * @returns {string} - */ - moreProjectInfo() { - return '' - } + const analysisStateHtml = getAnalysisStateHtml() + const wordsCountHtml = getWordscount() + const projectName = project.get('name') ? project.get('name') : '' - componentDidUpdate() { - let self = this - if (this.updatedSavingWords) { - this.containerSavingWords.classList.add('updated-count') - this.updatedSavingWords = false - setTimeout(function () { - self.containerSavingWords.classList.remove('updated-count') - }, 400) - } - let status = this.props.data.get('status') - if (status === ANALYSIS_STATUS.DONE) { - setTimeout(function () { - self.containerAnalysisComplete?.classList.remove('hide') - }, 600) - } - } - - componentDidMount() { - let self = this - let status = this.props.data.get('status') - if (status === ANALYSIS_STATUS.DONE) { - this.containerSavingWords.classList.add('updated-count') - setTimeout(function () { - self.containerSavingWords.classList.remove('updated-count') - self.containerAnalysisComplete?.classList.remove('hide') - }, 400) - } - } - - shouldComponentUpdate(nextProps) { - return !nextProps.data.equals(this.props.data) - } - - render() { - let analysisStateHtml = this.getAnalysisStateHtml() - let wordsCountHtml = this.getWordscount() - let projectName = this.props.project.get('name') - ? this.props.project.get('name') - : '' - return ( -
-
-

Volume Analysis

-
-
- {' '} - {projectName}{' '} -
-
- {this.moreProjectInfo()} - {analysisStateHtml} + return ( +
+
+
+
{projectName}
- -
{wordsCountHtml}
- - {this.getProgressBar()} + {analysisStateHtml}
- ) - } + {wordsCountHtml} +
+ ) } -export default AnalyzeHeader +export default React.memo(AnalyzeHeader, (prevProps, nextProps) => { + return nextProps.data.equals(prevProps.data) +}) diff --git a/public/js/components/analyze/AnalyzeMain.js b/public/js/components/analyze/AnalyzeMain.js index d30f858f93..a9677442aa 100644 --- a/public/js/components/analyze/AnalyzeMain.js +++ b/public/js/components/analyze/AnalyzeMain.js @@ -4,9 +4,10 @@ import $ from 'jquery' import AnalyzeHeader from './AnalyzeHeader' import AnalyzeChunksResume from './AnalyzeChunksResume' import ProjectAnalyze from './ProjectAnalyze' +import {Button} from '../common/Button/Button' +import {SpinnerLoader} from '../common/SpinnerLoader' -const AnalyzeMain = ({volumeAnalysis, project, parentRef}) => { - const [showAnalysis, setShowAnalysis] = useState(false) +const AnalyzeMain = ({volumeAnalysis, project}) => { const [intervalId, setIntervalId] = useState() const [scrollTop, setScrollTop] = useState() const [jobToScroll, setJobToScroll] = useState() @@ -23,18 +24,15 @@ const AnalyzeMain = ({volumeAnalysis, project, parentRef}) => { const spinner = (
-
-
Loading Volume Analysis
-
+
) - const openAnalysisReport = (idJob, forceOpen) => { - setShowAnalysis((showAnalysis) => (forceOpen ? forceOpen : !showAnalysis)) + const openAnalysisReport = (idJob) => { setJobToScroll(idJob) } - const scrollStep = () => { + /* const scrollStep = () => { if (window.pageYOffset === 0) { clearInterval(intervalId) } @@ -55,59 +53,35 @@ const AnalyzeMain = ({volumeAnalysis, project, parentRef}) => { parentRef.current && parentRef.current.removeEventListener('scroll', handleScroll) } - }) + })*/ return ( -
+
{volumeAnalysis && project ? ( -
-
-
- +

Volume Analysis

+ + {volumeAnalysis.get('jobs').size > 0 ? ( + <> + -
- {volumeAnalysis.get('jobs').size > 0 ? ( - <> - {' '} - +
Job details
+ - {showAnalysis ? ( -
- {/* - */} - - {/* - */} -
- ) : null} - - ) : null} -
- {scrollTop > 200 ? ( - +
+ ) : null}
) : ( diff --git a/public/js/components/analyze/ChunkAnalyzeFile.js b/public/js/components/analyze/ChunkAnalyzeFile.js index fc72464f56..cda1524117 100644 --- a/public/js/components/analyze/ChunkAnalyzeFile.js +++ b/public/js/components/analyze/ChunkAnalyzeFile.js @@ -18,14 +18,11 @@ const ChunkAnalyzeFile = ({file, index, size, rates, workflowType}) => { className={`chunk-file-detail-background ${size === index ? 'last' : ''} `} />
-
-
- -
- - {file.name} - -
+ + + + {file.name} +
{matches.find((item) => item.type === 'new').equivalent}
diff --git a/public/js/components/analyze/ChunkAnalyzeHeader.js b/public/js/components/analyze/ChunkAnalyzeHeader.js index 803e2daf6d..2105ea9496 100644 --- a/public/js/components/analyze/ChunkAnalyzeHeader.js +++ b/public/js/components/analyze/ChunkAnalyzeHeader.js @@ -22,12 +22,11 @@ const ChunkAnalyzeHeader = ({ : '' }`} > - {showFiles &&
}
- {chunksSize > 1 ? '#' + index : ''} + {chunksSize > 1 ? 'Chunk ' + index : ''} Raw
@@ -118,12 +117,11 @@ const ChunkAnalyzeHeader = ({
) : workflowType === ANALYSIS_WORKFLOW_TYPES.MTQE ? (
- {showFiles &&
}
- {chunksSize > 1 ? '#' + index : ''} + {chunksSize > 1 ? 'Chunk ' + index : ''} Raw
diff --git a/public/js/components/analyze/CompareTableHeader.js b/public/js/components/analyze/CompareTableHeader.js new file mode 100644 index 0000000000..12e7d38f73 --- /dev/null +++ b/public/js/components/analyze/CompareTableHeader.js @@ -0,0 +1,91 @@ +import React, {createRef} from 'react' +import {ANALYSIS_WORKFLOW_TYPES, UNIT_COUNT} from '../../constants/Constants' +import HelpCircle from '../../../img/icons/HelpCircle' +import { + Button, + BUTTON_MODE, + BUTTON_SIZE, + BUTTON_TYPE, +} from '../common/Button/Button' +import Merge from '../../../img/icons/Merge' +import Split from '../../../img/icons/Split' +import ChevronRight from '../../../img/icons/ChevronRight' +import Tooltip from '../common/Tooltip' + +const CompareTableHeader = ({ + countUnit, + workflowType, + job, + thereIsChunkOutsourced, + status, + openSplitModal, + openMergeModal, + isSplit, +}) => { + return ( +
+
+
+ + {job.source} + + + + {job.target} + +
+
ID: {job.id}
+
+
+
+ {countUnit === UNIT_COUNT.WORDS + ? 'Total word count' + : 'Total character count'} +
+ {workflowType === ANALYSIS_WORKFLOW_TYPES.STANDARD && ( +
+ Industry weighted + +
+ +
+ +
+ )} +
Matecat weighted
+
+
+ {!config.jobAnalysis && config.splitEnabled ? ( + !isSplit ? ( + + ) : ( + + ) + ) : null} +
+
+ ) +} + +export default CompareTableHeader diff --git a/public/js/components/analyze/JobAnalyze.js b/public/js/components/analyze/JobAnalyze.js index 7c5900431d..6e3088cb99 100644 --- a/public/js/components/analyze/JobAnalyze.js +++ b/public/js/components/analyze/JobAnalyze.js @@ -1,25 +1,49 @@ -import React from 'react' +import React, {useCallback, useEffect, useRef} from 'react' import {map} from 'lodash/collection' import $ from 'jquery' import JobAnalyzeHeader from './JobAnalyzeHeader' import JobTableHeader from './JobTableHeader' import ChunkAnalyze from './ChunkAnalyze' -class JobAnalyze extends React.Component { - constructor(props) { - super(props) - this.showDetails = this.showDetails.bind(this) - setTimeout(() => this.showDetails()) - } +const JobAnalyze = ({chunks, jobInfo, project, idJob, status, jobToScroll}) => { + const containerRef = useRef(null) - getChunks() { - if (this.props.chunks) { - return map(this.props.jobInfo.chunks, (item, index) => { - let chunk = this.props.chunks.find( - (c) => c.get('password') === item.password, - ) + const scrollElement = useCallback(() => { + const itemComponent = containerRef.current + if (itemComponent) { + $('#analyze-container').animate( + { + scrollTop: $(itemComponent).offset().top - 200, + }, + 500, + ) + } else { + setTimeout(() => scrollElement(), 500) + } + }, []) + + const showDetails = useCallback(() => { + if (jobToScroll === idJob) { + scrollElement() + } + }, [jobToScroll, idJob, scrollElement]) + + useEffect(() => { + const timer = setTimeout(() => showDetails()) + return () => clearTimeout(timer) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + + useEffect(() => { + showDetails() + }, [jobToScroll, showDetails]) + + const getChunks = () => { + if (chunks) { + return map(jobInfo.chunks, (item, index) => { + let chunk = chunks.find((c) => c.get('password') === item.password) index++ - let job = this.props.project.get('jobs').find(function (jobElem) { + let job = project.get('jobs').find(function (jobElem) { return jobElem.get('password') === item.password }) @@ -28,15 +52,13 @@ class JobAnalyze extends React.Component { key={item.password} files={chunk.get('files').toJS()} job={job} - project={this.props.project} + project={project} total={item.summary} index={index} chunkInfo={item} - chunksSize={this.props.jobInfo.chunks.length} - rates={this.props.jobInfo.payable_rates} - workflowType={this.props.project - .get('analysis') - .get('workflow_type')} + chunksSize={jobInfo.chunks.length} + rates={jobInfo.payable_rates} + workflowType={project.get('analysis').get('workflow_type')} /> ) }) @@ -44,79 +66,23 @@ class JobAnalyze extends React.Component { return '' } - showDetails() { - if (this.props.jobToScroll == this.props.idJob && this.props.showAnalysis) { - this.scrollElement() - } - } + const iceMTRawWords = jobInfo.chunks.reduce((total, item) => { + const iceMT = item.summary.find((t) => t.type === 'ice_mt') + if (iceMT) return total + iceMT.raw + else return total + }, 0) - scrollElement() { - let itemComponent = this.container - let self = this - if (itemComponent) { - this.container.classList.add('show-details') - $('#analyze-container').animate( - { - scrollTop: $(itemComponent).offset().top - 200, - }, - 500, - ) - - // ReactDOM.findDOMNode(itemComponent).scrollIntoView({block: 'end'}); - setTimeout(function () { - self.container && self.container.classList.remove('show-details') - }, 1000) - } else { - setTimeout(function () { - self.scrollElement() - }, 500) - } - } - - shouldComponentUpdate() { - return true - } - - componentDidUpdate(prevProps) { - if (prevProps.jobToScroll !== this.props.jobToScroll) { - this.showDetails() - } - } - render() { - const iceMTRawWords = this.props.jobInfo.chunks.reduce((total, item) => { - const iceMT = item.summary.find((t) => t.type === 'ice_mt') - if (iceMT) return total + iceMT.raw - else total - }, 0) - return ( -
-
-
-
-
(this.container = container)} - > - - -
{this.getChunks()}
-
-
-
-
-
- ) - } + return ( +
+ + +
{getChunks()}
+
+ ) } export default JobAnalyze diff --git a/public/js/components/analyze/JobAnalyzeHeader.js b/public/js/components/analyze/JobAnalyzeHeader.js index 3a2c28b43f..0198b503fa 100644 --- a/public/js/components/analyze/JobAnalyzeHeader.js +++ b/public/js/components/analyze/JobAnalyzeHeader.js @@ -6,17 +6,13 @@ const JobAnalyzeHeader = ({jobInfo}) => { const totalWeighted = jobInfo.total_equivalent return (
-
-
- ID: {jobInfo.id} -
-
- {jobInfo.source_name} - - {jobInfo.target_name} -
+
ID: {jobInfo.id}
+
+ {jobInfo.source} + + {jobInfo.target}
-
+
{parseInt(totalWeighted)} {jobInfo.count_unit === UNIT_COUNT.WORDS diff --git a/public/js/components/analyze/OutsourceButton.js b/public/js/components/analyze/OutsourceButton.js new file mode 100644 index 0000000000..aba2f43888 --- /dev/null +++ b/public/js/components/analyze/OutsourceButton.js @@ -0,0 +1,51 @@ +import React, {createRef, useRef} from 'react' +import {ANALYSIS_STATUS} from '../../constants/Constants' +import TranslatedIcon from '../../../img/icons/TranslatedIcon' +import Tooltip from '../common/Tooltip' +import {Button, BUTTON_MODE, BUTTON_SIZE} from '../common/Button/Button' + +const OutsourceButton = ({chunk, index, openOutsourceModal, status}) => { + return !chunk.outsource_available && + chunk.outsource_info?.custom_payable_rate ? ( +
+ + Jobs created with custom billing models cannot be outsourced to + Translated. +
+ In order to outsource this job to Translated, please recreate it + using Matecat's standard billing model +
+ } + > + + +
+ ) : ( + + ) +} + +export default OutsourceButton diff --git a/public/js/components/analyze/ProjectAnalyze.js b/public/js/components/analyze/ProjectAnalyze.js index 5e0f162a9e..e9bb450de7 100644 --- a/public/js/components/analyze/ProjectAnalyze.js +++ b/public/js/components/analyze/ProjectAnalyze.js @@ -1,52 +1,40 @@ -import React from 'react' -import {isUndefined} from 'lodash' +import React, {memo} from 'react' import JobAnalyze from './JobAnalyze' -class ProjectAnalyze extends React.Component { - constructor(props) { - super(props) - } - - getJobs() { - let idArray = [] - return this.props.project.get('jobs').map((job) => { - const jobInfo = this.props.volumeAnalysis.find( - (item) => item.get('id') === job.get('id'), - ) - if ( - idArray.indexOf(job.get('id')) < 0 && - this.props.volumeAnalysis && - jobInfo - ) { - idArray.push(job.get('id')) - return ( - +const ProjectAnalyze = memo( + ({project, volumeAnalysis, status, jobToScroll}) => { + const getJobs = () => { + const idArray = [] + return project.get('jobs').map((job) => { + const jobInfo = volumeAnalysis.find( + (item) => item.get('id') === job.get('id'), ) - } - }) - } + if (idArray.indexOf(job.get('id')) < 0 && volumeAnalysis && jobInfo) { + idArray.push(job.get('id')) + return ( + + ) + } + }) + } - shouldComponentUpdate(nextProps) { - return ( - !nextProps.volumeAnalysis.equals(this.props.volumeAnalysis) || - nextProps.status !== this.props.status || - nextProps.jobToScroll !== this.props.jobToScroll - ) - } + return getJobs() + }, + (prevProps, nextProps) => + nextProps.volumeAnalysis.equals(prevProps.volumeAnalysis) && + nextProps.status === prevProps.status && + nextProps.jobToScroll === prevProps.jobToScroll, +) - render() { - return
{this.getJobs()}
- } -} +ProjectAnalyze.displayName = 'ProjectAnalyze' export default ProjectAnalyze diff --git a/public/js/components/analyze/SingleChunkJob.js b/public/js/components/analyze/SingleChunkJob.js new file mode 100644 index 0000000000..ee8763c08e --- /dev/null +++ b/public/js/components/analyze/SingleChunkJob.js @@ -0,0 +1,113 @@ +import React from 'react' +import OutsourceContainer from '../outsource/OutsourceContainer' +import { + ANALYSIS_STATUS, + ANALYSIS_WORKFLOW_TYPES, +} from '../../constants/Constants' +import {Button, BUTTON_MODE, BUTTON_SIZE} from '../common/Button/Button' +import OutsourceButton from './OutsourceButton' +import CopyButton from '../common/CopyButton/CopyButton' + +const SingleChunkJob = ({ + job, + project, + status, + openOutsource, + outsourceJobId, + showDetails, + copyJobLinkToClipboard, + checkPayableChanged, + getDirectOpenButton, + closeOutsourceModal, + handleOpenOutsourceModal, + jobLinkRef, + containers, +}) => { + const workflowType = project.get('analysis').get('workflow_type') + const rawChunk = job.chunks[0] + const chunkAnalysis = { + ...rawChunk, + id: job.id, + outsource_available: job.outsource_available, + outsource: job.outsource, + target_name: job.target_name, + source_name: job.source_name, + } + + const totalRaw = chunkAnalysis.total_raw + const totalStandard = chunkAnalysis.total_industry || 0 + const chunkJob = project + .get('jobs') + .find( + (item) => + item.get('id') === chunkAnalysis.id && + item.get('password') === chunkAnalysis.password, + ) + + const isOutsourceOpen = openOutsource && outsourceJobId === job.id + + checkPayableChanged(job.id, chunkAnalysis.total_equivalent) + + return ( + <> +
+
+
+ (jobLinkRef.current[job.id] = el)} + onClick={(e) => e.stopPropagation()} + /> + +
+
+
+
+
{totalRaw}
+
+ {workflowType === ANALYSIS_WORKFLOW_TYPES.STANDARD && ( +
+
{totalStandard}
+
+ )} +
(containers.current[job.id] = container)}> +
{chunkAnalysis.total_equivalent}
+
+
+
+ {!config.jobAnalysis && status === ANALYSIS_STATUS.DONE && ( + + )} + + {getDirectOpenButton(chunkAnalysis)} +
+
+ + + ) +} + +export default SingleChunkJob diff --git a/public/js/components/analyze/SplitChunkJob.js b/public/js/components/analyze/SplitChunkJob.js new file mode 100644 index 0000000000..d3496aea30 --- /dev/null +++ b/public/js/components/analyze/SplitChunkJob.js @@ -0,0 +1,121 @@ +import React from 'react' +import OutsourceContainer from '../outsource/OutsourceContainer' +import { + ANALYSIS_STATUS, + ANALYSIS_WORKFLOW_TYPES, +} from '../../constants/Constants' +import {Button, BUTTON_MODE, BUTTON_SIZE} from '../common/Button/Button' +import OutsourceButton from './OutsourceButton' +import CopyButton from '../common/CopyButton/CopyButton' + +const SplitChunkJob = ({ + job, + project, + status, + openOutsource, + outsourceJobId, + showDetails, + checkPayableChanged, + copyJobLinkToClipboard, + getDirectOpenButton, + closeOutsourceModal, + handleOpenOutsourceModal, + jobLinkRef, + containers, +}) => { + const workflowType = project.get('analysis').get('workflow_type') + + const chunksHtml = job.chunks.map((rawChunk, rawIndex) => { + const index = rawIndex + 1 + const chunkAnalysis = { + ...rawChunk, + id: job.id, + outsource_available: job.outsource_available, + target_name: job.target_name, + source_name: job.source_name, + } + + const isOutsourceOpen = + openOutsource && outsourceJobId === `${job.id}-${index}` + const chunkJob = project + .get('jobs') + .find( + (item) => + item.get('id') === chunkAnalysis.id && + item.get('password') === chunkAnalysis.password, + ) + checkPayableChanged(job.id + index, chunkAnalysis.total_equivalent) + + const jidChunk = `${chunkAnalysis.id}-${index}` + + return ( + <> +
+
+
{`Chunk ${index}`}
+
+ (jobLinkRef.current[jidChunk] = el)} + type="text" + readOnly + value={encodeURI(chunkAnalysis.urls.t)} + onClick={(e) => e.stopPropagation()} + /> + +
+
+
+
+
{chunkAnalysis.total_raw}
+
+ {workflowType === ANALYSIS_WORKFLOW_TYPES.STANDARD && ( +
+
{chunkAnalysis.total_industry}
+
+ )} +
+ (containers.current[chunkAnalysis.id + index] = container) + } + > +
{chunkAnalysis.total_equivalent}
+
+
+
+ {!config.jobAnalysis && status === ANALYSIS_STATUS.DONE && ( + + )} + + {getDirectOpenButton(chunkAnalysis, `${job.id}-${index}`)} +
+
+ + + ) + }) + + return chunksHtml +} + +export default SplitChunkJob diff --git a/public/js/components/common/Accordion/Accordion.js b/public/js/components/common/Accordion/Accordion.js index 745bf91d79..358671018d 100644 --- a/public/js/components/common/Accordion/Accordion.js +++ b/public/js/components/common/Accordion/Accordion.js @@ -3,6 +3,7 @@ import React, {useEffect, useLayoutEffect, useRef, useState} from 'react' import PropTypes from 'prop-types' import ChevronDown from '../../../../img/icons/ChevronDown' import useResizeObserver from '../../../hooks/useResizeObserver' +import styles from './Accordion.module.scss' export const Accordion = ({ children, @@ -54,16 +55,26 @@ export const Accordion = ({ else if (!expanded) panelRef.current.style.maxHeight = 0 }, [expanded, contentHeight]) + const titleClassName = [ + styles.title, + expanded && styles['title--expanded'], + ] + .filter(Boolean) + .join(' ') + return ( -
+
- {title} + {title}
-
-
{isRenderingContent && children}
+
+
+ {isRenderingContent && children} +
) diff --git a/public/js/components/common/Accordion/Accordion.module.scss b/public/js/components/common/Accordion/Accordion.module.scss new file mode 100644 index 0000000000..c9cab79271 --- /dev/null +++ b/public/js/components/common/Accordion/Accordion.module.scss @@ -0,0 +1,68 @@ +@use 'tokens/colors'; +@use 'commons/variables'; + +// CSS variable API — override from consumer context: +// --accordion-title-bg background of title bar +// --accordion-title-br border-radius when collapsed +// --accordion-title-expanded-br border-radius when expanded +// --accordion-title-border-top top border (for grouped stacks) +// --accordion-title-font-size (default: 12px) +// --accordion-title-font-weight (default: normal) +// --accordion-content-bg background of content panel +// --accordion-content-br border-radius of content panel +// --accordion-content-overflow overflow of content panel + +.component { + overflow: hidden; +} + +.title { + --accordion-title-bg: #{colors.$grey150}; + --accordion-title-br: #{variables.$border-radius-default}; + --accordion-title-expanded-br: #{variables.$border-radius-default} + #{variables.$border-radius-default} 0 0; + --accordion-title-border-top: none; + display: flex; + justify-content: space-between; + align-items: center; + padding: 14px 24px; + background-color: var(--accordion-title-bg); + border-radius: var(--accordion-title-br); + border-top: var(--accordion-title-border-top); + font-size: var(--accordion-title-font-size, 16px); + font-weight: var(--accordion-title-font-weight, normal); + cursor: pointer; + > svg { + transition-property: transform; + transition-duration: 0.3s; + transition-timing-function: ease-in-out; + } + + &--expanded { + border-radius: var(--accordion-title-expanded-br); + + > svg { + transform: rotateZ(180deg); + } + } +} + +.content { + --accordion-content-bg: #{colors.$grey100}; + --accordion-content-br: 0 0 #{variables.$border-radius-default} + #{variables.$border-radius-default}; + --accordion-content-overflow: hidden; + + max-height: 0; + transition-property: max-height; + transition-duration: 0.3s; + transition-timing-function: ease-in-out; + transform-origin: top center; + padding: 0 24px; + border-radius: var(--accordion-content-br); + background-color: var(--accordion-content-bg); + overflow: var(--accordion-content-overflow); +} +.insideContent { + padding: 12px 0; +} diff --git a/public/js/components/common/Badge/Badge.js b/public/js/components/common/Badge/Badge.js index 4803108a06..b6e90cd019 100644 --- a/public/js/components/common/Badge/Badge.js +++ b/public/js/components/common/Badge/Badge.js @@ -1,5 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' +import styles from './Badge.module.scss' export const BADGE_TYPE = { BLACK: 'black', @@ -8,6 +9,9 @@ export const BADGE_TYPE = { YELLOW: 'yellow', BLUE: 'blue', RED: 'red', + PURPLE: 'purple', + ORANGE: 'orange', + GREY: 'grey', } export const BADGE_MODE = { DEFAULT: 'default', @@ -24,7 +28,7 @@ export const Badge = ({ }) => { return ( {children} diff --git a/public/js/components/common/Badge/Badge.module.scss b/public/js/components/common/Badge/Badge.module.scss new file mode 100644 index 0000000000..41d6d3c836 --- /dev/null +++ b/public/js/components/common/Badge/Badge.module.scss @@ -0,0 +1,183 @@ +@use 'tokens/colors'; + +.badge-container { + display: inline-flex; + align-items: center; + gap: 4px; + margin: 0; + border-radius: 20px; + padding: 0 8px; + height: 24px; + font-size: 14px; + font-weight: 500; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 24px; + justify-content: center; + > svg { + flex-shrink: 0; + } +} + +// Type and Mode modifiers +.badge-black { + &.badge-default { + border: solid 1px colors.$grey400; + background-color: rgba(colors.$grey400, 0.3); + color: colors.$black; + } + + &.badge-full { + background-color: rgba(colors.$black, 0.72); + } + + &.badge-outline { + border: solid 1px colors.$black; + color: colors.$black; + } +} + +.badge-primary { + &.badge-default { + border: solid 1px colors.$blue200; + background-color: rgba(colors.$blue200, 0.24); + color: colors.$blue500; + } + + &.badge-full { + background-color: rgba(colors.$blue500, 0.72); + color: colors.$white; + } + + &.badge-outline { + border: solid 1px colors.$blue500; + color: colors.$blue500; + } +} + +.badge-green { + &.badge-default { + border: solid 1px colors.$green200; + background-color: rgba(colors.$green200, 0.24); + color: colors.$green700; + } + + &.badge-full { + background-color: rgba(colors.$green800, 0.72); + color: colors.$white; + } + + &.badge-outline { + border: solid 1px colors.$green800; + color: colors.$green700; + } +} + +.badge-yellow { + &.badge-default { + border: solid 1px colors.$orange100; + background-color: rgba(colors.$orange100, 0.15); + color: colors.$orange400; + } + + &.badge-full { + background-color: rgba(colors.$orange200, 0.72); + color: colors.$white; + } + + &.badge-outline { + border: solid 1px colors.$orange200; + color: colors.$orange400; + } +} + +.badge-blue { + &.badge-default { + border: solid 1px colors.$blue700; + background-color: rgba(colors.$blue700, 0.15); + color: colors.$blue700; + } + + &.badge-full { + background-color: rgba(colors.$blue700, 0.72); + color: colors.$white; + } + + &.badge-outline { + border: solid 1px colors.$blue700; + color: colors.$blue700; + } +} + +.badge-red { + &.badge-default { + border: solid 1px colors.$red500; + background-color: rgba(colors.$red500, 0.15); + color: colors.$red500; + } + + &.badge-full { + background-color: rgba(colors.$red500, 0.72); + color: colors.$white; + } + + &.badge-outline { + border: solid 1px colors.$red500; + color: colors.$red500; + } +} + +.badge-purple { + &.badge-default { + border: solid 1px colors.$purple500; + background-color: rgba(colors.$purple500, 0.15); + color: colors.$purple500; + } + + &.badge-full { + background-color: rgba(colors.$purple500, 0.72); + color: colors.$white; + } + + &.badge-outline { + border: solid 1px colors.$purple500; + color: colors.$purple500; + } +} + +.badge-orange { + &.badge-default { + border: solid 1px colors.$orange600; + background-color: rgba(colors.$orange600, 0.15); + color: colors.$orange600; + } + + &.badge-full { + background-color: rgba(colors.$orange600, 0.72); + color: colors.$white; + } + + &.badge-outline { + border: solid 1px colors.$orange600; + color: colors.$orange600; + } +} + +.badge-grey { + &.badge-default { + border: solid 1px colors.$grey500; + background-color: rgba(colors.$grey500, 0.15); + color: colors.$grey500; + } + + &.badge-full { + background-color: rgba(colors.$grey500, 0.72); + color: colors.$white; + } + + &.badge-outline { + border: solid 1px colors.$grey500; + color: colors.$grey500; + } +} diff --git a/public/js/components/common/Button/Button.js b/public/js/components/common/Button/Button.js index 2d798fb739..4b9361cd6f 100644 --- a/public/js/components/common/Button/Button.js +++ b/public/js/components/common/Button/Button.js @@ -1,23 +1,8 @@ import React from 'react' import PropTypes from 'prop-types' import {TOOLTIP_POSITION} from '../Tooltip' - -const mergeClassNames = (...args) => { - return ( - Array.prototype.slice - // eslint-disable-next-line no-undef - .call(args) - .reduce( - (classList, arg) => - typeof arg === 'string' || Array.isArray(arg) - ? classList.concat(arg) - : classList, - [], - ) - .filter(Boolean) - .join(' ') - ) -} +import classnames from 'classnames' +import styles from './Button.module.scss' export const BUTTON_TYPE = { DEFAULT: 'default', @@ -26,19 +11,24 @@ export const BUTTON_TYPE = { SUCCESS: 'success', WARNING: 'warning', CRITICAL: 'critical', + PURPLE: 'purple', + ICON: 'icon', } export const BUTTON_MODE = { BASIC: 'basic', OUTLINE: 'outline', GHOST: 'ghost', LINK: 'link', + OUTLINE_BG: 'outlineBg', } export const BUTTON_SIZE = { SMALL: 'small', STANDARD: 'standard', MEDIUM: 'medium', BIG: 'big', + ICON_XSMALL: 'iconXSmall', ICON_SMALL: 'iconSmall', + ICON_MEDIUM: 'iconMedium', ICON_STANDARD: 'iconStandard', ICON_BIG: 'iconBig', LINK_SMALL: 'linkSmall', @@ -74,15 +64,14 @@ export const Button = React.forwardRef( }, ref, ) => { - const defaultClassName = `button-component-container ${type} ${mode} ${size}` - const fullWidthClassName = fullWidth ? 'fullWidth' : '' - const activeClassName = active ? 'button--active' : '' - const waitingClassName = waiting ? 'waiting' : '' - const buttonClassName = mergeClassNames( - defaultClassName, - fullWidthClassName, - activeClassName, - waitingClassName, + const buttonClassName = classnames( + styles['button-component-container'], + styles[type], + styles[mode], + typeof size === 'string' && styles[size], + fullWidth && styles.fullWidth, + active && styles['button--active'], + waiting && styles.waiting, className, ) const style = {} @@ -114,9 +103,9 @@ export const Button = React.forwardRef( {/* { diff --git a/public/js/components/common/Checkbox.js b/public/js/components/common/Checkbox.js index 1ca9badcb4..14b6b12683 100644 --- a/public/js/components/common/Checkbox.js +++ b/public/js/components/common/Checkbox.js @@ -1,6 +1,7 @@ import React, {useRef, useEffect} from 'react' import PropTypes from 'prop-types' +import styles from './Checkbox.module.scss' export const CHECKBOX_STATE = { CHECKED: 'checked', @@ -54,9 +55,7 @@ export const Checkbox = ({ return ( <>
{value == CHECKBOX_STATE.CHECKED ? ( ) : value === CHECKBOX_STATE.INDETERMINATE ? ( ) : ( @@ -90,7 +89,7 @@ export const Checkbox = ({ {label && {label}}
- {error && {error}} + {error && {error}} ) } diff --git a/public/css/sass/components/common/Checkbox.scss b/public/js/components/common/Checkbox.module.scss similarity index 83% rename from public/css/sass/components/common/Checkbox.scss rename to public/js/components/common/Checkbox.module.scss index 6d56c6bef2..bd376ad73d 100644 --- a/public/css/sass/components/common/Checkbox.scss +++ b/public/js/components/common/Checkbox.module.scss @@ -1,4 +1,4 @@ -@use '../../commons/colors'; +@use 'tokens/colors'; .input-checkbox { position: relative; display: flex; @@ -30,24 +30,24 @@ position: relative; z-index: 1; flex-shrink: 0; - color: colors.$grey6; + color: colors.$grey700; } input[type='checkbox']:not(:disabled):checked, input[type='checkbox']:not(:disabled):indeterminate { & + svg { - color: colors.$translatedBlue; + color: colors.$blue500; } } input[type='checkbox']:disabled { & + svg { opacity: 0.4; - color: colors.$grey7; + color: colors.$grey400; } & ~ span { - color: colors.$grey7; + color: colors.$grey400; } } @@ -60,5 +60,5 @@ .errorMessage { margin-top: 8px; font-size: 12px; - color: colors.$redDefault; + color: colors.$red500; } diff --git a/public/js/components/common/CookieConsent.js b/public/js/components/common/CookieConsent.js index 66492bca94..a4c20bdca0 100644 --- a/public/js/components/common/CookieConsent.js +++ b/public/js/components/common/CookieConsent.js @@ -1,5 +1,6 @@ import React, {useState, useEffect} from 'react' import Cookies from 'js-cookie' +import styles from './CookieConsent.module.scss' const COOKIE_NAME = 'cookiebanner-accepted' const COOKIE_TTL_DAYS = 365 @@ -28,8 +29,8 @@ export const CookieConsent = () => { setTimeout(consent, 20000) return visible ? ( -
-
consent()}> +
+
consent()}> ✖
diff --git a/public/css/sass/components/common/CookieConsent.scss b/public/js/components/common/CookieConsent.module.scss similarity index 94% rename from public/css/sass/components/common/CookieConsent.scss rename to public/js/components/common/CookieConsent.module.scss index c6152c0bc1..f995435eb2 100644 --- a/public/css/sass/components/common/CookieConsent.scss +++ b/public/js/components/common/CookieConsent.module.scss @@ -4,7 +4,7 @@ right: 0px; height: auto; min-height: 21px; - z-index: 2147483647; + z-index: var(--z-tooltip); background: rgb(0, 0, 0); color: rgb(221, 221, 221); line-height: 21px; diff --git a/public/js/components/common/CopyButton/CopyButton.js b/public/js/components/common/CopyButton/CopyButton.js new file mode 100644 index 0000000000..dcc184aa72 --- /dev/null +++ b/public/js/components/common/CopyButton/CopyButton.js @@ -0,0 +1,61 @@ +import React, {useEffect, useRef, useState} from 'react' +import PropTypes from 'prop-types' +import {Button, BUTTON_MODE, BUTTON_SIZE, BUTTON_TYPE} from '../Button/Button' +import CopyIcon from '../../../../img/icons/CopyIcon' + +const CopyButton = ({onCopy}) => { + const [showFeedback, setShowFeedback] = useState(false) + const timeoutRef = useRef() + + useEffect(() => { + return () => clearTimeout(timeoutRef.current) + }, []) + + const handleClick = (e) => { + if (typeof onCopy === 'function') onCopy(e) + clearTimeout(timeoutRef.current) + setShowFeedback(true) + timeoutRef.current = setTimeout(() => setShowFeedback(false), 2000) + } + + return ( + + + {showFeedback && ( + + Copied to Clipboard! + + )} + + ) +} + +CopyButton.propTypes = { + onCopy: PropTypes.func.isRequired, +} + +export default CopyButton diff --git a/public/js/components/common/DropdownMenu/DropdownMenu.js b/public/js/components/common/DropdownMenu/DropdownMenu.js index ba45596f1f..63b6b8642f 100644 --- a/public/js/components/common/DropdownMenu/DropdownMenu.js +++ b/public/js/components/common/DropdownMenu/DropdownMenu.js @@ -6,6 +6,7 @@ import * as Popover from '@radix-ui/react-popover' import PropTypes from 'prop-types' import {Button, BUTTON_MODE, BUTTON_SIZE, BUTTON_TYPE} from '../Button/Button' +import styles from './DropdownMenu.module.scss' import ChevronDown from '../../../../img/icons/ChevronDown' import Check from '../../../../img/icons/Check' @@ -42,7 +43,7 @@ export const DropdownMenu = ({ const defaultToggleButtonProps = { type: BUTTON_TYPE.DEFAULT, mode: BUTTON_MODE.GHOST, - size: BUTTON_SIZE.ICON_SMALL, + size: BUTTON_SIZE.ICON_XSMALL, children: , ...toggleButtonProps, className: `${toggleButtonProps.className || ''} ${className}`, @@ -65,7 +66,7 @@ export const DropdownMenu = ({ return ( ) } else if (item.onChange) { @@ -84,7 +85,7 @@ export const DropdownMenu = ({ return ( {item.label} - + @@ -103,19 +104,19 @@ export const DropdownMenu = ({ return ( {item.label} - + - + {item.items.map((item, i) => renderItem(item, i, `2-${index}`))} @@ -125,16 +126,14 @@ export const DropdownMenu = ({ return (
{ if (item.disabled) { e.preventDefault() e.stopPropagation() } else { - item.onClick() + item.onClick(e) } setOpen(false) }} @@ -150,9 +149,7 @@ export const DropdownMenu = ({ return ( {items.map(renderItem)} - + @@ -196,12 +193,12 @@ export const DropdownMenu = ({ e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()} > {items.map(renderItem)} - +
diff --git a/public/css/sass/components/common/DropdownMenu.scss b/public/js/components/common/DropdownMenu/DropdownMenu.module.scss similarity index 81% rename from public/css/sass/components/common/DropdownMenu.scss rename to public/js/components/common/DropdownMenu/DropdownMenu.module.scss index 8b69abc7f6..d0a0924587 100644 --- a/public/css/sass/components/common/DropdownMenu.scss +++ b/public/js/components/common/DropdownMenu/DropdownMenu.module.scss @@ -1,6 +1,9 @@ -@use '../../commons/colors'; +@use 'tokens/colors'; .dropdownmenu { + > * { + box-sizing: border-box; + } display: flex; flex-direction: column; gap: 2px; @@ -9,7 +12,7 @@ max-height: var(--radix-dropdown-menu-content-available-height); overflow-y: auto; background-color: colors.$white; - color: colors.$grey6; + color: colors.$grey700; box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); animation: 0.3s cubic-bezier(0.77, 0, 0.175, 1) forwards dropdownmenu-fadeIn; z-index: 7; @@ -36,7 +39,7 @@ .dropdownmenu-separator { margin: 2px 0; height: 1px; - background-color: colors.$grey8; + background-color: colors.$grey200; } .dropdownmenu-item { @@ -50,7 +53,7 @@ width: 100%; padding: 8px; white-space: nowrap; - color: colors.$grey6; + color: colors.$grey700; cursor: pointer; outline: none; @@ -59,23 +62,23 @@ padding-right: 40px; } &.critical:not([data-disabled]) { - color: colors.$redDefault; + color: colors.$red500; &:hover { - background-color: rgba(colors.$redDefaultHover, 0.24); - color: colors.$redDefault; + background-color: rgba(colors.$red600, 0.24); + color: colors.$red500; } } &:not([data-disabled]):hover, &[data-highlighted]:not([data-disabled]), &:not([data-disabled]).selected, &[data-state='checked']:not([data-disabled]) { - background-color: colors.$grey5 !important; - color: colors.$darkBlue !important; + background-color: colors.$grey50 !important; + color: colors.$blue900 !important; } &[data-disabled], &[data-disabled]:hover { - color: colors.$grey7; + color: colors.$grey400; cursor: not-allowed; opacity: 0.4; } @@ -84,7 +87,7 @@ &:not([data-disabled]):hover, &[data-highlighted]:not([data-disabled]), &[data-state='open'] { - background-color: rgba(colors.$grey7, 0.06); + background-color: rgba(colors.$grey400, 0.06); color: black; } } diff --git a/public/js/components/common/EmailsBadge/EmailsBadge.js b/public/js/components/common/EmailsBadge/EmailsBadge.js index f8bc07ada5..0162476bc3 100644 --- a/public/js/components/common/EmailsBadge/EmailsBadge.js +++ b/public/js/components/common/EmailsBadge/EmailsBadge.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import {EMAIL_PATTERN} from '../../../constants/Constants' import {TAG_STATUS, Tag} from './Tag' import {isEqual} from 'lodash' +import styles from './EmailsBadge.module.scss' const EMAIL_SEPARATORS = [',', ';', ' '] export const SPECIALS_SEPARATORS = { @@ -213,7 +214,7 @@ export const EmailsBadge = ({ return (
handleClickOnChip(e, index)} > +
{emails.length === 0 && inputValue === '' ? ( - + {typeof placeholder === 'string' ? placeholder : 'john@email.com, federico@email.com, sara@email.com'} @@ -250,7 +251,7 @@ export const EmailsBadge = ({ ) : ( emails.map(renderChip) )} - +
{error && error.message && ( - {error.message} + {error.message} )}
) diff --git a/public/css/sass/components/common/EmailsBadge.scss b/public/js/components/common/EmailsBadge/EmailsBadge.module.scss similarity index 81% rename from public/css/sass/components/common/EmailsBadge.scss rename to public/js/components/common/EmailsBadge/EmailsBadge.module.scss index e7636a8644..c9664723f7 100644 --- a/public/css/sass/components/common/EmailsBadge.scss +++ b/public/js/components/common/EmailsBadge/EmailsBadge.module.scss @@ -1,4 +1,5 @@ -@use '../../commons/colors'; +@use 'tokens/colors'; +@use 'commons/variables'; .email-badge { display: flex; @@ -18,7 +19,7 @@ flex-wrap: wrap; align-items: flex-start; gap: 8px; - border-radius: 4px; + border-radius: variables.$border-radius-default; min-width: 0; width: 100%; min-height: 90px; @@ -27,7 +28,6 @@ outline: none; cursor: text; overflow-y: auto; - box-shadow: inset 0 1px 3px #ddd; border: 1px solid rgba(34, 36, 38, 0.15); background-color: white; } @@ -60,7 +60,7 @@ .email-badge-placeholder { position: absolute; inset: 12px; - color: colors.$grey7; + color: colors.$grey400; } .email-badge-item { @@ -69,7 +69,7 @@ } .email-badge-error { - color: colors.$redDefault; + color: colors.$red500; } .email-badge-tag { @@ -81,15 +81,15 @@ cursor: default; &.default { - background-color: colors.$grey7; + background-color: colors.$grey400; color: white; } &.selected { - background-color: colors.$translatedBlue; + background-color: colors.$blue500; color: colors.$white; } &.invalid { - background-color: colors.$redDefault; + background-color: colors.$red500; color: colors.$white; } } @@ -100,14 +100,14 @@ &:hover { background-color: transparent !important; - color: colors.$grey8 !important; + color: colors.$grey200 !important; } .selected & { - color: colors.$grey9 !important; + color: colors.$grey75 !important; &:hover { - color: colors.$grey8 !important; + color: colors.$grey200 !important; } } } diff --git a/public/js/components/common/EmailsBadge/Tag.js b/public/js/components/common/EmailsBadge/Tag.js index 2ef89f8ce2..9fdd166f86 100644 --- a/public/js/components/common/EmailsBadge/Tag.js +++ b/public/js/components/common/EmailsBadge/Tag.js @@ -1,7 +1,8 @@ import React from 'react' import PropTypes from 'prop-types' import Close from '../../../../img/icons/Close' -import IconClose from '../../icons/IconClose' +import IconClose from '../../../../img/icons/IconClose' +import styles from './EmailsBadge.module.scss' export const TAG_STATUS = { DEFAULT: 'default', @@ -21,9 +22,9 @@ export const Tag = ({ } return ( -
+
{children} -
+
diff --git a/public/js/components/common/FilenameLabel.js b/public/js/components/common/FilenameLabel.js index 4c81c5b3fe..91f93bbe57 100644 --- a/public/js/components/common/FilenameLabel.js +++ b/public/js/components/common/FilenameLabel.js @@ -1,5 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' +import styles from './FilenameLabel.module.scss' export const FilenameLabel = ({children, maxWidth, cssClassName = ''}) => { const [name, extension] = @@ -10,15 +11,14 @@ export const FilenameLabel = ({children, maxWidth, cssClassName = ''}) => { ] : [children, ''] - const className = `${cssClassName ? cssClassName + ' ' : ''}` return ( - - + + {name} {extension && ( - {extension} + {extension} )} ) diff --git a/public/css/sass/components/common/FilenameLabel.scss b/public/js/components/common/FilenameLabel.module.scss similarity index 100% rename from public/css/sass/components/common/FilenameLabel.scss rename to public/js/components/common/FilenameLabel.module.scss diff --git a/public/js/components/common/Input/Input.js b/public/js/components/common/Input/Input.js index 58e791daef..d442538a0c 100644 --- a/public/js/components/common/Input/Input.js +++ b/public/js/components/common/Input/Input.js @@ -3,8 +3,9 @@ import React, {useState} from 'react' import PropTypes from 'prop-types' import {Button, BUTTON_MODE, BUTTON_SIZE} from '../Button/Button' -import Hide from '../../icons/Hide' -import Show from '../../icons/Show' +import Hide from '../../../../img/icons/Hide' +import Show from '../../../../img/icons/Show' +import styles from './Input.module.scss' export const INPUT_SIZE = { DEFAULT: 'default', @@ -42,13 +43,9 @@ export const Input = React.forwardRef( const [isPasswordVisible, setPasswordVisibility] = useState(false) const togglePassword = () => setPasswordVisibility(!isPasswordVisible) - const containerClassName = `input-component ${ - size === INPUT_SIZE.COMPRESSED ? 'isCompressed' : '' - } ${className}` - const wrapperClassName = `input-component-wrapper ${icon ? 'withIcon' : ''}` - const inputClassName = `${type === INPUT_TYPE.PASSWORD ? 'isPassword' : ''} ${ - size === INPUT_SIZE.COMPRESSED ? 'isCompressed' : '' - } ${error ? 'hasError' : ''}` + const containerClassName = [styles['input-component'], size === INPUT_SIZE.COMPRESSED && styles.isCompressed, className].filter(Boolean).join(' ') + const wrapperClassName = [styles['input-component-wrapper'], icon && styles.withIcon].filter(Boolean).join(' ') + const inputClassName = [type === INPUT_TYPE.PASSWORD && styles.isPassword, size === INPUT_SIZE.COMPRESSED && styles.isCompressed, error && styles.hasError].filter(Boolean).join(' ') return (
@@ -79,9 +76,9 @@ export const Input = React.forwardRef( {type === INPUT_TYPE.PASSWORD && (
{error && error.message && ( - {error.message} + {error.message} )}
) diff --git a/public/css/sass/components/common/Input.scss b/public/js/components/common/Input/Input.module.scss similarity index 80% rename from public/css/sass/components/common/Input.scss rename to public/js/components/common/Input/Input.module.scss index b079d98822..4026c2fd07 100644 --- a/public/css/sass/components/common/Input.scss +++ b/public/js/components/common/Input/Input.module.scss @@ -1,4 +1,4 @@ -@use '../../commons/colors'; +@use 'tokens/colors'; .input-component { display: flex; @@ -22,11 +22,11 @@ position: relative; input { + box-sizing: border-box; width: 100%; height: 40px; - color: colors.$grey6; - border: 1px solid colors.$grey4; - padding: 12px; + color: colors.$grey700; + border: 1px solid colors.$grey100; box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.0784313725) inset; font-size: 16px; line-height: 24px; @@ -34,13 +34,15 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + border-radius: 8px; + padding: 8px 12px; &:autofill, &:-webkit-autofill { border: none !important; } &::placeholder { - color: colors.$grey7; + color: colors.$grey400; opacity: 1; } &:hover { @@ -65,16 +67,16 @@ &.hasError, &.hasError:hover, &.hasError:focus { - box-shadow: inset 0 0 0 2px colors.$redDefault !important; + box-shadow: inset 0 0 0 2px colors.$red500 !important; } &:disabled { - background-color: colors.$grey9; + background-color: colors.$grey75; box-shadow: none; - color: colors.$grey8; + color: colors.$grey200; cursor: not-allowed; &::placeholder { - color: colors.$grey8; + color: colors.$grey200; } } } @@ -89,7 +91,7 @@ position: absolute; top: 12px; left: 12px; - color: colors.$grey8; + color: colors.$grey200; cursor: pointer; pointer-events: none; } @@ -98,7 +100,7 @@ left: 10px; } input:disabled + svg { - color: colors.$grey8 !important; + color: colors.$grey200 !important; } } @@ -120,7 +122,7 @@ .input-component-errorMessage { font-size: 12px; - color: colors.$redDefault; + color: colors.$red500; text-align: left; padding-left: 2px; } diff --git a/public/js/components/common/InputField.js b/public/js/components/common/InputField.js index 41f4c9c76d..76a053cd70 100644 --- a/public/js/components/common/InputField.js +++ b/public/js/components/common/InputField.js @@ -1,6 +1,7 @@ -import React from 'react' +import React, {useState, useRef, useEffect, useCallback, useMemo} from 'react' import PropTypes from 'prop-types' import {debounce} from 'lodash/function' +import IconClose from '../../../img/icons/IconClose' const styleInput = { fontFamily: 'calibri, Arial, Helvetica, sans-serif', @@ -13,83 +14,109 @@ const styleInput = { display: 'flex', maxWidth: '150px', } -const styleContainer = { - position: 'relative', - marginRight: '5px', -} const styleIcon = { visibility: 'visible', right: '7px', cursor: 'pointer', } -export default class InputField extends React.Component { - constructor(props) { - super(props) - this.handleChange = this.handleChange.bind(this) - this.resetInput = this.resetInput.bind(this) - this.state = { - value: this.props.value ? this.props.value : '', - } - this.debouncedOnChange = debounce(() => { - this.props.onFieldChanged(this.state.value) - }, 500) - } - handleChange(event) { - this.setState({value: event.target.value}) - this.debouncedOnChange() - } +const InputField = (props) => { + const { + value: propValue, + onFieldChanged, + text, + type: propType, + placeholder, + name, + classes, + tabindex, + onKeyDown, + showCancel, + } = props - resetInput() { - this.setState({value: ''}) - this.props.onFieldChanged('') - } + const [value, setValue] = useState(propValue ? propValue : '') + const inputRef = useRef(null) + const valueRef = useRef(value) - componentDidMount() { - if (this.props.text) { - var event = new Event('input', {bubbles: true}) - this.input.dispatchEvent(event) - } - } + // Keep ref in sync with latest value + useEffect(() => { + valueRef.current = value + }, [value]) + + // Stable debounced callback that reads the latest value from ref + const debouncedOnChange = useMemo( + () => + debounce(() => { + onFieldChanged(valueRef.current) + }, 500), + [onFieldChanged], + ) + + // Handle input change + const handleChange = useCallback( + (event) => { + setValue(event.target.value) + debouncedOnChange() + }, + [debouncedOnChange], + ) - render() { - var type = 'text' + // Reset input + const resetInput = useCallback(() => { + debouncedOnChange.cancel() + setValue('') + onFieldChanged('') + }, [onFieldChanged, debouncedOnChange]) - if (this.props.type) { - type = this.props.type + // componentDidMount logic + useEffect(() => { + if (text && inputRef.current) { + const event = new Event('input', {bubbles: true}) + inputRef.current.dispatchEvent(event) } + }, [text]) - return ( -
- (this.input = input)} - /> - {this.props.showCancel && this.state.value.length > 0 ? ( -
- -
- ) : null} -
- ) - } + // Cleanup debounce on unmount + useEffect(() => { + return () => { + debouncedOnChange.cancel() + } + }, [debouncedOnChange]) + + const type = propType ? propType : 'text' + + return ( +
+ + {showCancel && value.length > 0 ? ( +
+ +
+ ) : null} +
+ ) } InputField.propTypes = { onFieldChanged: PropTypes.func.isRequired, } + +export default InputField diff --git a/public/js/components/common/InputField.test.js b/public/js/components/common/InputField.test.js index 2a148ef248..a71d23a51d 100644 --- a/public/js/components/common/InputField.test.js +++ b/public/js/components/common/InputField.test.js @@ -1,62 +1,57 @@ -import {render, waitFor, screen, act} from '@testing-library/react' +import {render, screen, act} from '@testing-library/react' import userEvent from '@testing-library/user-event' import React from 'react' import InputField from './InputField' test('works properly', async () => { + jest.useFakeTimers() + const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime}) const onFieldChanged = jest.fn() - act(() => { - render() - }) + + render() const elInput = screen.getByTestId('input') expect(elInput).toBeVisible() expect(elInput).toHaveValue('') expect(elInput).toHaveAttribute('type', 'text') - act(() => { - userEvent.type(elInput, 'something') - }) - await waitFor(() => { - expect(elInput).toHaveValue('something') - expect(screen.queryByTestId('reset-button')).not.toBeInTheDocument() - }) + await user.type(elInput, 'something') + + expect(elInput).toHaveValue('something') + expect(screen.queryByTestId('reset-button')).not.toBeInTheDocument() - await waitFor(() => { - expect(onFieldChanged).toHaveBeenCalledTimes(1) - expect(onFieldChanged).toHaveBeenCalledWith('something') + // Wait for debounce (500ms) + act(() => { + jest.advanceTimersByTime(600) }) + + expect(onFieldChanged).toHaveBeenCalledTimes(1) + expect(onFieldChanged).toHaveBeenCalledWith('something') + jest.useRealTimers() }) -test('supports reset button', () => { +test('supports reset button', async () => { + const user = userEvent.setup() const onFieldChanged = jest.fn() - act(() => { - render( - , - ) - }) + + render( + , + ) const elInput = screen.getByTestId('input') expect(elInput).toHaveValue('something') const elResetButton = screen.getByTestId('reset-button') expect(elResetButton).toBeVisible() - act(() => { - userEvent.click(elResetButton) - }) - setTimeout(() => { - expect(elResetButton).not.toBeInTheDocument() - expect(elInput).toHaveValue('') - expect(onFieldChanged).toHaveBeenCalledTimes(1) - expect(onFieldChanged).toHaveBeenCalledWith('') - }) + await user.click(elResetButton) + + expect(screen.queryByTestId('reset-button')).not.toBeInTheDocument() + expect(elInput).toHaveValue('') + expect(onFieldChanged).toHaveBeenCalledTimes(1) + expect(onFieldChanged).toHaveBeenCalledWith('') }) test('supports type prop', () => { diff --git a/public/js/components/common/JobProgressBar.js b/public/js/components/common/JobProgressBar.js index b3152af059..8318fd1af1 100644 --- a/public/js/components/common/JobProgressBar.js +++ b/public/js/components/common/JobProgressBar.js @@ -1,82 +1,109 @@ import React, {useRef} from 'react' import Tooltip from './Tooltip' import {isUndefined} from 'lodash' +import styles from './JobProgressBar.module.scss' + +const JobProgressBar = ({stats = {}, showPercent = true}) => { + const progressTooltipRef = useRef() + -const JobProgressBar = ({ - stats = {}, - onClickFn = () => {}, - showPercent = false, -}) => { - const approved2ndPassTooltip = useRef() - // const rejectedTooltip = useRef() - const approvedTooltip = useRef() - const translatedTooltip = useRef() - const draftTooltip = useRef() const {raw} = stats + const newWords = raw ? raw.new : undefined - const {total, translated, approved, approved2, draft} = raw || {} + + const {total, draft, new: newRaw, translated, approved, approved2} = raw || {} + + const unconfirmedPerc = ((draft + newRaw) * 100) / total const translatedPerc = (translated * 100) / total const approvedPerc = (approved * 100) / total const approved2Perc = (approved2 * 100) / total - const draftPerc = ((draft + newWords) * 100) / total - const totalPerc = ((total - draft - newWords) * 100) / total + + const translatedPercBar = (translated * 100) / total + const approvedPercBar = ((translated + approved) * 100) / total + const approved2PercBar = ((translated + approved + approved2) * 100) / total + + const totalPerc = Math.round(((total - draft - newWords) * 100) / total) + const analysisComplete = !isUndefined(stats.analysis_complete) ? stats.analysis_complete : true + return ( -
-
-
- {!stats || !analysisComplete ? ( -
- ) : ( +
+ 0 || + translatedPerc > 0 || + approvedPerc > 0 || + approved2Perc > 0) && ( +
+ {unconfirmedPerc > 0 && ( +
+ + + Unconfirmed + + {unconfirmedPerc.toFixed(1)}% +
+ )} + {translatedPerc > 0 && ( +
+ + + Translated + + {translatedPerc.toFixed(1)}% +
+ )} + {approvedPerc > 0 && ( +
+ + + Revise + + {approvedPerc.toFixed(1)}% +
+ )} + {approved2Perc > 0 && ( +
+ + + Revise 2 + + {approved2Perc.toFixed(1)}% +
+ )} +
+ ) + } + > +
+ {(stats || !analysisComplete) && ( <> - - - - - - - - - - - - + + + )}
- {showPercent && ( -
- - {totalPerc ? Math.round(totalPerc) : '-'} - - % -
- )} -
+ + + {showPercent && ( + + {!isNaN(totalPerc) && isFinite(totalPerc) ? `${totalPerc}%` : '-'} + + )}
) } diff --git a/public/js/components/common/JobProgressBar.module.scss b/public/js/components/common/JobProgressBar.module.scss new file mode 100644 index 0000000000..2e552f1448 --- /dev/null +++ b/public/js/components/common/JobProgressBar.module.scss @@ -0,0 +1,83 @@ +@use 'tokens/colors'; + +.container { + display: flex; + gap: 12px; + align-items: center; + width: 100%; + >div { + flex-grow: 1; + } +} + +.bar-wrapper { + position: relative; + display: flex; + min-width: 196px; + height: 8px; + border-radius: 10px; + background-color: colors.$black100; + overflow: hidden; +} + +.bar { + position: absolute; + height: 100%; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} + +.translated-bar { + z-index: 4; + background-color: colors.$blue500; +} + +.approved-bar { + z-index: 3; + background-color: colors.$green800; +} + +.approved-bar-2nd-pass { + z-index: 2; + background-color: colors.$purple500; +} + +.tooltip { + display: flex; + flex-direction: column; + + > div { + display: flex; + gap: 8px; + justify-content: space-between; + + > :first-child { + display: flex; + gap: 8px; + align-items: center; + } + } +} + +.quad { + width: 12px; + height: 12px; + border-radius: 4px; +} + +.unconfirmed-quad { + background-color: colors.$black100; + border: 1px solid colors.$grey200; +} + +.translated-quad { + background-color: colors.$blue500; +} + +.approved-quad { + background-color: colors.$green800; +} + +.approved2-quad { + background-color: colors.$purple500; +} diff --git a/public/js/components/common/LabelWithTooltip.js b/public/js/components/common/LabelWithTooltip.js index 7fc0d6c489..21889f3721 100644 --- a/public/js/components/common/LabelWithTooltip.js +++ b/public/js/components/common/LabelWithTooltip.js @@ -3,6 +3,7 @@ import {useRef} from 'react' import PropTypes from 'prop-types' import usePortal from '../../hooks/usePortal' import TEXT_UTILS from '../../utils/textUtils' +import styles from './LabelWithTooltip.module.scss' const LabelWithTooltip = ({ children, @@ -86,10 +87,10 @@ const LabelWithTooltip = ({ {shouldShowTooltip && tooltipCoords && (
-

{getContentText()}

+

{getContentText()}

 )} diff --git a/public/css/sass/components/common/LabelWithTooltip.scss b/public/js/components/common/LabelWithTooltip.module.scss similarity index 94% rename from public/css/sass/components/common/LabelWithTooltip.scss rename to public/js/components/common/LabelWithTooltip.module.scss index 679398ee05..541f887580 100644 --- a/public/css/sass/components/common/LabelWithTooltip.scss +++ b/public/js/components/common/LabelWithTooltip.module.scss @@ -1,4 +1,4 @@ -@use '../../commons/colors'; +@use 'tokens/colors'; .label-with-tooltip { position: absolute; @@ -39,7 +39,7 @@ padding: 4px 8px; background-color: colors.$white; box-shadow: 0 0 16px rgba(colors.$black, 0.25); - color: colors.$grey6; + color: colors.$grey700; white-space: normal; font-size: 14px; font-weight: normal; diff --git a/public/js/components/common/MenuButton/MenuButton.js b/public/js/components/common/MenuButton/MenuButton.js deleted file mode 100644 index 25e3cc4094..0000000000 --- a/public/js/components/common/MenuButton/MenuButton.js +++ /dev/null @@ -1,156 +0,0 @@ -import React, {useEffect, useLayoutEffect, useRef, useState} from 'react' -import PropTypes from 'prop-types' -import {MenuButtonItem} from './MenuButtonItem' -import usePortal from '../../../hooks/usePortal' -import IconDown from '../../icons/IconDown' - -export const MenuButton = ({ - label, - icon = , - onClick, - className = '', - dropdownClassName = '', - itemsTarget, - children, - disabled, - isVisibleRectArrow = true, -}) => { - const ItemsPortal = usePortal(itemsTarget ? itemsTarget : document.body) - const [itemsCoords, setItemsCoords] = useState() - const [isReversed, setIsReversed] = useState(false) - - const ref = useRef() - const portalRef = useRef() - const setPortalPosition = useRef() - setPortalPosition.current = (shouldUpdate) => { - if (shouldUpdate && !itemsCoords) return - - const rect = ref.current.getBoundingClientRect() - const difference = itemsTarget - ? itemsTarget.getBoundingClientRect().left /* - itemsTarget.offsetLeft */ - : 0 - const bottom = rect.y + rect.height + window.scrollY - const availableHeightDelta = Math.max( - 0, - bottom + - 200 + - 16 - - (itemsTarget?.offsetParent?.clientHeight || document.body.clientHeight), - ) - let result = { - left: rect.left - difference, - top: rect.y + rect.height, - } - - if (availableHeightDelta > 0) { - if (!isReversed) setIsReversed(true) - result.top = rect.y + window.scrollY - } else { - if (isReversed) setIsReversed(false) - result.top = bottom - } - - if (shouldUpdate) setItemsCoords(result) - else setItemsCoords((prevState) => (!prevState ? result : undefined)) - } - - useEffect(() => { - const handler = (e) => { - const target = ref.current?.children[1] - ? ref.current?.children[1] - : ref.current?.children[0] - - if (!target || !target.contains(e.target)) setItemsCoords(undefined) - } - const handlerResize = () => setPortalPosition.current(true) - - document.addEventListener('mouseup', handler) - window.addEventListener('resize', handlerResize) - - return () => { - document.removeEventListener('mouseup', handler) - window.removeEventListener('resize', handlerResize) - } - }, []) - - useLayoutEffect(() => { - if (portalRef.current) { - const {x, width} = portalRef.current.getBoundingClientRect() - - if (x + width > document.body.clientWidth) { - setItemsCoords((prevState) => ({ - ...prevState, - left: document.body.clientWidth - 10 - width, - })) - } - } - }, [itemsCoords]) - - const onShowingItems = (e) => { - const documentMouseUpEvent = new Event('mouseup', { - bubbles: true, - cancelable: false, - }) - if (!itemsCoords) document.dispatchEvent(documentMouseUpEvent) - - setPortalPosition.current() - e.stopPropagation() - } - - return ( -
-
- {label && ( - - )} - -
- {itemsCoords && ( - -
- {children.map((item) => item)} -
- - )} -
- ) -} - -const MenuButtonItemType = PropTypes.shape({ - type: PropTypes.oneOf([MenuButtonItem]), -}) - -MenuButton.propTypes = { - label: PropTypes.string, - icon: PropTypes.node, - onClick: PropTypes.func, - className: PropTypes.string, - itemsTarget: PropTypes.object, - children: PropTypes.arrayOf(MenuButtonItemType), - disabled: PropTypes.bool, - isVisibleRectArrow: PropTypes.bool, -} diff --git a/public/js/components/common/MenuButton/MenuButtonItem.js b/public/js/components/common/MenuButton/MenuButtonItem.js deleted file mode 100644 index 7e32592e12..0000000000 --- a/public/js/components/common/MenuButton/MenuButtonItem.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -export const MenuButtonItem = ({children, className, ...restProps}) => { - return ( - - ) -} diff --git a/public/js/components/common/MenuButton/index.js b/public/js/components/common/MenuButton/index.js deleted file mode 100644 index 6ddeec49b2..0000000000 --- a/public/js/components/common/MenuButton/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './MenuButton' diff --git a/public/js/components/common/NumericStepper/NumericStepper.js b/public/js/components/common/NumericStepper/NumericStepper.js index 758e1f57ba..f6f1e0546a 100644 --- a/public/js/components/common/NumericStepper/NumericStepper.js +++ b/public/js/components/common/NumericStepper/NumericStepper.js @@ -2,7 +2,8 @@ import React, {useEffect, useRef, useState} from 'react' import PropTypes from 'prop-types' import {Button, BUTTON_SIZE} from '../Button/Button' import {debounce} from 'lodash' -import IconDown from '../../icons/IconDown' +import IconDown from '../../../../img/icons/IconDown' +import styles from './NumericStepper.module.scss' export const NumericStepper = ({ value, @@ -61,7 +62,7 @@ export const NumericStepper = ({ const debounceSelectAll = debounce((event) => event.target.select(), 100) return ( -
+
key === 'Enter' && ref.current.blur()} /> -
+
@@ -153,4 +164,6 @@ Popover.propTypes = { verticalAlign: PropTypes.oneOf([...Object.values(POPOVER_VERTICAL_ALIGN)]), onClose: PropTypes.func, children: PropTypes.node, + forceOpenMenu: PropTypes.bool, + closeOnClickInside: PropTypes.bool, } diff --git a/public/css/sass/components/common/Popover.scss b/public/js/components/common/Popover/Popover.module.scss similarity index 87% rename from public/css/sass/components/common/Popover.scss rename to public/js/components/common/Popover/Popover.module.scss index 16dc255b0e..dc1b019b70 100644 --- a/public/css/sass/components/common/Popover.scss +++ b/public/js/components/common/Popover/Popover.module.scss @@ -1,4 +1,5 @@ -@use '../../commons/colors'; +@use 'tokens/colors'; +@use 'commons/variables'; .popover-component-container { position: relative; @@ -31,11 +32,11 @@ position: absolute; z-index: 4; - border-radius: 8px; + border-radius: variables.$border-radius-default; box-shadow: 0 0 24px rgba(colors.$black, 0.15); overflow: hidden; background-color: colors.$white; - border: 1px solid colors.$grey4; + border: 1px solid colors.$grey100; &.popover-component-left { left: 0; @@ -81,7 +82,7 @@ .popover-component-body { max-height: calc(100vh - 124px); padding: 0 16px; - color: colors.$grey6; + color: colors.$grey700; overflow-y: auto; } @@ -91,5 +92,5 @@ gap: 10px; padding: 10px; justify-content: flex-end; - // box-shadow: inset 0 1px 0 0 $grey8; + // box-shadow: inset 0 1px 0 0 $grey200; } diff --git a/public/js/components/common/ProgressBar.js b/public/js/components/common/ProgressBar.js index 0861ae6d46..38c08763cc 100644 --- a/public/js/components/common/ProgressBar.js +++ b/public/js/components/common/ProgressBar.js @@ -1,6 +1,7 @@ import React, {useRef, useState, useEffect} from 'react' import PropTypes from 'prop-types' +import styles from './ProgressBar.module.scss' export const PROGRESS_BAR_TYPE = { DEFAULT: 'default', @@ -33,9 +34,7 @@ export const ProgressBar = ({ const [internalProgress, setInternalProgress] = useState(progress) const progressWidth = Math.min((internalProgress * 100) / total, 100) - const barClassName = `progress-bar-container ${type} ${size} ${label ? 'withLabel' : ''} ${ - showWarning ? 'warning' : '' - } ${progressWidth === 100 ? 'complete' : ''} ${className}` + const barClassName = [styles['progress-bar-container'], styles[type], styles[size], label && styles.withLabel, showWarning && styles.warning, progressWidth === 100 && styles.complete, className].filter(Boolean).join(' ') // EFFECTS useEffect(() => { @@ -53,10 +52,10 @@ export const ProgressBar = ({ data-testid="progress-bar" > {label && ( -
+
{label} {showProgress && ( -
+
{progressType === PROGRESS_BAR_PROGRESS.PERCENT ? ( `${Math.floor(progressWidth)}%` ) : progress === 0 ? ( @@ -76,15 +75,15 @@ export const ProgressBar = ({ showProgress && progressType !== PROGRESS_BAR_PROGRESS.PERCENT && progress === 0 ? null : ( -
+
)} {!label && showProgress && ( -
+
{progressType === PROGRESS_BAR_PROGRESS.PERCENT ? ( `${Math.floor(progressWidth)}%` ) : progress === 0 ? ( diff --git a/public/css/sass/components/common/ProgressBar.scss b/public/js/components/common/ProgressBar.module.scss similarity index 78% rename from public/css/sass/components/common/ProgressBar.scss rename to public/js/components/common/ProgressBar.module.scss index 9ec1092816..e2043a71a2 100644 --- a/public/css/sass/components/common/ProgressBar.scss +++ b/public/js/components/common/ProgressBar.module.scss @@ -1,4 +1,4 @@ -@use '../../commons/colors'; +@use 'tokens/colors'; .progress-bar-container { display: flex; @@ -48,7 +48,7 @@ align-items: center; gap: 8px; width: 100%; - color: colors.$grey6; + color: colors.$grey700; .labelProgress { width: auto; } @@ -57,22 +57,22 @@ // Type modifiers &.default { .progress-wrapper { - background-color: rgba(colors.$translatedBlue, 0.24); + background-color: rgba(colors.$blue500, 0.24); } .progress { - background-color: colors.$translatedBlue; + background-color: colors.$blue500; } .labelProgress span { - color: colors.$translatedBlue; + color: colors.$blue500; } &.complete { .progress { - background-color: colors.$approvedGreen; + background-color: colors.$green800; } .labelProgress span { - color: colors.$approvedGreen; + color: colors.$green800; } } } -} \ No newline at end of file +} diff --git a/public/js/components/common/SegmentedControl.js b/public/js/components/common/SegmentedControl.js index b440fa62ac..e69ce5fceb 100644 --- a/public/js/components/common/SegmentedControl.js +++ b/public/js/components/common/SegmentedControl.js @@ -1,5 +1,6 @@ import React, {useRef, useState, useLayoutEffect, useCallback} from 'react' import PropTypes from 'prop-types' +import styles from './SegmentedControl.module.scss' export const SegmentedControl = ({ name, @@ -7,7 +8,7 @@ export const SegmentedControl = ({ options, selectedId, onChange, - className, + className = '', compact = false, disabled = false, autoWidth = false, @@ -43,7 +44,7 @@ export const SegmentedControl = ({
(optionRefs.current[index] = el) : undefined} - className="segmented-control__option" + className={styles.option} style={!autoWidth ? {width: `${optionWidth}%`} : undefined} > -
+
{label && } -
+
{options.map(renderOption)} diff --git a/public/js/components/common/SegmentedControl.module.scss b/public/js/components/common/SegmentedControl.module.scss new file mode 100644 index 0000000000..707495d79f --- /dev/null +++ b/public/js/components/common/SegmentedControl.module.scss @@ -0,0 +1,129 @@ +@use 'tokens/colors'; +@use 'commons/variables'; + +// CSS variable API — override from consumer context: +// --sc-bg background-color of the control track +// --sc-cursor-bg background-color of the cursor ::before +// --sc-checked-color label color when checked +// --sc-label-line-height default label line-height +// --sc-compact-line-height label line-height in compact mode +// --sc-cursor-padding padding of the cursor element +// --sc-label-font-size +// --sc-label-color unchecked label color +// --sc-label-padding label padding (overrides auto-width padding) +// --sc-label-text-transform +// --sc-height explicit height override for the control track +// --sc-padding explicit padding override for the control track +// --sc-cursor-height height of the cursor (default: 100%) +// --sc-cursor-margin-top +// --sc-cursor-before-width width of ::before (default: 100%) +// --sc-cursor-before-margin-left + +.wrapper { + --sc-bg: #{colors.$grey50}; + --sc-cursor-bg: #{colors.$blue500}; + --sc-checked-color: white; + --sc-label-line-height: 48px; + --sc-compact-line-height: 40px; + --sc-cursor-padding: 4px; + --sc-label-font-size: 16px; + --sc-label-color: #{colors.$grey500}; + --sc-label-padding: 0; + --sc-label-text-transform: none; + --sc-height: auto; + --sc-padding: 0; + --sc-cursor-height: 100%; + --sc-cursor-margin-top: 0; + --sc-cursor-before-width: 100%; + --sc-cursor-before-margin-left: 0; + + > label { + display: block; + margin-bottom: 8px; + cursor: default; + } +} + +.control { + position: relative; + display: flex; + user-select: none; + border-radius: variables.$border-radius-default; + background-color: var(--sc-bg); + height: var(--sc-height); + padding: var(--sc-padding); + + &--auto-width { + display: inline-flex; + } +} + +.option { + .control--auto-width & { + flex: 0 0 auto; + } +} + +.label { + position: relative; + z-index: 2; + display: flex; + align-items: center; + justify-content: center; + margin: 0; + font-size: var(--sc-label-font-size); + line-height: var(--sc-label-line-height); + color: var(--sc-label-color); + text-transform: var(--sc-label-text-transform); + transition: color 0.3s cubic-bezier(0.77, 0, 0.175, 1); + cursor: pointer; + gap: 4px; + + .control--auto-width & { + padding: var(--sc-label-padding, 0 16px); + white-space: nowrap; + } + + .control--compact & { + line-height: var(--sc-compact-line-height); + } + + .control--single & { + cursor: default; + } + + &:hover { + color: colors.$grey700; + } +} + +.input { + display: none; + + &:checked + .label { + color: var(--sc-checked-color); + } +} + +.cursor { + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: 1; + padding: var(--sc-cursor-padding); + height: var(--sc-cursor-height); + margin-top: var(--sc-cursor-margin-top); + box-sizing: border-box; + transition: transform 0.2s ease-out, width 0.2s ease-out; + + &::before { + content: ''; + display: block; + height: 100%; + width: var(--sc-cursor-before-width); + margin-left: var(--sc-cursor-before-margin-left); + border-radius: variables.$border-radius-default; + background-color: var(--sc-cursor-bg); + } +} diff --git a/public/js/components/common/Select.js b/public/js/components/common/Select.js index c3ccfabb02..21101b1b09 100644 --- a/public/js/components/common/Select.js +++ b/public/js/components/common/Select.js @@ -12,24 +12,8 @@ import TEXT_UTILS from '../../utils/textUtils' import ChevronDown from '../../../img/icons/ChevronDown' import Tooltip from './Tooltip' import usePortal from '../../hooks/usePortal' -import IconClose from '../icons/IconClose' - -const mergeClassNames = (...args) => { - return ( - Array.prototype.slice - // eslint-disable-next-line no-undef - .call(args) - .reduce( - (classList, arg) => - typeof arg === 'string' || Array.isArray(arg) - ? classList.concat(arg) - : classList, - [], - ) - .filter(Boolean) - .join(' ') - ) -} +import IconClose from '../../../img/icons/IconClose' +import classnames from 'classnames' export const Select = ({ className, label, @@ -276,7 +260,7 @@ export const Select = ({ const inputMultipleCLassName = multipleSelect !== 'off' ? 'select--is-multiple' : '' - return mergeClassNames( + return classnames( defaultClassName, inputPlaceholderClassName, inputIsFocusedClassName, @@ -365,7 +349,7 @@ export const Select = ({
) : undefined} - {renderSelection()} + {renderSelection()}
), ) jest.mock('../../../img/icons/ChevronDown', () => () => null) -jest.mock('../icons/IconClose', () => () => null) +jest.mock('../../../img/icons/IconClose', () => () => null) jest.mock('../../utils/textUtils', () => ({ __esModule: true, default: {isContentTextEllipsis: jest.fn(() => false)}, diff --git a/public/js/components/common/SpinnerLoader.js b/public/js/components/common/SpinnerLoader.js new file mode 100644 index 0000000000..323307e20f --- /dev/null +++ b/public/js/components/common/SpinnerLoader.js @@ -0,0 +1,29 @@ +import PropTypes from 'prop-types' +import React from 'react' +import styles from './SpinnerLoader.module.scss' + +export const SPINNER_LOADER_SIZE = { + SMALL: 'small', + MEDIUM: 'medium', + LARGE: 'large', +} + +export const SpinnerLoader = ({ + label, + size = SPINNER_LOADER_SIZE.LARGE, + className, +}) => { + return ( +
+ {label ?? 'Loading'} +
+ ) +} + +SpinnerLoader.propTypes = { + label: PropTypes.string, + size: PropTypes.oneOf(Object.values(SPINNER_LOADER_SIZE)), + className: PropTypes.string, +} diff --git a/public/js/components/common/SpinnerLoader.module.scss b/public/js/components/common/SpinnerLoader.module.scss new file mode 100644 index 0000000000..fd553d8725 --- /dev/null +++ b/public/js/components/common/SpinnerLoader.module.scss @@ -0,0 +1,77 @@ +@use 'tokens/colors'; + +.spinner-loader { + position: fixed; + left: 50%; + top: 50%; + color: rgba(0, 0, 0, 0.87); + transform: translate(-50%, -50%); + + > span { + display: block; + } + + &::before { + position: absolute; + content: ''; + top: 0; + left: 50%; + border-radius: 50%; + border: 4px solid rgba(0, 0, 0, 0.1); + } + + &::after { + position: absolute; + content: ''; + top: 0; + left: 50%; + animation: loader 0.6s infinite linear; + border: 4px solid colors.$black; + border-radius: 50%; + box-shadow: 0 0 0 1px transparent; + + border-left-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + } +} + +.spinner-loader-size-small { + > span { + margin-top: 25px; + font-size: 12px; + } + + &::before, + &::after { + width: 24px; + height: 24px; + margin: 0 0 0 -12px; + } +} +.spinner-loader-size-medium { + > span { + margin-top: 50px; + font-size: 16px; + } + + &::before, + &::after { + width: 42px; + height: 42px; + margin: 0 0 0 -21px; + } +} +.spinner-loader-size-large { + > span { + margin-top: 85px; + font-size: 24px; + } + + &::before, + &::after { + width: 74px; + height: 74px; + margin: 0 0 0 -37px; + } +} diff --git a/public/js/components/common/Switch.js b/public/js/components/common/Switch.js index e72f2b165e..611de2bf3a 100644 --- a/public/js/components/common/Switch.js +++ b/public/js/components/common/Switch.js @@ -1,5 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' +import styles from './Switch.module.scss' const Switch = ({ name, @@ -19,8 +20,8 @@ const Switch = ({ } return ( -
-
{content} @@ -125,7 +135,7 @@ const Tooltip = ({
{content} diff --git a/public/css/sass/components/common/Tooltip.scss b/public/js/components/common/Tooltip.module.scss similarity index 95% rename from public/css/sass/components/common/Tooltip.scss rename to public/js/components/common/Tooltip.module.scss index c9cd6df9c0..2f9a62568e 100644 --- a/public/css/sass/components/common/Tooltip.scss +++ b/public/js/components/common/Tooltip.module.scss @@ -1,13 +1,13 @@ -@use "../../commons/colors"; +@use 'tokens/colors'; .tooltip-container { position: absolute; z-index: 12; - border-radius: 4px; + border-radius: 8px; padding: 5px 10px; background-color: colors.$white; box-shadow: 0 0 16px rgba(colors.$black, 0.25); - color: colors.$grey6; + color: colors.$grey700; pointer-events: none; white-space: normal; text-align: left; diff --git a/public/js/components/common/VirtualList/Rows/RowSegment.js b/public/js/components/common/VirtualList/Rows/RowSegment.js index 1ce386199c..a5442e29ee 100644 --- a/public/js/components/common/VirtualList/Rows/RowSegment.js +++ b/public/js/components/common/VirtualList/Rows/RowSegment.js @@ -210,12 +210,11 @@ export const ProjectBar = ({segment, files, sideOpen, isSticky, listRef}) => {
- - {file.file_name} - + + {CommonUtils.getFileIcon(fileType[0])} + + {file.file_name} +
) : null} {file && file.weighted_words > 0 ? ( diff --git a/public/js/components/createProject/HomePageSection.js b/public/js/components/createProject/HomePageSection.js index fbee9eca17..f4ee682bc2 100644 --- a/public/js/components/createProject/HomePageSection.js +++ b/public/js/components/createProject/HomePageSection.js @@ -3,7 +3,7 @@ import {Button, BUTTON_SIZE, BUTTON_TYPE} from '../common/Button/Button' export const HomePageSection = () => { return (
-
+

Why Choose Us

diff --git a/public/js/components/createProject/TmGlossarySelect.js b/public/js/components/createProject/TmGlossarySelect.js index fb2edbbef1..7bd4c82177 100644 --- a/public/js/components/createProject/TmGlossarySelect.js +++ b/public/js/components/createProject/TmGlossarySelect.js @@ -5,6 +5,7 @@ import {CreateProjectContext} from './CreateProjectContext' import {orderTmKeys} from '../settingsPanel/Contents/TranslationMemoryGlossaryTab' import {ApplicationWrapperContext} from '../common/ApplicationWrapper/ApplicationWrapperContext' import HelpCircle from '../../../img/icons/HelpCircle' +import IconAdd from '../../../img/icons/IconAdd' export const TmGlossarySelect = () => { const { @@ -88,7 +89,7 @@ export const TmGlossarySelect = () => { }} > CREATE RESOURCE - + ), diff --git a/public/js/components/createProject/UploadFileLocal.js b/public/js/components/createProject/UploadFileLocal.js index 082fca0b10..f6f93b14c1 100644 --- a/public/js/components/createProject/UploadFileLocal.js +++ b/public/js/components/createProject/UploadFileLocal.js @@ -3,8 +3,8 @@ import {Button, BUTTON_SIZE, BUTTON_TYPE} from '../common/Button/Button' import {DeleteIcon} from '../segments/SegmentFooterTabGlossary/GlossaryConstants' import FileUploadIconBig from '../../../img/icons/FileUploadIconBig' import CommonUtils from '../../utils/commonUtils' -import IconAdd from '../icons/IconAdd' -import IconClose from '../icons/IconClose' +import IconAdd from '../../../img/icons/IconAdd' +import IconClose from '../../../img/icons/IconClose' import {PROGRESS_BAR_SIZE, ProgressBar} from '../common/ProgressBar' import {getPrintableFileSize} from './UploadFileUtils' import {CreateProjectContext} from './CreateProjectContext' @@ -138,7 +138,7 @@ function FileItem({file: f, onDelete}) { return (
- + {CommonUtils.getFileIcon(f.ext)} {f.name}
{f.error && ( diff --git a/public/js/components/createProject/UploadFileLocal.test.js b/public/js/components/createProject/UploadFileLocal.test.js index 3663fcb4e3..1390d017e2 100644 --- a/public/js/components/createProject/UploadFileLocal.test.js +++ b/public/js/components/createProject/UploadFileLocal.test.js @@ -29,7 +29,7 @@ jest.mock('../../actions/CreateProjectActions', () => ({ })) jest.mock('../../utils/commonUtils', () => ({ - getIconClass: jest.fn(() => 'extdoc'), + getFileIcon: jest.fn(() => null), dispatchCustomEvent: jest.fn(), })) diff --git a/public/js/components/createProject/UploadGdrive.js b/public/js/components/createProject/UploadGdrive.js index 63836ce8f8..aa339cc423 100644 --- a/public/js/components/createProject/UploadGdrive.js +++ b/public/js/components/createProject/UploadGdrive.js @@ -3,12 +3,13 @@ import CommonUtils from '../../utils/commonUtils' import {getPrintableFileSize} from './UploadFileUtils' import {Button, BUTTON_SIZE, BUTTON_TYPE} from '../common/Button/Button' import {DeleteIcon} from '../segments/SegmentFooterTabGlossary/GlossaryConstants' -import IconClose from '../icons/IconClose' +import IconClose from '../../../img/icons/IconClose' import {usePrevious} from '../../hooks/usePrevious' import {CreateProjectContext} from './CreateProjectContext' import DriveIcon from '../../../img/icons/DriveIcon' import {useGDrivePicker} from './hooks/useGDrivePicker' import {useGDriveFiles} from './hooks/useGDriveFiles' +import {SpinnerLoader} from '../common/SpinnerLoader' export const UploadGdrive = () => { const { @@ -96,9 +97,7 @@ export const UploadGdrive = () => { function LoadingOverlay() { return (
-
-
Uploading Files
-
+
) } @@ -109,7 +108,7 @@ function GDriveFileList({files, onDelete}) { {files.map((f, idx) => (
- + {CommonUtils.getFileIcon(f.ext)} {f.name}
{getPrintableFileSize(f.size)}
diff --git a/public/js/components/createProject/UploadGdrive.test.js b/public/js/components/createProject/UploadGdrive.test.js index 67e0c7e48a..b5f1d44b59 100644 --- a/public/js/components/createProject/UploadGdrive.test.js +++ b/public/js/components/createProject/UploadGdrive.test.js @@ -38,7 +38,7 @@ jest.mock('../../stores/UserStore', () => ({ updateConnectedService: jest.fn(), })) jest.mock('../../utils/commonUtils', () => ({ - getIconClass: jest.fn(() => 'extdoc'), + getFileIcon: jest.fn(() => 'extdoc'), dispatchCustomEvent: jest.fn(), })) jest.mock('../../../img/icons/DriveIcon', () => { diff --git a/public/js/components/footer/CattoolFooter.js b/public/js/components/footer/CattoolFooter.js index b7f84dfacf..852769b7e9 100644 --- a/public/js/components/footer/CattoolFooter.js +++ b/public/js/components/footer/CattoolFooter.js @@ -7,9 +7,9 @@ import JobProgressBar from '../common/JobProgressBar' import {BUTTON_MODE, BUTTON_SIZE, Button} from '../common/Button/Button' import {REVISE_STEP_NUMBER} from '../../constants/Constants' import {CookieConsent} from '../common/CookieConsent' -import IconRedirect from '../icons/IconRedirect' +import IconRedirect from '../../../img/icons/IconRedirect' import Tooltip, {TOOLTIP_POSITION} from '../common/Tooltip' -import IconArrowRight from '../icons/IconArrowRight' +import IconArrowRight from '../../../img/icons/IconArrowRight' export const CattoolFooter = ({ idProject, @@ -99,7 +99,7 @@ export const CattoolFooter = ({
) } diff --git a/public/js/components/header/Header.test.js b/public/js/components/header/Header.test.js index 50e6f5031c..929cf65a85 100644 --- a/public/js/components/header/Header.test.js +++ b/public/js/components/header/Header.test.js @@ -14,7 +14,7 @@ const modalElement = document.createElement('div') modalElement.id = 'modal' document.body.appendChild(modalElement) const mountPoint = createRoot(modalElement) -afterAll(() => mountPoint.unmount()) +afterAll(() => act(() => mountPoint.unmount())) window.config = { isLoggedIn: 1, diff --git a/public/js/components/header/TeamDropdown.js b/public/js/components/header/TeamDropdown.js index e66d82cc6b..6258a36623 100644 --- a/public/js/components/header/TeamDropdown.js +++ b/public/js/components/header/TeamDropdown.js @@ -1,12 +1,12 @@ import React, {useCallback, useContext, useRef, useState} from 'react' import PropTypes from 'prop-types' import {ApplicationWrapperContext} from '../common/ApplicationWrapper/ApplicationWrapperContext' -import {BUTTON_TYPE, Button} from '../common/Button/Button' -import IconDown from '../icons/IconDown' +import {BUTTON_SIZE, BUTTON_TYPE, Button} from '../common/Button/Button' +import IconDown from '../../../img/icons/IconDown' import ManageActions from '../../actions/ManageActions' import UserActions from '../../actions/UserActions' -import IconAdd from '../icons/IconAdd' -import IconSettings from '../icons/IconSettings' +import IconAdd from '../../../img/icons/IconAdd' +import IconSettings from '../../../img/icons/IconSettings' import ModalsActions from '../../actions/ModalsActions' export const TeamDropdown = ({isManage = true, showModals = true}) => { @@ -80,6 +80,7 @@ export const TeamDropdown = ({isManage = true, showModals = true}) => { ref={triggerRef} className={`trigger-button${isDropdownVisible ? ' open' : ''}`} type={BUTTON_TYPE.DEFAULT} + size={BUTTON_SIZE.SMALL} onClick={toggleDropdown} > {selectedTeam?.name ?? 'Choose team'} diff --git a/public/js/components/header/UserMenu.js b/public/js/components/header/UserMenu.js index 7250f1323b..9130e890cb 100644 --- a/public/js/components/header/UserMenu.js +++ b/public/js/components/header/UserMenu.js @@ -31,20 +31,21 @@ export const UserMenu = () => { return ( ) : (
@@ -54,6 +55,7 @@ export const UserMenu = () => { }} align={POPOVER_ALIGN.RIGHT} verticalAlign={POPOVER_VERTICAL_ALIGN.BOTTOM} + buttonContainerClassName={'user-menu-popover'} >
@@ -65,7 +67,7 @@ export const UserMenu = () => { alt="Profile picture" /> ) : ( -
+
{CommonUtils.getUserShortName(userInfo.user)}
)} @@ -106,7 +108,6 @@ export const UserMenu = () => { diff --git a/public/js/components/header/cattol/CommentsButton.js b/public/js/components/header/cattol/CommentsButton.js index be3b2bda82..a2c63cd55b 100644 --- a/public/js/components/header/cattol/CommentsButton.js +++ b/public/js/components/header/cattol/CommentsButton.js @@ -8,6 +8,14 @@ import CatToolStore from '../../../stores/CatToolStore' import CattolConstants from '../../../constants/CatToolConstants' import SegmentActions from '../../../actions/SegmentActions' import {getTeamUsers} from '../../../api/getTeamUsers' +import {Popover, POPOVER_ALIGN} from '../../common/Popover/Popover' +import CommentsIcon from '../../../../img/icons/CommentsIcon' +import { + Button, + BUTTON_MODE, + BUTTON_SIZE, + BUTTON_TYPE, +} from '../../common/Button/Button' const commentsTypes = {sticky: 3, resolve: 2, comment: 1} export const CommentsButton = ({}) => { @@ -22,10 +30,6 @@ export const CommentsButton = ({}) => { CommentsActions.storeComments(resp.data.entries.comments, resp.data.user) }) } - const toggleComments = () => { - CatToolActions.closeSubHeader() - setShowComments(!showComments) - } const updateComments = () => { setComments(CommentsStore.db.history) } @@ -56,50 +60,46 @@ export const CommentsButton = ({}) => { setShowComments(false) } const renderComments = () => { - return CommentsStore.db.history.map((comment) => { - let message = comment.message - .replace(/\/r/g,
) - .replace(/\/n/g,
) - message = parseCommentHtml(message) - return ( -
-
- - Segment{' '} - - {comment.id_segment} + if (CommentsStore?.db?.history.length > 0) { + return CommentsStore?.db?.history?.map((comment) => { + let message = comment.message + .replace(/\/r/g,
) + .replace(/\/n/g,
) + message = parseCommentHtml(message) + return ( +
+
+ + Segment {comment.id_segment} - - - {comment.full_name} - -
- + {comment.full_name} +
+
+

-

-

-
- ) - }) + ) + }) + } else { + return
No comments
+ } } useEffect(() => { if (config.id_team) { @@ -138,61 +138,38 @@ export const CommentsButton = ({}) => { return ( <> {config.comments_enabled && ( -
-
- counterOpenComments + counterResolvedComments > 0 - ? toggleComments() - : null - } - > - - - -
- {counterResolvedComments > 0 && ( - - {counterResolvedComments} - - )} - {counterOpenComments > 0 && ( - {counterOpenComments} - )} -
-
- {showComments ? ( -
-
- {counterOpenComments + counterResolvedComments === 0 ? ( -
-
-
- No comments -
+ + + {counterResolvedComments > 0 && ( +
0 ? 'button-badge-left' : ''}`} + > + {counterResolvedComments}
-
- ) : ( -
- {renderComments()} -
- )} -
- ) : null} -
+ )} + {counterOpenComments > 0 && ( +
+ {counterOpenComments} +
+ )} + + ), + size: BUTTON_SIZE.ICON_STANDARD, + mode: BUTTON_MODE.GHOST, + type: BUTTON_TYPE.ICON, + disabled: counterOpenComments + counterResolvedComments === 0, + }} + disabled={counterOpenComments + counterResolvedComments === 0} + forceOpenMenu={showComments} + > +
{renderComments()}
+ )} ) diff --git a/public/js/components/header/cattol/DownloadMenu.js b/public/js/components/header/cattol/DownloadMenu.js index 280f8882b4..3079fbf842 100644 --- a/public/js/components/header/cattol/DownloadMenu.js +++ b/public/js/components/header/cattol/DownloadMenu.js @@ -7,6 +7,12 @@ import SegmentStore from '../../../stores/SegmentStore' import ModalsActions from '../../../actions/ModalsActions' import CatToolActions from '../../../actions/CatToolActions' import DownloadFileUtils from '../../../utils/downloadFileUtils' +import { + DROPDOWN_MENU_TRIGGER_MODE, + DropdownMenu, +} from '../../common/DropdownMenu/DropdownMenu' +import {BUTTON_MODE, BUTTON_SIZE, BUTTON_TYPE} from '../../common/Button/Button' +import Download from '../../../../img/icons/Download' export const DownloadMenu = ({password, jid, isGDriveProject}) => { const [downloadTranslationAvailable, setDownloadTranslationAvailable] = @@ -111,91 +117,102 @@ export const DownloadMenu = ({password, jid, isGDriveProject}) => { } }, []) return ( - + , + size: BUTTON_SIZE.ICON_STANDARD, + mode: downloadTranslationAvailable + ? BUTTON_MODE.BASIC + : BUTTON_MODE.GHOST, + type: downloadTranslationAvailable + ? BUTTON_TYPE.PRIMARY + : BUTTON_TYPE.ICON, + onClick: (e) => { + runDownload() + e.preventDefault() + }, + }} + className={downloadTranslationAvailable ? 'job-completed' : ''} + disabled={downloadDisabled} + items={[ + ...(downloadTranslationAvailable + ? [ + { + label: ( + <> + {' '} + + {isGDriveProject + ? 'Open in Google Drive' + : 'Download Translation'} + + ), + onClick: () => runDownload(), + }, + ] + : [ + { + label: ( + <> + + {isGDriveProject + ? 'Open preview in Google Drive' + : 'Download Draft'} + + ), + onClick: () => runDownload(), + }, + ]), + ...(!isGDriveProject + ? [ + { + label: ( + <> + + Download Original + + ), + onClick: () => { + window.open(`/api/v2/original/${jid}/${password}`, '_blank') + }, + }, + ] + : [ + { + label: ( + <> + + Open original in Google Drive + + ), + onClick: () => + continueDownloadWithGoogleDrive({originalFiles: 1}), + }, + ]), + { + label: ( + <> + + Export XLIFF + + ), + onClick: () => { + window.open(`/api/v2/xliff/${jid}/${password}/${jid}.zip`, '_blank') + }, + }, + { + label: ( + <> + + Export Job TMX + + ), + onClick: () => { + window.open(`/api/v2/tmx/${jid}/${password}`, '_blank') + }, + }, + ]} + /> ) } diff --git a/public/js/components/header/cattol/FilesMenu.js b/public/js/components/header/cattol/FilesMenu.js index e3ecf9b7c5..851465f4aa 100644 --- a/public/js/components/header/cattol/FilesMenu.js +++ b/public/js/components/header/cattol/FilesMenu.js @@ -7,31 +7,20 @@ import SegmentActions from '../../../actions/SegmentActions' import SegmentStore from '../../../stores/SegmentStore' import {FilenameLabel} from '../../common/FilenameLabel' import {getFileSegments} from '../../../api/getFileSegments' - -function useOutsideAlerter(ref, fun) { - useEffect(() => { - function handleClickOutside(event) { - if (ref.current && !ref.current.contains(event.target)) { - fun() - } - } - // Bind the event listener - document.addEventListener('mousedown', handleClickOutside) - return () => { - // Unbind the event listener on clean up - document.removeEventListener('mousedown', handleClickOutside) - } - }, [ref]) -} +import { + DROPDOWN_SEPARATOR, + DropdownMenu, +} from '../../common/DropdownMenu/DropdownMenu' +import Files from '../../../../img/icons/Files' +import {BUTTON_MODE, BUTTON_SIZE} from '../../common/Button/Button' +import GoToIcon from '../../../../img/icons/GoToIcon' +import Check from '../../../../img/icons/Check' export const FilesMenu = ({projectName}) => { const [files, setFiles] = useState() const [currentFile, setCurrentFile] = useState() - const [menuVisible, setMenuVisible] = useState(false) const [currentSegment, setCurrentSegment] = useState() const firstJobSegment = useRef() - const containerRef = useRef() - useOutsideAlerter(containerRef, () => setMenuVisible(false)) useEffect(() => { getJobFileInfo(config.id_job, config.password).then((response) => { @@ -46,11 +35,11 @@ export const FilesMenu = ({projectName}) => { }) }, []) - const toggleMenu = () => { - if (!menuVisible) { + const toggleMenu = (open) => { + if (open) { CatToolActions.closeSubHeader() const current = SegmentStore.getCurrentSegment() - if (current) { + if (current && current.opened) { setCurrentSegment(current.sid) // check if use id_file or id_file_part const idFileProp = files.find( @@ -60,8 +49,9 @@ export const FilesMenu = ({projectName}) => { : 'id_file_part' setCurrentFile(parseInt(current[idFileProp])) } + } else { + setCurrentSegment() } - setMenuVisible(!menuVisible) } const goToCurrentSegment = () => { @@ -82,93 +72,62 @@ export const FilesMenu = ({projectName}) => { } } - return ( -
- {files && ( - <> -
- - {files.length} - - -
-
- - {projectName} - -
- - )} - {menuVisible && ( -
-
-
- Go to current segment + const getFilesMenu = () => { + return [ + { + label: ( + <> + +
Go to current segment
{Shortcuts.cattol.events.gotoCurrent.keystrokes[ Shortcuts.shortCutsKeyType ].toUpperCase()} -
-
- {/**/} - {/* Go to first segment of the file:*/} - {/**/} - {files.map((file) => { - return ( -
goToFirstSegment(file)} - className={`file-list-item ${ - currentFile === file.id ? 'current' : '' - }`} - title={`${file.file_name} - Click to go to the first segment`} - > - - {file.file_name} - {currentFile === file.id && ( - - - - - - )} -
- ) - })} -
-
- )} -
+ + ), + onClick: goToCurrentSegment, + disabled: !currentSegment, + }, + DROPDOWN_SEPARATOR, + ...files.map((file) => ({ + label: ( + <> + {CommonUtils.getFileIcon( + file.file_name.split('.')[file.file_name.split('.').length - 1], + )} + {file.file_name} + {currentFile === file.id && } + + ), + onClick: () => goToFirstSegment(file), + selected: currentFile === file.id, + })), + ] + } + + return ( + <> + + + + {projectName} + + + ), + size: BUTTON_SIZE.STANDARD, + mode: BUTTON_MODE.LINK, + className: 'files-menu-button', + }} + items={files && getFilesMenu()} + onOpenChange={toggleMenu} + className={'file-list-item'} + disabled={!files} + /> + ) } diff --git a/public/js/components/header/cattol/Header.js b/public/js/components/header/cattol/Header.js index d27d140a77..c8920b52a1 100644 --- a/public/js/components/header/cattol/Header.js +++ b/public/js/components/header/cattol/Header.js @@ -10,10 +10,16 @@ import {SegmentsQAButton} from './SegmetsQAButton' import {SearchButton} from './SearchButton' import {CommentsButton} from './CommentsButton' import {SegmentsFilterButton} from './SegmentsFilterButton' -import {SettingsButton} from './SettingsButton' import {ActionMenu} from '../ActionMenu' import {UserMenu} from '../UserMenu' import {ApplicationWrapperContext} from '../../common/ApplicationWrapper/ApplicationWrapperContext' +import { + Button, + BUTTON_MODE, + BUTTON_SIZE, + BUTTON_TYPE, +} from '../../common/Button/Button' +import SettingsIcon from '../../../../img/icons/SettingsIcon' export const Header = ({ jid, @@ -27,7 +33,6 @@ export const Header = ({ projectCompletionEnabled, isReview, secondRevisionsCount, - overallQualityClass, qualityReportHref, allowLinkToAnalysis, analysisEnabled, @@ -80,30 +85,35 @@ export const Header = ({ jid={jid} isGDriveProject={isGDriveProject} /> + {/*Search*/} + + + {/*Segments filter*/} + + + {/*Comments*/} + + + {/*Segments Issues*/} + {/*Quality Report*/} - {/*Segments Issues*/} - - - {/*Search*/} - - - {/*Comments*/} - - - {/*Segments filter*/} - - {/*Settings Icon*/} - + {/*Dropdown menu*/} { const [files, setFiles] = useState() @@ -51,11 +56,11 @@ export const JobMetadata = ({metadata}) => { } }, [metadata]) - useEffect(() => { - // if (showButton && !closedPopupStorage) { - // showInfoTooltipFunction() - // } - }, [showButton]) + // useEffect(() => { + // // if (showButton && !closedPopupStorage) { + // // showInfoTooltipFunction() + // // } + // }, [showButton]) useEffect(() => { const updateFiles = (files) => { @@ -79,32 +84,14 @@ export const JobMetadata = ({metadata}) => { return ( showButton && ( -
-
- - - - -
-
+ + ) ) } diff --git a/public/js/components/header/cattol/MarkAsCompleteButton.js b/public/js/components/header/cattol/MarkAsCompleteButton.js index 89d39ce40b..49da8d8a46 100644 --- a/public/js/components/header/cattol/MarkAsCompleteButton.js +++ b/public/js/components/header/cattol/MarkAsCompleteButton.js @@ -9,8 +9,14 @@ import CattolConstants from '../../../constants/CatToolConstants' import CatToolActions from '../../../actions/CatToolActions' import {deleteCompletionEvents} from '../../../api/deleteCompletionEvents' import ModalsActions from '../../../actions/ModalsActions' +import { + Button, + BUTTON_MODE, + BUTTON_SIZE, + BUTTON_TYPE, +} from '../../common/Button/Button' +import Check from '../../../../img/icons/Check' export const MarkAsCompleteButton = ({featureEnabled, isReview}) => { - const button = useRef() const [markedAsComplete, setMarkedAsComplete] = useState( config.job_marked_complete, ) @@ -61,24 +67,32 @@ export const MarkAsCompleteButton = ({featureEnabled, isReview}) => { const showTranslateWarningMessage = () => { // if (!lastCompletionEventId) return - let message = - 'All segments are in read-only mode because this job is under review.' - - if (config.chunk_completion_undoable && config.last_completion_event_id) { - message = - message + - '

Re-Open Job

' - } + const showUndo = + config.chunk_completion_undoable && config.last_completion_event_id CatToolActions.addNotification({ uid: 'translate-warning', autoDismiss: false, dismissable: true, position: 'tc', - text: message, + text: ( + <> + All segments are in read-only mode because this job is under + review. + {showUndo && ( +

+ + Re-Open Job + +

+ )} + + ), title: 'Warning', type: 'warning', - allowHtml: true, }) } @@ -137,7 +151,7 @@ export const MarkAsCompleteButton = ({featureEnabled, isReview}) => { type: 'warning', title: 'Warning', text: 'Translator/post-editor did not mark this job as complete yet. Please wait for vendor phase to complete before making any change.', - dismissable: false, + dismissable: true, autoDismiss: false, }) } @@ -207,19 +221,15 @@ export const MarkAsCompleteButton = ({featureEnabled, isReview}) => { <> {/*Mark as complete*/} {featureEnabled && ( - )} ) diff --git a/public/js/components/header/cattol/QAComponent.js b/public/js/components/header/cattol/QAComponent.js index ce1131c94f..f795ce40c6 100644 --- a/public/js/components/header/cattol/QAComponent.js +++ b/public/js/components/header/cattol/QAComponent.js @@ -6,6 +6,15 @@ import SegmentStore from '../../../stores/SegmentStore' import SegmentConstants from '../../../constants/SegmentConstants' import SegmentQA from '../../../../img/icons/SegmentQA' import AlertIcon from '../../../../img/icons/AlertIcon' +import { + Button, + BUTTON_MODE, + BUTTON_SIZE, + BUTTON_TYPE, +} from '../../common/Button/Button' +import InfoIcon from '../../../../img/icons/InfoIcon' +import ChevronLeft from '../../../../img/icons/ChevronLeft' +import ChevronRight from '../../../../img/icons/ChevronRight' class QAComponent extends React.Component { constructor(props) { @@ -132,9 +141,11 @@ class QAComponent extends React.Component { ? ' mc-bg-gray' : '' error.push( - , + , ) } else { let activeClass = @@ -154,9 +165,11 @@ class QAComponent extends React.Component { ? ' mc-bg-gray' : '' error.push( - , + , ) } } @@ -184,9 +197,11 @@ class QAComponent extends React.Component { : '' if (key === 'TAGS') { warning.push( - , + , ) } else if (key !== 'MISMATCH') { warning.push( - , + , ) } else { mismatch = ( - + ) } } @@ -260,9 +279,11 @@ class QAComponent extends React.Component { ? ' mc-bg-gray' : '' info.push( - , + , ) } }) } } let segmentsWithActive = - error.length > 0 || warning.length > 0 || info.length > 0 ? true : false + error.length > 0 || warning.length > 0 || info.length > 0 return this.props.active && this.state.totalWarnings > 0 ? (
@@ -291,7 +313,7 @@ class QAComponent extends React.Component {
) : null} {segmentsWithActive ? ( -
+
{error} {warning} {info} @@ -333,7 +355,7 @@ class QAComponent extends React.Component { ) : null} {mismatch ? (
-
{mismatch}
+
{mismatch}
) : null}
@@ -341,24 +363,24 @@ class QAComponent extends React.Component {
- + +
{this.state.navigationIndex + 1} /{' '} {this.state.navigationList.length} {/*Segments*/}
- + +
diff --git a/public/js/components/header/cattol/SearchButton.js b/public/js/components/header/cattol/SearchButton.js index 44c1ccd9b3..57b8a5b4d8 100644 --- a/public/js/components/header/cattol/SearchButton.js +++ b/public/js/components/header/cattol/SearchButton.js @@ -1,9 +1,15 @@ -import React from 'react' +import React, {useEffect, useState} from 'react' import SearchUtils from './search/searchUtils' import {useHotkeys} from 'react-hotkeys-hook' import {Shortcuts} from '../../../utils/shortcuts' +import {Button, BUTTON_MODE, BUTTON_SIZE} from '../../common/Button/Button' +import Search from '../../../../img/icons/Search' +import CatToolStore from '../../../stores/CatToolStore' +import CatToolConstants from '../../../constants/CatToolConstants' +import SearchFilled from '../../../../img/icons/SearchFilled' export const SearchButton = () => { + const [searchOpen, setSearchOpen] = useState(SearchUtils.searchOpen) useHotkeys( Shortcuts.cattol.events.openSearch.keystrokes[Shortcuts.shortCutsKeyType], (e) => openSearch(e), @@ -12,52 +18,44 @@ export const SearchButton = () => { const openSearch = (event) => { SearchUtils.toggleSearch(event) } + useEffect(() => { + const closeSearch = (container) => { + if (container && container === 'search') { + setSearchOpen((prevState) => !prevState) + } else { + setSearchOpen(false) + } + } + CatToolStore.addListener(CatToolConstants.TOGGLE_CONTAINER, closeSearch) + CatToolStore.addListener(CatToolConstants.CLOSE_SUBHEADER, closeSearch) + CatToolStore.addListener(CatToolConstants.SHOW_CONTAINER, closeSearch) + return () => { + CatToolStore.removeListener( + CatToolConstants.TOGGLE_CONTAINER, + closeSearch, + ) + CatToolStore.removeListener(CatToolConstants.CLOSE_SUBHEADER, closeSearch) + CatToolStore.removeListener(CatToolConstants.SHOW_CONTAINER, closeSearch) + } + }, []) return ( - <> - {SearchUtils.searchEnabled && ( - - )} - + SearchUtils.searchEnabled && + (searchOpen ? ( + + ) : ( + + )) ) } diff --git a/public/js/components/header/cattol/SegmentsFilterButton.js b/public/js/components/header/cattol/SegmentsFilterButton.js index 7bbbeb3e39..15e24422fb 100644 --- a/public/js/components/header/cattol/SegmentsFilterButton.js +++ b/public/js/components/header/cattol/SegmentsFilterButton.js @@ -1,7 +1,14 @@ -import React from 'react' +import React, {useEffect, useState} from 'react' import SegmentFilter from './segment_filter/segment_filter' +import {Button, BUTTON_MODE, BUTTON_SIZE} from '../../common/Button/Button' +import CatToolStore from '../../../stores/CatToolStore' +import CatToolConstants from '../../../constants/CatToolConstants' +import FilterFilledIcon from '../../../../img/icons/FilterFilledIcon' +import FilterIcon from '../../../../img/icons/FilterIcon' export const SegmentsFilterButton = () => { + const [filterOpen, setFilterOpen] = useState(SegmentFilter.open) + const openSegmetsFilters = (event) => { event.preventDefault() if (!SegmentFilter.open) { @@ -11,41 +18,46 @@ export const SegmentsFilterButton = () => { SegmentFilter.open = false } } + useEffect(() => { + const closeFilter = (container) => { + if (container && container === 'segmentFilter') { + setFilterOpen((prevState) => !prevState) + } else { + setFilterOpen(false) + } + } + CatToolStore.addListener(CatToolConstants.TOGGLE_CONTAINER, closeFilter) + CatToolStore.addListener(CatToolConstants.CLOSE_SUBHEADER, closeFilter) + CatToolStore.addListener(CatToolConstants.SHOW_CONTAINER, closeFilter) + return () => { + CatToolStore.removeListener( + CatToolConstants.TOGGLE_CONTAINER, + closeFilter, + ) + CatToolStore.removeListener(CatToolConstants.CLOSE_SUBHEADER, closeFilter) + CatToolStore.removeListener(CatToolConstants.SHOW_CONTAINER, closeFilter) + } + }, []) return ( <> - {config.segmentFilterEnabled && ( -
- + + + ) : ( + -
- )} + + + ))} ) } diff --git a/public/js/components/header/cattol/SegmetsQAButton.js b/public/js/components/header/cattol/SegmetsQAButton.js index 2bc71e74e3..db8306c119 100644 --- a/public/js/components/header/cattol/SegmetsQAButton.js +++ b/public/js/components/header/cattol/SegmetsQAButton.js @@ -2,11 +2,26 @@ import React, {useEffect, useState} from 'react' import CatToolActions from '../../../actions/CatToolActions' import SegmentStore from '../../../stores/SegmentStore' import SegmentConstants from '../../../constants/SegmentConstants' +import { + Button, + BUTTON_MODE, + BUTTON_SIZE, + BUTTON_TYPE, +} from '../../common/Button/Button' +import AlertIcon from '../../../../img/icons/AlertIcon' +import CatToolStore from '../../../stores/CatToolStore' +import CatToolConstants from '../../../constants/CatToolConstants' +import SearchUtils from './search/searchUtils' +import AlertIconFull from '../../../../img/icons/AlertIconFull' +import QAICon from '../../../../img/icons/QAICon' +import QAFilledIcon from '../../../../img/icons/QAFilledICon' export const SegmentsQAButton = () => { const [warnings, setWarnings] = useState() const [totalIssues, setTotalIssues] = useState(0) const [numberClass, setNumberClass] = useState('') + const [qaOpen, setQaOpen] = useState(SearchUtils.searchOpen) + const openQA = (event) => { event.preventDefault() CatToolActions.toggleQaIssues() @@ -18,11 +33,11 @@ export const SegmentsQAButton = () => { setWarnings(warnings) const iconClass = warnings.matecat.ERROR.total && warnings.matecat.ERROR.total > 0 - ? '' + ? 'error' : warnings.matecat.WARNING.total && warnings.matecat.WARNING.total > 0 - ? 'numberwarning' + ? 'warning' : warnings.matecat.INFO.total && warnings.matecat.INFO.total > 0 - ? 'numberinfo' + ? 'info' : '' setNumberClass(iconClass) } @@ -30,53 +45,48 @@ export const SegmentsQAButton = () => { SegmentConstants.UPDATE_GLOBAL_WARNINGS, updateWarnings, ) + const closeQA = (container) => { + if (container && container === 'qaComponent') { + setQaOpen((prevState) => !prevState) + } else { + setQaOpen(false) + } + } + CatToolStore.addListener(CatToolConstants.TOGGLE_CONTAINER, closeQA) + CatToolStore.addListener(CatToolConstants.CLOSE_SUBHEADER, closeQA) + CatToolStore.addListener(CatToolConstants.SHOW_CONTAINER, closeQA) return () => { SegmentStore.removeListener( SegmentConstants.UPDATE_GLOBAL_WARNINGS, updateWarnings, ) + CatToolStore.removeListener(CatToolConstants.TOGGLE_CONTAINER, closeQA) + CatToolStore.removeListener(CatToolConstants.CLOSE_SUBHEADER, closeQA) + CatToolStore.removeListener(CatToolConstants.SHOW_CONTAINER, closeQA) } }, []) return ( -
0 ? 'Click to see the segments with potential issues' : 'Well done, no errors found!' } + tooltipPosition="bottom" + disabled={!totalIssues} + onClick={openQA} + className={'qaButton'} > - - {warnings && totalIssues > 0 && ( - {totalIssues} - )} - - - - - - - -
+ {qaOpen ? : } + {warnings && totalIssues > 0 && ( +
+ {totalIssues} +
+ )} + ) } diff --git a/public/js/components/header/cattol/SettingsButton.js b/public/js/components/header/cattol/SettingsButton.js deleted file mode 100644 index e3ab694d27..0000000000 --- a/public/js/components/header/cattol/SettingsButton.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' -import {Shortcuts} from '../../../utils/shortcuts' - -export const SettingsButton = ({openTmPanel}) => { - return ( -
- - - -
- ) -} diff --git a/public/js/components/header/cattol/bulk_selection_bar/BulkSelectionBar.js b/public/js/components/header/cattol/bulk_selection_bar/BulkSelectionBar.js index 56098fcf68..a3598d7c1a 100644 --- a/public/js/components/header/cattol/bulk_selection_bar/BulkSelectionBar.js +++ b/public/js/components/header/cattol/bulk_selection_bar/BulkSelectionBar.js @@ -4,6 +4,15 @@ import SegmentActions from '../../../../actions/SegmentActions' import SegmentConstants from '../../../../constants/SegmentConstants' import SegmentStore from '../../../../stores/SegmentStore' import CatToolActions from '../../../../actions/CatToolActions' +import { + Button, + BUTTON_MODE, + BUTTON_SIZE, + BUTTON_TYPE, +} from '../../../common/Button/Button' +import IconChevronLeft from '../../../../../img/icons/IconChevronLeft' +import IconTick from '../../../../../img/icons/IconTick' +import Checkmark from '../../../../../img/icons/Checkmark' class BulkSelectionBar extends React.Component { constructor(props) { @@ -130,7 +139,7 @@ class BulkSelectionBar extends React.Component { render() { let buttonClass = classnames({ - 'ui button approve-all-segments': true, + 'approve-all-segments': true, 'translated-all-bulked': !this.props.isReview, 'approved-all-bulked': this.props.isReview, 'approved-2nd-pass': @@ -142,10 +151,13 @@ class BulkSelectionBar extends React.Component {
- +
{this.state.count === 1 ? (
@@ -167,10 +179,17 @@ class BulkSelectionBar extends React.Component {
) : (
- +
)}
diff --git a/public/js/components/header/cattol/search/Search.js b/public/js/components/header/cattol/search/Search.js index f454e774fc..6da1daa158 100644 --- a/public/js/components/header/cattol/search/Search.js +++ b/public/js/components/header/cattol/search/Search.js @@ -23,6 +23,9 @@ import { } from '../../../../constants/Constants' import {Select} from '../../../common/Select' import {segmentTranslation} from '../../../../setTranslationUtil' +import {Button, BUTTON_MODE, BUTTON_SIZE} from '../../../common/Button/Button' +import ChevronLeft from '../../../../../img/icons/ChevronLeft' +import ChevronRight from '../../../../../img/icons/ChevronRight' class Search extends React.Component { constructor(props) { @@ -370,9 +373,7 @@ class Search extends React.Component { }) } } - $('body').addClass('search-open') } else { - $('body').removeClass('search-open') if (!this.state.focus) { this.setState({ focus: true, @@ -497,21 +498,22 @@ class Search extends React.Component { {this.state.searchResults.length > 0 ? (

{segmentIndex + 1 + ' of ' + totalResults + ' segments'}

- - - + + +
) : null}
@@ -594,7 +596,7 @@ class Search extends React.Component { <>
{item.label} @@ -608,7 +610,7 @@ class Search extends React.Component { name: ( <>
APPROVED @@ -623,8 +625,7 @@ class Search extends React.Component { ) { findIsDisabled = false } - let findButtonClassDisabled = - !this.state.funcFindButton || findIsDisabled ? 'disabled' : '' + let findButtonDisabled = !this.state.funcFindButton || findIsDisabled let statusDropdownClass = this.state.search.selectStatus !== '' && this.state.search.selectStatus !== 'all' @@ -636,29 +637,27 @@ class Search extends React.Component { ? '' : 'disabled' let replaceCheckboxClass = this.state.search.searchTarget ? '' : 'disabled' - let replaceButtonsClass = + let replaceDisabled = !( this.state.search.enableReplace && this.state.search.searchTarget && !this.state.funcFindButton && !this.state.isSelectedTag - ? '' - : 'disabled' - let replaceAllButtonsClass = + ) + let replaceAllDisabled = !( this.state.search.enableReplace && this.state.search.searchTarget - ? '' - : 'disabled' + ) let clearVisible = this.state.search.searchTarget !== '' || this.state.search.searchSource !== '' || (this.state.search.selectStatus !== '' && this.state.search.selectStatus !== 'all') return this.props.active ? ( -
+
-
+
-
+
(this.targetInput = ref)} @@ -745,7 +744,7 @@ class Search extends React.Component {
{this.state.showReplaceOptionsInSearch && this.state.search.enableReplace ? ( -
+
- - - +
{this.jobIsSplitted && (
@@ -844,15 +842,13 @@ class Search extends React.Component {
) : (
- +
)}
diff --git a/public/js/components/header/cattol/segment_filter/DataSampleDropdown.js b/public/js/components/header/cattol/segment_filter/DataSampleDropdown.js index 66252e8490..35cecf2309 100644 --- a/public/js/components/header/cattol/segment_filter/DataSampleDropdown.js +++ b/public/js/components/header/cattol/segment_filter/DataSampleDropdown.js @@ -7,7 +7,7 @@ import { BUTTON_TYPE, } from '../../../common/Button/Button' import ChevronDown from '../../../../../img/icons/ChevronDown' -import IconClose from '../../../icons/IconClose' +import IconClose from '../../../../../img/icons/IconClose' export const DataSampleDropdown = ({ onChange, diff --git a/public/js/components/header/cattol/segment_filter/SegmentsFilter.js b/public/js/components/header/cattol/segment_filter/SegmentsFilter.js index b8dacd7939..3e266263d9 100644 --- a/public/js/components/header/cattol/segment_filter/SegmentsFilter.js +++ b/public/js/components/header/cattol/segment_filter/SegmentsFilter.js @@ -1,6 +1,5 @@ -import React from 'react' +import React, {useState, useEffect, useCallback, useRef} from 'react' import {isUndefined} from 'lodash' -import $ from 'jquery' import CatToolConstants from '../../../../constants/CatToolConstants' import CatToolStore from '../../../../stores/CatToolStore' @@ -10,506 +9,345 @@ import {SEGMENTS_STATUS} from '../../../../constants/Constants' import {Select} from '../../../common/Select' import Switch from '../../../common/Switch' import {DataSampleDropdown} from './DataSampleDropdown' +import {Button, BUTTON_MODE, BUTTON_SIZE} from '../../../common/Button/Button' +import ChevronLeft from '../../../../../img/icons/ChevronLeft' +import ChevronRight from '../../../../../img/icons/ChevronRight' + +const MORE_FILTERS = [ + {value: 'ice', label: '101%'}, + {value: 'unlocked', label: 'Not 101%'}, + {value: 'modified_ice', label: 'Modified 101%'}, + {value: 'repetitions', label: 'Repetitions'}, + {value: 'mt', label: 'MT'}, + {value: 'matches', label: '100% Matches'}, + {value: 'fuzzies_75_84', label: 'Fuzzies 75-84'}, + {value: 'fuzzies_85_94', label: 'Fuzzies 85-94'}, + {value: 'fuzzies_95_99', label: 'Fuzzies 95-99'}, + {value: 'todo', label: 'To do'}, +] + +const DEFAULT_STATE = { + selectedStatus: undefined, + samplingType: undefined, + samplingSize: 5, + filtering: false, + filteredCount: 0, + segmentsArray: [], + filtersEnabled: true, + dataSampleEnabled: false, + filterSubmitted: false, + revisionNumber: null, +} -class SegmentsFilter extends React.Component { - constructor(props) { - super(props) - this.moreFilters = [ - {value: 'ice', label: '101%'}, - {value: 'unlocked', label: 'Not 101%'}, - {value: 'modified_ice', label: 'Modified 101%'}, - {value: 'repetitions', label: 'Repetitions'}, - {value: 'mt', label: 'MT'}, - {value: 'matches', label: '100% Matches'}, - // {value: 'fuzzies_50_74', label: 'fuzzies_50_74'}, - {value: 'fuzzies_75_84', label: 'Fuzzies 75-84'}, - {value: 'fuzzies_85_94', label: 'Fuzzies 85-94'}, - {value: 'fuzzies_95_99', label: 'Fuzzies 95-99'}, - {value: 'todo', label: 'To do'}, - ] - this.state = this.defaultState() - this.setFilter = this.setFilter.bind(this) - this.moreFilterSelectChanged = this.moreFilterSelectChanged.bind(this) - this.doSubmitFilter = this.doSubmitFilter.bind(this) - - SegmentFilterUtils.initEvents() - } - - defaultState() { - let storedState = {} - - if (storedState.reactState) { - storedState.reactState.moreFilters = this.moreFilters - return storedState.reactState - } else { - return { - selectedStatus: undefined, - samplingType: undefined, - samplingSize: 5, - filtering: false, - filteredCount: 0, - segmentsArray: [], - moreFilters: this.moreFilters, - filtersEnabled: true, - dataSampleEnabled: false, - filterSubmitted: false, - revisionNumber: null, - } - } - } - - resetState() { - this.setState(this.defaultState()) - } - - resetStatusFilter() { - this.setState({ - selectedStatus: undefined, - revisionNumber: undefined, - }) - } - - resetMoreFilter() { - this.setState({ - samplingType: undefined, - }) - } - - resetDataSampleFilter() { - this.setState({ - samplingType: undefined, - samplingSize: 5, - }) - } - - clearClick(e) { - e.preventDefault() - SegmentFilterUtils.clearFilter() - this.resetState() - this.resetDataSampleFilter() - } - - doSubmitFilter() { +const SegmentsFilter = ({active}) => { + const [selectedStatus, setSelectedStatus] = useState(DEFAULT_STATE.selectedStatus) + const [samplingType, setSamplingType] = useState(DEFAULT_STATE.samplingType) + const [samplingSize, setSamplingSize] = useState(DEFAULT_STATE.samplingSize) + const [filtering, setFiltering] = useState(DEFAULT_STATE.filtering) + const [filteredCount, setFilteredCount] = useState(DEFAULT_STATE.filteredCount) + const [segmentsArray, setSegmentsArray] = useState(DEFAULT_STATE.segmentsArray) + const [dataSampleEnabled, setDataSampleEnabled] = useState(DEFAULT_STATE.dataSampleEnabled) + const [filterSubmitted, setFilterSubmitted] = useState(DEFAULT_STATE.filterSubmitted) + const [revisionNumber, setRevisionNumber] = useState(DEFAULT_STATE.revisionNumber) + + const filterWrapperRef = useRef(null) + const stateRef = useRef({selectedStatus, samplingType, samplingSize, dataSampleEnabled, revisionNumber}) + + useEffect(() => { + stateRef.current = {selectedStatus, samplingType, samplingSize, dataSampleEnabled, revisionNumber} + }, [selectedStatus, samplingType, samplingSize, dataSampleEnabled, revisionNumber]) + + const resetState = useCallback(() => { + setSelectedStatus(DEFAULT_STATE.selectedStatus) + setSamplingType(DEFAULT_STATE.samplingType) + setSamplingSize(DEFAULT_STATE.samplingSize) + setFiltering(DEFAULT_STATE.filtering) + setFilteredCount(DEFAULT_STATE.filteredCount) + setSegmentsArray(DEFAULT_STATE.segmentsArray) + setDataSampleEnabled(DEFAULT_STATE.dataSampleEnabled) + setFilterSubmitted(DEFAULT_STATE.filterSubmitted) + setRevisionNumber(DEFAULT_STATE.revisionNumber) + }, []) + + const doSubmitFilter = useCallback(() => { + const {selectedStatus: status, samplingType: type, samplingSize: size, dataSampleEnabled: sampleEnabled, revisionNumber: revNum} = stateRef.current let sample - if (this.state.samplingType) { - if (this.state.dataSampleEnabled) { - sample = { - type: this.state.samplingType, - size: this.state.samplingSize, - } - } else { - sample = { - type: this.state.samplingType, - } - } + if (type) { + sample = sampleEnabled ? {type, size} : {type} } - if (sample || this.state.selectedStatus) { + if (sample || status) { SegmentFilterUtils.filterSubmit( - { - status: this.state.selectedStatus, - sample: sample, - revision_number: this.state.revisionNumber, - }, - { - samplingType: this.state.samplingType, - samplingSize: this.state.samplingSize, - selectedStatus: this.state.selectedStatus, - dataSampleEnabled: this.state.dataSampleEnabled, - }, + {status, sample, revision_number: revNum}, + {samplingType: type, samplingSize: size, selectedStatus: status, dataSampleEnabled: sampleEnabled}, ) - this.setState({ - filterSubmitted: true, - }) + setFilterSubmitted(true) } else { - this.setState({ - filtering: false, - }) + setFiltering(false) setTimeout(() => SegmentFilterUtils.clearFilter()) } - } + }, []) - filterSelectChanged(value) { - let revisionNumber - if (value === 'APPROVED-2') { - revisionNumber = 2 - value = SEGMENTS_STATUS.APPROVED2 + const setFilter = useCallback((data, state) => { + if (isUndefined(state)) { + setFilteredCount(data.count) + setFiltering(true) + setSegmentsArray(data.segment_ids) + setFilterSubmitted(false) } else { - revisionNumber = null + setFilteredCount(data.count) + setFiltering(true) + setSegmentsArray(data.segment_ids) + setFilterSubmitted(false) + if (state.selectedStatus !== undefined) setSelectedStatus(state.selectedStatus) + if (state.samplingType !== undefined) setSamplingType(state.samplingType) + if (state.samplingSize !== undefined) setSamplingSize(state.samplingSize) + if (state.dataSampleEnabled !== undefined) setDataSampleEnabled(state.dataSampleEnabled) + setTimeout(doSubmitFilter, 100) } + }, [doSubmitFilter]) - if ( - (!config.isReview && - value === 'TRANSLATED' && - this.state.samplingType === 'todo') || - (config.isReview && - value === 'APPROVED' && - this.state.samplingType === 'todo') - ) { - setTimeout(() => { - this.resetMoreFilter() - }) - - this.setState({ - selectedStatus: value, - samplingType: undefined, - revisionNumber: revisionNumber, - }) - } else { - this.setState({ - selectedStatus: value, - revisionNumber: revisionNumber, - }) + const filterSegmentsError = useCallback(() => { + setFilterSubmitted(false) + }, []) + + useEffect(() => { + SegmentFilterUtils.initEvents() + const segmentFilterData = SegmentFilterUtils.getStoredState() + if (SegmentFilterUtils.enabled() && segmentFilterData.reactState && segmentFilterData.open) { + SegmentFilterUtils.openFilter() } - setTimeout(this.doSubmitFilter, 100) - } + CatToolStore.addListener(CatToolConstants.SET_SEGMENT_FILTER, setFilter) + CatToolStore.addListener(CatToolConstants.SEGMENT_FILTER_ERROR, filterSegmentsError) + CatToolStore.addListener(CatToolConstants.RELOAD_SEGMENT_FILTER, doSubmitFilter) + return () => { + CatToolStore.removeListener(CatToolConstants.SET_SEGMENT_FILTER, setFilter) + CatToolStore.removeListener(CatToolConstants.SEGMENT_FILTER_ERROR, filterSegmentsError) + CatToolStore.removeListener(CatToolConstants.RELOAD_SEGMENT_FILTER, doSubmitFilter) + } + }, [setFilter, filterSegmentsError, doSubmitFilter]) - moreFilterSelectChanged(value) { - if ( - (!config.isReview && - this.state.selectedStatus === 'TRANSLATED' && - value === 'todo') || - (config.isReview && - this.state.selectedStatus === 'APPROVED' && - value === 'todo') - ) { - setTimeout(() => { - this.resetStatusFilter() - }) - this.setState({ - samplingType: value, - selectedStatus: '', - }) - } else { - this.setState({ - samplingType: value, - }) + useEffect(() => { + if (filterWrapperRef.current) { + const actionFilter = document.getElementById('action-filter') + if (actionFilter) { + actionFilter.classList.toggle('open', active) + } } - setTimeout(this.doSubmitFilter, 100) - } + }, [active]) - dataSampleChange(value) { - this.setState({ - samplingType: value, - }) - setTimeout(this.doSubmitFilter, 100) - } + const handleFilterSelectChanged = useCallback((value) => { + let revNum = null + if (value === 'APPROVED-2') { + revNum = 2 + value = SEGMENTS_STATUS.APPROVED2 + } - samplingSizeChanged(value) { - this.setState({ - samplingSize: value, - }) - } + const isTodoConflict = + (!config.isReview && value === 'TRANSLATED' && stateRef.current.samplingType === 'todo') || + (config.isReview && value === 'APPROVED' && stateRef.current.samplingType === 'todo') - moveUp() { - if (this.state.filtering && this.state.filteredCount > 1) { - SegmentFilterUtils.gotoPreviousSegment() + if (isTodoConflict) { + setSamplingType(undefined) } - } - moveDown() { - if (this.state.filtering && this.state.filteredCount > 1) { - SegmentActions.gotoNextSegment() + setSelectedStatus(value) + setRevisionNumber(revNum) + setTimeout(doSubmitFilter, 100) + }, [doSubmitFilter]) + + const handleMoreFilterSelectChanged = useCallback((value) => { + const isTodoConflict = + (!config.isReview && stateRef.current.selectedStatus === 'TRANSLATED' && value === 'todo') || + (config.isReview && stateRef.current.selectedStatus === 'APPROVED' && value === 'todo') + + if (isTodoConflict) { + setSelectedStatus('') } - } - selectAllSegments(event) { - event.stopPropagation() - SegmentActions.setBulkSelectionSegments(this.state.segmentsArray.slice(0)) - } + setSamplingType(value) + setTimeout(doSubmitFilter, 100) + }, [doSubmitFilter]) - unlockAllSegments(event) { - event.stopPropagation() - SegmentActions.unlockSegments(this.state.segmentsArray.slice(0)) - } + const handleDataSampleChange = useCallback((value) => { + setSamplingType(value) + setTimeout(doSubmitFilter, 100) + }, [doSubmitFilter]) - setFilter(data, state) { - if (isUndefined(state)) { - this.setState({ - filteredCount: data.count, - filtering: true, - segmentsArray: data.segment_ids, - filterSubmitted: false, - }) - } else { - state.filteredCount = data.count - state.filtering = true - state.segmentsArray = data.segment_ids - state.filterSubmitted = false - this.setState(state) - setTimeout(this.doSubmitFilter, 100) - } - } + const handleClearClick = useCallback((e) => { + e.preventDefault() + SegmentFilterUtils.clearFilter() + resetState() + }, [resetState]) - filterSegmentsError = () => { - this.setState({ - filterSubmitted: false, - }) - } + const handleToggleChange = useCallback((checked) => { + setDataSampleEnabled(checked) + setSamplingType(undefined) + }, []) - onChangeToggle = (checked) => { - if (checked) { - this.setState({ - filtersEnabled: false, - dataSampleEnabled: true, - samplingType: undefined, - }) - } else { - this.setState({ - filtersEnabled: true, - dataSampleEnabled: false, - samplingType: undefined, - }) + const handleMoveUp = useCallback(() => { + if (filtering && filteredCount > 1) { + SegmentFilterUtils.gotoPreviousSegment() } - } + }, [filtering, filteredCount]) - componentDidMount() { - const segmentFilterData = SegmentFilterUtils.getStoredState() - if ( - SegmentFilterUtils.enabled() && - segmentFilterData.reactState && - segmentFilterData.open - ) - SegmentFilterUtils.openFilter() - CatToolStore.addListener( - CatToolConstants.SET_SEGMENT_FILTER, - this.setFilter, - ) - CatToolStore.addListener( - CatToolConstants.SEGMENT_FILTER_ERROR, - this.filterSegmentsError, - ) - CatToolStore.addListener( - CatToolConstants.RELOAD_SEGMENT_FILTER, - this.doSubmitFilter, - ) - } - - componentDidUpdate() { - if (this.props.active) { - $('#action-filter').addClass('open') - } else { - $('#action-filter').removeClass('open') + const handleMoveDown = useCallback(() => { + if (filtering && filteredCount > 1) { + SegmentActions.gotoNextSegment() } - } + }, [filtering, filteredCount]) - componentWillUnmount() { - CatToolStore.removeListener( - CatToolConstants.SET_SEGMENT_FILTER, - this.setFilter, - ) - CatToolStore.removeListener( - CatToolConstants.SEGMENT_FILTER_ERROR, - this.filterSegmentsError, - ) - CatToolStore.removeListener( - CatToolConstants.RELOAD_SEGMENT_FILTER, - this.doSubmitFilter, - ) - } + const handleSelectAll = useCallback((event) => { + event.stopPropagation() + SegmentActions.setBulkSelectionSegments(segmentsArray.slice(0)) + }, [segmentsArray]) - render() { - let buttonArrowsClass = 'qa-arrows-disbled' - let statusOptions = config.searchable_statuses.map((item) => { - return { - name: ( - <> -
- {item.label} - - ), - id: item.value, - } - }) - if (config.secondRevisionsCount) { - statusOptions.push({ - name: ( - <> -
- APPROVED 2 - - ), - id: 'APPROVED-2', - }) - } - let moreOptions = this.state.moreFilters.map((item, index) => { - return { - name: item.label, - id: item.value, - } + const handleUnlockAll = useCallback((event) => { + event.stopPropagation() + SegmentActions.unlockSegments(segmentsArray.slice(0)) + }, [segmentsArray]) + + if (!active) return null + + const statusOptions = config.searchable_statuses.map((item) => ({ + name: ( + <> +
+ {item.label} + + ), + id: item.value, + })) + + if (config.secondRevisionsCount) { + statusOptions.push({ + name: ( + <> +
+ APPROVED 2 + + ), + id: 'APPROVED-2', }) + } - if (this.state.filtering && this.state.filteredCount > 1) { - buttonArrowsClass = 'qa-arrows-enabled' - } + const moreOptions = MORE_FILTERS.map((item) => ({ + name: item.label, + id: item.value, + })) + + const buttonArrowsClass = filtering && filteredCount > 1 ? 'qa-arrows-enabled' : 'qa-arrows-disbled' + const statusFilterClass = selectedStatus !== '' ? 'filtered' : 'not-filtered' + const filterClassEnabled = dataSampleEnabled + ? 'disabled' + : samplingType + ? 'filtered' + : 'not-filtered' + + return ( +
+
+
+
+
+ handleMoreFilterSelectChanged(value.id)} + activeOption={moreOptions.find((item) => item.id === samplingType) || undefined} + placeholder="Others" + checkSpaceToReverse={false} + showResetButton={true} + resetFunction={() => handleMoreFilterSelectChanged()} + maxHeightDroplist={400} + enabled={!dataSampleEnabled} + /> +
- let filterClassEnabled = !this.state.dataSampleEnabled ? '' : 'disabled' - let statusFilterClass = - this.state.selectedStatus !== '' ? 'filtered' : 'not-filtered' - filterClassEnabled = - !this.state.dataSampleEnabled && this.state.samplingType - ? filterClassEnabled + ' filtered' - : filterClassEnabled + ' not-filtered' - - return this.props.active ? ( -
-
-
-
+ {config.isReview && (
- { - this.moreFilterSelectChanged(value.id) - }} - activeOption={ - moreOptions.find( - (item) => item.id === this.state.samplingType, - ) || undefined - } - placeholder={'Others'} - checkSpaceToReverse={false} - showResetButton={true} + { - this.moreFilterSelectChanged() + setSamplingType(undefined) + setSamplingSize(5) }} - maxHeightDroplist={400} - enabled={!this.state.dataSampleEnabled} />
+ )} - {config.isReview ? ( -
- { - this.onChangeToggle(value) - }} - active={this.state.dataSampleEnabled} - showText={false} - /> - this.dataSampleChange(value)} - isDisabled={!this.state.dataSampleEnabled} - onChangeSampleSize={(value) => - this.samplingSizeChanged(value) - } - samplingSize={this.state.samplingSize} - samplingType={this.state.samplingType} - resetFunction={() => this.resetDataSampleFilter()} - /> + {filtering && ( +
+
+
- ) : null} - {this.state.filtering ? ( -
-
- + {filteredCount > 0 && ( +
+
- {this.state.filteredCount > 0 ? ( -
- -
- ) : null} - {this.state.filteredCount > 0 && - this.state.samplingType === 'ice' ? ( -
- -
- ) : null} -
- ) : null} -
-
-
- {this.state.filtering && - this.state.filteredCount && - !this.state.filterSubmitted > 0 ? ( -
-
- {this.state.filteredCount} Filtered segments -
- - + )} + {filteredCount > 0 && samplingType === 'ice' && ( +
+
- ) : null} - {this.state.filtering && - !this.state.filterSubmitted && - this.state.filteredCount === 0 ? ( -
-
No segments found
-
- ) : null} - {this.state.filterSubmitted ? ( + )} +
+ )} +
+ +
+
+ {filtering && filteredCount > 0 && !filterSubmitted && ( +
- Applying filter -
+ {filteredCount} Filtered segments
- ) : null} -
+ + +
+ )} + {filtering && !filterSubmitted && filteredCount === 0 && ( +
+
No segments found
+
+ )} + {filterSubmitted && ( +
+ Applying filter +
+
+ )}
- ) : null - } +
+ ) } export default SegmentsFilter diff --git a/public/js/components/header/cattol/segment_filter/SegmentsFilter.test.js b/public/js/components/header/cattol/segment_filter/SegmentsFilter.test.js new file mode 100644 index 0000000000..612abd84a8 --- /dev/null +++ b/public/js/components/header/cattol/segment_filter/SegmentsFilter.test.js @@ -0,0 +1,188 @@ +import React from 'react' +import {render, screen, act} from '@testing-library/react' +import userEvent from '@testing-library/user-event' + +import CatToolConstants from '../../../../constants/CatToolConstants' +import CatToolStore from '../../../../stores/CatToolStore' + +jest.mock('./segment_filter', () => ({ + initEvents: jest.fn(), + enabled: jest.fn(() => false), + getStoredState: jest.fn(() => ({})), + openFilter: jest.fn(), + clearFilter: jest.fn(), + filterSubmit: jest.fn(), + gotoPreviousSegment: jest.fn(), +})) + +jest.mock('../../../../actions/SegmentActions', () => ({ + gotoNextSegment: jest.fn(), + setBulkSelectionSegments: jest.fn(), + unlockSegments: jest.fn(), +})) + +beforeEach(() => { + jest.clearAllMocks() + global.config = { + isReview: false, + secondRevisionsCount: false, + segmentFilterEnabled: true, + searchable_statuses: [ + {value: 'NEW', label: 'NEW'}, + {value: 'DRAFT', label: 'DRAFT'}, + {value: 'TRANSLATED', label: 'TRANSLATED'}, + {value: 'APPROVED', label: 'APPROVED'}, + {value: 'REJECTED', label: 'REJECTED'}, + ], + } +}) + +const renderFilter = (props = {}) => { + return render() +} + +// Lazy import so mocks are set up first +let SegmentsFilter, SegmentFilterUtils, SegmentActions +beforeAll(() => { + SegmentsFilter = require('./SegmentsFilter').default + SegmentFilterUtils = require('./segment_filter') + SegmentActions = require('../../../../actions/SegmentActions') +}) + +test('renders nothing when not active', () => { + const {container} = render() + expect(container.innerHTML).toBe('') +}) + +test('renders filter UI when active', () => { + renderFilter() + expect(document.querySelector('.filter-wrapper')).toBeInTheDocument() + expect(document.querySelector('.filter-container')).toBeInTheDocument() +}) + +test('calls initEvents on mount', () => { + renderFilter() + expect(SegmentFilterUtils.initEvents).toHaveBeenCalledTimes(1) +}) + +test('registers and unregisters store listeners', () => { + const addSpy = jest.spyOn(CatToolStore, 'addListener') + const removeSpy = jest.spyOn(CatToolStore, 'removeListener') + + const {unmount} = renderFilter() + + expect(addSpy).toHaveBeenCalledWith( + CatToolConstants.SET_SEGMENT_FILTER, + expect.any(Function), + ) + expect(addSpy).toHaveBeenCalledWith( + CatToolConstants.SEGMENT_FILTER_ERROR, + expect.any(Function), + ) + expect(addSpy).toHaveBeenCalledWith( + CatToolConstants.RELOAD_SEGMENT_FILTER, + expect.any(Function), + ) + + unmount() + + expect(removeSpy).toHaveBeenCalledWith( + CatToolConstants.SET_SEGMENT_FILTER, + expect.any(Function), + ) + + addSpy.mockRestore() + removeSpy.mockRestore() +}) + +test('shows clear button after filter is applied via store event', () => { + renderFilter() + + act(() => { + CatToolStore.emit(CatToolConstants.SET_SEGMENT_FILTER, { + count: 5, + segment_ids: [1, 2, 3, 4, 5], + }) + }) + + expect(screen.getByText('Clear all filters')).toBeInTheDocument() +}) + +test('clear button calls clearFilter and resets state', async () => { + const user = userEvent.setup() + renderFilter() + + act(() => { + CatToolStore.emit(CatToolConstants.SET_SEGMENT_FILTER, { + count: 3, + segment_ids: [1, 2, 3], + }) + }) + + await user.click(screen.getByText('Clear all filters')) + expect(SegmentFilterUtils.clearFilter).toHaveBeenCalled() +}) + +test('shows select all button when filtered count > 0', () => { + renderFilter() + + act(() => { + CatToolStore.emit(CatToolConstants.SET_SEGMENT_FILTER, { + count: 3, + segment_ids: [10, 20, 30], + }) + }) + + expect(screen.getByText('Select all filtered segments')).toBeInTheDocument() +}) + +test('select all calls setBulkSelectionSegments with segment ids', async () => { + const user = userEvent.setup() + renderFilter() + + act(() => { + CatToolStore.emit(CatToolConstants.SET_SEGMENT_FILTER, { + count: 2, + segment_ids: [100, 200], + }) + }) + + await user.click(screen.getByText('Select all filtered segments')) + expect(SegmentActions.setBulkSelectionSegments).toHaveBeenCalledWith([100, 200]) +}) + +test('shows navigation arrows when filtered count > 1', () => { + renderFilter() + + act(() => { + CatToolStore.emit(CatToolConstants.SET_SEGMENT_FILTER, { + count: 5, + segment_ids: [1, 2, 3, 4, 5], + }) + }) + + expect(screen.getByText('Filtered segments')).toBeInTheDocument() +}) + +test('shows "No segments found" when filtered count is 0', () => { + renderFilter() + + act(() => { + CatToolStore.emit(CatToolConstants.SET_SEGMENT_FILTER, { + count: 0, + segment_ids: [], + }) + }) + + expect(screen.getByText('No segments found')).toBeInTheDocument() +}) + +test('shows data sample toggle only in review mode', () => { + config.isReview = false + const {container, rerender} = renderFilter() + expect(container.querySelectorAll('input[type="checkbox"]').length).toBe(0) + + config.isReview = true + rerender() + expect(container.querySelector('input[type="checkbox"]')).toBeInTheDocument() +}) diff --git a/public/js/components/header/manage/FilterProjects.js b/public/js/components/header/manage/FilterProjects.js index c617907d44..0b610c8c10 100644 --- a/public/js/components/header/manage/FilterProjects.js +++ b/public/js/components/header/manage/FilterProjects.js @@ -1,93 +1,77 @@ -import React from 'react' -import {isUndefined} from 'lodash' +import React, { + useState, + useRef, + useCallback, + forwardRef, + useImperativeHandle, +} from 'react' import FilterProjectsStatus from './FilterProjectsStatus' import SearchInput from './SearchInput' import ManageActions from '../../../actions/ManageActions' import ManageConstants from '../../../constants/ManageConstants' -import MembersFilter from './MembersFilter' -class FilterProjects extends React.Component { - constructor(props) { - super(props) +const FilterProjects = forwardRef((props, ref) => { + const [currentStatus, setCurrentStatus] = useState('active') + const [currentUser, setCurrentUser] = useState( + ManageConstants.ALL_MEMBERS_FILTER, + ) + const currentText = useRef() - this.state = { - currentStatus: 'active', - currentUser: ManageConstants.ALL_MEMBERS_FILTER, - } - } + const handleSetCurrentUser = useCallback( + (value) => { + setCurrentUser(value) - setCurrentUser = (value) => { - this.setState({currentUser: value}) + ManageActions.filterProjects( + typeof value === 'object' ? value.user.uid : value, + currentText.current, + currentStatus, + ) + }, + [currentStatus], + ) - ManageActions.filterProjects( - typeof value === 'object' ? value.user.uid : value, - this.currentText, - this.state.currentStatus, - ) - } + const onChangeSearchInput = useCallback( + (value) => { + if ( + currentText.current !== value + ) + ManageActions.filterProjects( + typeof currentUser === 'object' ? currentUser.user.uid : currentUser, + value, + currentStatus, + ) - onChangeSearchInput(value) { - this.currentText = value - const {currentStatus, currentUser} = this.state + currentText.current = value + }, + [currentStatus, currentUser], + ) - ManageActions.filterProjects( - typeof currentUser === 'object' ? currentUser.user.uid : currentUser, - value, - currentStatus, - ) - } + const filterByStatus = useCallback( + (status) => { + setCurrentStatus(status) - filterByStatus(status) { - this.setState({currentStatus: status}) - const {currentUser} = this.state + ManageActions.filterProjects( + typeof currentUser === 'object' ? currentUser.user.uid : currentUser, + currentText.current, + status, + ) + }, + [currentUser], + ) - ManageActions.filterProjects( - typeof currentUser === 'object' ? currentUser.user.uid : currentUser, - this.currentText, - status, - ) - } + useImperativeHandle(ref, () => ({ + currentUser, + handleSetCurrentUser, + })) - shouldComponentUpdate(nextProps, nextState) { - return ( - isUndefined(this.props.selectedTeam) || - (!isUndefined(nextProps.selectedTeam) && - !nextProps.selectedTeam.equals(this.props.selectedTeam)) || - nextState.currentUser !== this.state.currentUser - ) - } + return ( +
+ + +
+ ) +}) - render() { - const canRenderMemebersFilter = - this.props.selectedTeam && - this.props.selectedTeam.get('type') === 'general' && - this.props.selectedTeam.get('members') && - this.props.selectedTeam.get('members').size > 1 - - return ( -
-
-
-
- - -
-
-
- {canRenderMemebersFilter && ( - - )} -
-
-
- ) - } -} +FilterProjects.displayName = 'FilterProjects' export default FilterProjects diff --git a/public/js/components/header/manage/FilterProjects.test.js b/public/js/components/header/manage/FilterProjects.test.js index 196eba1959..fd6cf09b7a 100644 --- a/public/js/components/header/manage/FilterProjects.test.js +++ b/public/js/components/header/manage/FilterProjects.test.js @@ -1225,7 +1225,7 @@ test('Rendering elements', () => { render() expect(screen.getByTestId('input-search-projects')).toBeInTheDocument() - expect(screen.getByTestId('status-filter')).toBeInTheDocument() + expect(screen.getByTestId('status-filter-trigger')).toBeInTheDocument() }) test('Searching with no result', async () => { @@ -1233,7 +1233,6 @@ test('Searching with no result', async () => { const {props} = getFakeProperties(fakeFilterData.teamWithId_1) render() - const searchTerm = 'my project' addOnceListenerStoreFilterProjects(() => getProjectsRequest({searchTerm})) diff --git a/public/js/components/header/manage/FilterProjectsStatus.js b/public/js/components/header/manage/FilterProjectsStatus.js index 364e8ffb40..2a878cd829 100644 --- a/public/js/components/header/manage/FilterProjectsStatus.js +++ b/public/js/components/header/manage/FilterProjectsStatus.js @@ -5,7 +5,7 @@ import { DROPDOWN_MENU_ALIGN, } from '../../common/DropdownMenu/DropdownMenu' import {BUTTON_MODE, BUTTON_SIZE} from '../../common/Button/Button' -import IconFilter from '../../icons/IconFilter' +import IconFilter from '../../../../img/icons/IconFilter' const STATES = [ {label: 'Active', value: 'active'}, @@ -27,25 +27,23 @@ const FilterProjectsStatus = ({filterFunction}) => { })) return ( -
- - - {STATES.find(({value}) => value === currentState)?.label} - - ), - }} - items={items} - /> -
+ + + {STATES.find(({value}) => value === currentState)?.label} + + ), + }} + items={items} + /> ) } diff --git a/public/js/components/header/manage/MembersFilter.js b/public/js/components/header/manage/MembersFilter.js index 892481c58a..2d87e7008b 100644 --- a/public/js/components/header/manage/MembersFilter.js +++ b/public/js/components/header/manage/MembersFilter.js @@ -1,64 +1,35 @@ -import React, {useCallback, useRef, useState} from 'react' +import React, {useState} from 'react' import PropTypes from 'prop-types' import ManageConstants from '../../../constants/ManageConstants' import {Button, BUTTON_SIZE, BUTTON_TYPE} from '../../common/Button/Button' import TEXT_UTILS from '../../../utils/textUtils' import CommonUtils from '../../../utils/commonUtils' import {Input, INPUT_SIZE} from '../../common/Input/Input' -import IconSearch from '../../icons/IconSearch' -import IconDown from '../../icons/IconDown' +import IconSearch from '../../../../img/icons/IconSearch' +import IconDown from '../../../../img/icons/IconDown' import LabelWithTooltip from '../../common/LabelWithTooltip' +import * as Popover from '@radix-ui/react-popover' const MembersFilter = ({selectedTeam, currentUser, setCurrentUser}) => { - const [isDropdownVisible, setIsDropdownVisible] = useState(false) const [searchFilter, setSearchFilter] = useState() - - const wrapperRef = useRef() + const [open, setOpen] = useState(false) const getImgUser = (userData) => { const {user_metadata: metadata, user} = userData return metadata ? ( ) : ( - {CommonUtils.getUserShortName(user)} + {CommonUtils.getUserShortName(user)} ) } - const closeDropdown = useCallback((e) => { - if (e) e.stopPropagation() - if (wrapperRef.current && !wrapperRef.current.contains(e?.target)) { - window.eventHandler.removeEventListener( - 'click.membersfilterdropdown', - closeDropdown, - ) - - setIsDropdownVisible(false) - } - }, []) - - const toggleDropdown = () => { - if (isDropdownVisible) { - window.eventHandler.removeEventListener( - 'click.membersfilterdropdown', - closeDropdown, - ) - } else { - window.eventHandler.addEventListener( - 'click.membersfilterdropdown', - closeDropdown, - ) - } - - setIsDropdownVisible((prevState) => !prevState) - } - const onChangeUserCallback = (data) => { setCurrentUser(data) - closeDropdown() + setOpen(false) } const teamMembers = selectedTeam.get('members').toJS() @@ -73,86 +44,98 @@ const MembersFilter = ({selectedTeam, currentUser, setCurrentUser}) => { : teamMembers return ( -
- -
-
    -
  • - onChangeUserCallback(ManageConstants.NOT_ASSIGNED_FILTER) - } - > - NA - Not assigned -
    • -
  • - onChangeUserCallback(ManageConstants.ALL_MEMBERS_FILTER) - } - > - ALL - All Members -
    • -
  • - setSearchFilter(value)} - icon={} - /> -
    • - {filteredMembers.length > 0 ? ( - filteredMembers.map((userData) => ( + + + + + + +
    +
    • onChangeUserCallback(userData)} + className={`members-filter-item-filter ${currentUser === ManageConstants.NOT_ASSIGNED_FILTER ? 'active' : ''}`} + onClick={() => + onChangeUserCallback(ManageConstants.NOT_ASSIGNED_FILTER) + } > -
      - {getImgUser(userData)} - {`${userData.user.first_name} ${userData.user.last_name}`} -
      - {userData.projects} + NA + Not assigned
      • - )) - ) : ( - No results found. - )} -
    -
    -
+
  • + onChangeUserCallback(ManageConstants.ALL_MEMBERS_FILTER) + } + > + ALL + All Members +
    • +
  • + + setSearchFilter(value) + } + icon={} + /> +
    • + {filteredMembers.length > 0 ? ( + filteredMembers.map((userData) => ( +
  • onChangeUserCallback(userData)} + > +
    + {getImgUser(userData)} + {`${userData.user.first_name} ${userData.user.last_name}`} +
    + {userData.projects} +
    • + )) + ) : ( + + No results found. + + )} + +
    + + + ) } diff --git a/public/js/components/header/manage/SearchInput.js b/public/js/components/header/manage/SearchInput.js index 9c00f06951..7ad24a4b2b 100644 --- a/public/js/components/header/manage/SearchInput.js +++ b/public/js/components/header/manage/SearchInput.js @@ -1,70 +1,43 @@ -import React from 'react' -import {debounce} from 'lodash' -import $ from 'jquery' +import React, {useEffect} from 'react' +import {Input} from '../../common/Input/Input' +import IconSearch from '../../../../img/icons/IconSearch' -class SearchInput extends React.Component { - constructor(props) { - super(props) - this.onKeyPressEvent = this.onKeyPressEvent.bind(this) - let self = this - this.filterByNameDebounce = debounce(function (e) { - self.filterByName(e) - }, 500) - } - - filterByName(e) { - if ($(this.textInput).val().length) { - $(this.closeIcon).show() - } else { - $(this.closeIcon).hide() - } +const SearchInput = ({onChange}) => { + const [searchFilter, setSearchFilter] = React.useState('') - this.props.onChange($(this.textInput).val()) + useEffect(() => { + const tmOut = setTimeout(() => { + onChange(searchFilter) + }, 500) - return false - } + return () => clearTimeout(tmOut) + }, [searchFilter, onChange]) - closeSearch() { - $(this.textInput).val('') - $(this.closeIcon).hide() - this.props.onChange($(this.textInput).val()) + const closeSearch = () => { + setSearchFilter('') + onChange('') } - onKeyPressEvent(e) { + const onKeyPressEvent = (e) => { if (e.which == 27) { - this.closeSearch() - } else { - if (e.which == 13 || e.keyCode == 13) { - e.preventDefault() - return false - } + closeSearch() + } else if (e.which == 13 || e.keyCode == 13) { + e.preventDefault() + return false } } - render() { - return ( - (this.textInput = input)} - onChange={this.filterByNameDebounce.bind(this)} - onKeyPress={this.onKeyPressEvent.bind(this)} - data-testid="input-search-projects" - /> - - /*
    -
    - this.textInput = input} - onChange={this.filterByNameDebounce.bind(this)} - onKeyPress={this.onKeyPressEvent.bind(this)}/> - {/!**!/} -
    -
    */ - ) - } + return ( + setSearchFilter(e.target.value)} + onKeyPress={onKeyPressEvent} + icon={} + data-testid="input-search-projects" + /> + ) } export default SearchInput diff --git a/public/js/components/icons/IconQR.js b/public/js/components/icons/IconQR.js deleted file mode 100644 index 1e7e64ece5..0000000000 --- a/public/js/components/icons/IconQR.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react' - -export const IconQR = ({ - width = '42', - height = width, - color1 = '#FAFAFA', - color2 = '#FFFFFF', -}) => { - return ( - - - - - - - ) -} diff --git a/public/js/components/languageSelector/LanguageSelector.js b/public/js/components/languageSelector/LanguageSelector.js index 53bdd5d733..f8697dd14b 100644 --- a/public/js/components/languageSelector/LanguageSelector.js +++ b/public/js/components/languageSelector/LanguageSelector.js @@ -3,6 +3,14 @@ import React from 'react' import LanguageSelectorList from './LanguageSelectorList' import LanguageSelectorSearch from './LanguageSelectorSearch' import LabelWithTooltip from '../common/LabelWithTooltip' +import { + Button, + BUTTON_MODE, + BUTTON_SIZE, + BUTTON_TYPE, +} from '../common/Button/Button' +import FlipBackwardIcon from '../../../img/icons/FlipBackwardIcon' +import Close from '../../../img/icons/Close' const RECENTLY_USED_LOCAL_STORAGE_KEY = `target_languages_recently_used-${config.userMail}` const MAX_RECENTLY_USED_STORED = 3 @@ -127,7 +135,14 @@ class LanguageSelector extends React.Component {
    Target languages - +
    @@ -182,13 +197,14 @@ class LanguageSelector extends React.Component { {(filteredLanguages.length > 0 || (querySearch && !filteredLanguages.length)) && (
    - +
    )}
    @@ -253,9 +269,9 @@ class LanguageSelector extends React.Component {
    - +
    diff --git a/public/js/components/modals/AlertModal.js b/public/js/components/modals/AlertModal.js index 9efbb65d76..cff78338c7 100644 --- a/public/js/components/modals/AlertModal.js +++ b/public/js/components/modals/AlertModal.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types' import React from 'react' +import {Button, BUTTON_TYPE} from '../common/Button/Button' class AlertModal extends React.Component { allowHTML(string) { @@ -13,9 +14,9 @@ class AlertModal extends React.Component { return (
    -
    +
    {typeof this.props.text === 'string' ? ( @@ -24,13 +25,13 @@ class AlertModal extends React.Component { this.props.text )}
    -
    -
    +
    +
    diff --git a/public/js/components/modals/ConfirmMessageModal.js b/public/js/components/modals/ConfirmMessageModal.js index 7782d48e21..3403f8cae5 100644 --- a/public/js/components/modals/ConfirmMessageModal.js +++ b/public/js/components/modals/ConfirmMessageModal.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types' import React from 'react' +import {Button, BUTTON_MODE, BUTTON_TYPE} from '../common/Button/Button' class ConfirmMessageModal extends React.Component { allowHTML(string) { @@ -10,51 +11,52 @@ class ConfirmMessageModal extends React.Component { return (
    -
    -
    +
    +
    {typeof this.props.text === 'string' ? (

    ) : ( this.props.text )}

    -
    +
    {this.props.cancelCallback || this.props.cancelText ? ( -
    { if (this.props.closeOnSuccess) this.props.onClose() this.props.cancelCallback?.() }} > {this.props.cancelText ? this.props.cancelText : 'Cancel'} -
    + ) : ( '' )} {this.props.warningCallback ? ( -
    { if (this.props.closeOnSuccess) this.props.onClose() this.props.warningCallback?.() }} > {this.props.warningText} -
    + ) : ( '' )} {this.props.successCallback || this.props.successText ? ( -
    { if (this.props.closeOnSuccess) this.props.onClose() this.props.successCallback?.() }} > {this.props.successText ? this.props.successText : 'Confirm'} -
    + ) : ( '' )} diff --git a/public/js/components/modals/CreateTeam.js b/public/js/components/modals/CreateTeam.js index e4c3c9d5ae..88be05a7e5 100644 --- a/public/js/components/modals/CreateTeam.js +++ b/public/js/components/modals/CreateTeam.js @@ -8,6 +8,7 @@ import {EMAIL_PATTERN} from '../../constants/Constants' import ManageActions from '../../actions/ManageActions' import ModalsActions from '../../actions/ModalsActions' import {ApplicationWrapperContext} from '../common/ApplicationWrapper/ApplicationWrapperContext' +import {Button, BUTTON_TYPE} from '../common/Button/Button' export const CreateTeam = () => { const {userInfo} = useContext(ApplicationWrapperContext) @@ -47,7 +48,7 @@ export const CreateTeam = () => { Create a team and invite your colleagues to share and manage projects.

    -

    Assign a name to your team

    +
    Assign a name to your team
    {
    -

    Add members

    +
    Add members
    {
    - +
    ) } diff --git a/public/js/components/modals/DownloadAlertModal.js b/public/js/components/modals/DownloadAlertModal.js index 1651534942..ff849ef559 100644 --- a/public/js/components/modals/DownloadAlertModal.js +++ b/public/js/components/modals/DownloadAlertModal.js @@ -15,8 +15,8 @@ export const DownloadAlertModal = ({ return (
    -
    -
    +
    +
    The translation has issues (e.g. missing tags or over‑length text) that may cause failed downloads, missing placeholders, or lost formatting. diff --git a/public/js/components/modals/JobMetadataModal.js b/public/js/components/modals/JobMetadataModal.js index c900a96815..cc8fde50e4 100644 --- a/public/js/components/modals/JobMetadataModal.js +++ b/public/js/components/modals/JobMetadataModal.js @@ -52,17 +52,11 @@ class JobMetadataModal extends React.Component { const title = (
    - - {file.file_name} - + {CommonUtils.getFileIcon( + file.file_name.split('.')[file.file_name.split('.').length - 1], + )} + +
    {file.file_name}
    ) @@ -141,7 +135,7 @@ class JobMetadataModal extends React.Component {
    {this.props.projectInfo && (
    -

    Project instructions

    +

    Project instructions

    -

    File instructions

    -
    +

    File instructions

    +
    {this.createFileList()}
    diff --git a/public/js/components/modals/ModalContainer.js b/public/js/components/modals/ModalContainer.js index 69541741b7..eea0f41a4f 100644 --- a/public/js/components/modals/ModalContainer.js +++ b/public/js/components/modals/ModalContainer.js @@ -1,4 +1,11 @@ import React, {useEffect, useRef} from 'react' +import Close from '../../../img/icons/Close' +import { + Button, + BUTTON_MODE, + BUTTON_SIZE, + BUTTON_TYPE, +} from '../common/Button/Button' export const ModalContainer = ({ title, @@ -72,13 +79,15 @@ export const ModalContainer = ({

    {title}

    {!isCloseButtonDisabled && ( -
    - -
    + )}
    )} diff --git a/public/js/components/modals/ModalOverlay.js b/public/js/components/modals/ModalOverlay.js index b3971eb54d..0045ad5d72 100644 --- a/public/js/components/modals/ModalOverlay.js +++ b/public/js/components/modals/ModalOverlay.js @@ -1,14 +1,18 @@ import React from 'react' import $ from 'jquery' +import { + Button, + BUTTON_MODE, + BUTTON_SIZE, + BUTTON_TYPE, +} from '../common/Button/Button' +import Close from '../../../img/icons/Close' export const ModalOverlay = ({title, styleContainer, children, onClose}) => { const handleClose = (e) => { e.stopPropagation() - if ( - $(e.target).closest('.matecat-modal-content').length == 0 || - $(e.target).hasClass('close-matecat-modal') - ) { + if (onClose) { onClose() } } @@ -18,11 +22,7 @@ export const ModalOverlay = ({title, styleContainer, children, onClose}) => { }, []) return ( -
    +
    @@ -30,14 +30,15 @@ export const ModalOverlay = ({title, styleContainer, children, onClose}) => {

    {title}

    - -
    - -
    +
    {children}
    diff --git a/public/js/components/modals/ModifyTeam.js b/public/js/components/modals/ModifyTeam.js index 43932c7a0d..23f9e68ae1 100644 --- a/public/js/components/modals/ModifyTeam.js +++ b/public/js/components/modals/ModifyTeam.js @@ -6,11 +6,11 @@ import { EmailsBadge, SPECIALS_SEPARATORS, } from '../common/EmailsBadge/EmailsBadge' -import IconSearch from '../icons/IconSearch' -import IconClose from '../icons/IconClose' +import IconSearch from '../../../img/icons/IconSearch' +import IconClose from '../../../img/icons/IconClose' import ManageActions from '../../actions/ManageActions' import ModalsActions from '../../actions/ModalsActions' -import IconEdit from '../icons/IconEdit' +import IconEdit from '../../../img/icons/IconEdit' import Checkmark from '../../../img/icons/Checkmark' import Close from '../../../img/icons/Close' import {EMAIL_PATTERN} from '../../constants/Constants' @@ -127,28 +127,29 @@ export const ModifyTeam = ({team}) => { {removeUserId === user.get('uid') ? (
    - + - +
    ) : ( -
    confirmRemoveMember(user.get('uid'))} > Remove -
    + )} ) @@ -185,12 +186,13 @@ export const ModifyTeam = ({team}) => { ) : ( <> Pending user -
    resendInvite(email)} > Resend Invite -
    + )}
    @@ -248,7 +250,7 @@ export const ModifyTeam = ({team}) => { return (
    -

    Change Team Name

    +
    Change Team Name
    {isModifyingName ? (
    @@ -260,11 +262,7 @@ export const ModifyTeam = ({team}) => { autoFocus onKeyDown={handleEnterKeyConfirmName} /> -
    {teamState.get('type') !== 'personal' && (
    -

    Manage Members

    +
    Manage Members
    { onChange={onChangeAddMembers} placeholder="Add new members by entering their email addresses" /> - +
    + +
    )} @@ -336,12 +337,13 @@ export const ModifyTeam = ({team}) => { {userlist}
    - +
    ) } diff --git a/public/js/components/modals/PreferencesModal.js b/public/js/components/modals/PreferencesModal.js index 9e10eff2db..fd34c26bdc 100644 --- a/public/js/components/modals/PreferencesModal.js +++ b/public/js/components/modals/PreferencesModal.js @@ -5,7 +5,7 @@ import {getUserApiKey} from '../../api/getUserApiKey' import {createUserApiKey} from '../../api/createUserApiKey' import {connectedServicesGDrive} from '../../api/connectedServicesGDrive' import {deleteUserApiKey} from '../../api/deleteUserApiKey' -import IconEdit from '../icons/IconEdit' +import IconEdit from '../../../img/icons/IconEdit' import {modifyUserInfo} from '../../api/modifyUserInfo/modifyUser' import UserActions from '../../actions/UserActions' import { @@ -14,7 +14,9 @@ import { BUTTON_SIZE, BUTTON_TYPE, } from '../common/Button/Button' -import IconClose from '../icons/IconClose' +import IconClose from '../../../img/icons/IconClose' +import Copy from '../../../img/icons/Copy' +import IconInfo from '../../../img/icons/IconInfo' import UserStore from '../../stores/UserStore' import {getUserData} from '../../api/getUserData' import {ApplicationWrapperContext} from '../common/ApplicationWrapper/ApplicationWrapperContext' @@ -151,7 +153,7 @@ const PreferencesModal = (props) => { const getApiKeyHtml = () => { return (
    -

    API Key

    +

    API Key

    {credentials ? ( confirmDelete ? (
    @@ -224,7 +226,7 @@ const PreferencesModal = (props) => { onClick={(e) => copyToClipboard(e)} tabIndex="0" > - + {credentialsCopied ? 'Copied' : 'Copy'}