diff --git a/README.md b/README.md index 59be4f0..3ca5e6c 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,7 @@ users have taken. The system features collaborative management, so you can manag - 🕰️ History feature - 💬 Group chat - ⚙️ Profile management +- 🦋 Themes - 🔑 Admin dashboard - 📢 Reminders - 💾 Backups diff --git a/app/controller/_base.php b/app/controller/_base.php index 01d0d6c..e6c5b09 100644 --- a/app/controller/_base.php +++ b/app/controller/_base.php @@ -53,6 +53,12 @@ class BaseController extends Asatru\Controller\Controller { UtilsModule::setLanguage($lang); } } + + $theme = $auth_user->get('theme'); + + if (($theme) && (is_dir(public_path() . '/themes/' . $theme))) { + ThemeModule::load(public_path() . '/themes/' . $theme); + } } } diff --git a/app/controller/user.php b/app/controller/user.php index 0c16ce7..22e5b25 100644 --- a/app/controller/user.php +++ b/app/controller/user.php @@ -65,13 +65,14 @@ class UserController extends BaseController { $name = $request->params()->query('name', null); $email = $request->params()->query('email', null); $lang = $request->params()->query('lang', 'en'); + $theme = $request->params()->query('theme', 'default'); $chatcolor = $request->params()->query('chatcolor', null); $show_log = $request->params()->query('show_log', false); $notify_tasks_overdue = $request->params()->query('notify_tasks_overdue', false); $notify_tasks_tomorrow = $request->params()->query('notify_tasks_tomorrow', false); $show_plants_aoru = $request->params()->query('show_plants_aoru', 'added'); - UserModel::editPreferences($name, $email, $lang, $chatcolor, $show_log, $notify_tasks_overdue, $notify_tasks_tomorrow, $show_plants_aoru); + UserModel::editPreferences($name, $email, $lang, $theme, $chatcolor, $show_log, $notify_tasks_overdue, $notify_tasks_tomorrow, $show_plants_aoru); $password = $request->params()->query('password', null); if ($password) { diff --git a/app/lang/de/app.php b/app/lang/de/app.php index 574be0f..63b0a98 100644 --- a/app/lang/de/app.php +++ b/app/lang/de/app.php @@ -260,5 +260,7 @@ return [ 'import_successful' => 'Erfolgreich importiert!', 'pwa_enable' => 'PWA Unterstützung aktivieren', 'home' => 'Home', - 'enable_system_messages' => 'Systemmeldungen aktivieren' + 'enable_system_messages' => 'Systemmeldungen aktivieren', + 'theme' => 'Theme', + 'themes' => 'Themes' ]; \ No newline at end of file diff --git a/app/lang/en/app.php b/app/lang/en/app.php index 87a4c51..8a7807d 100644 --- a/app/lang/en/app.php +++ b/app/lang/en/app.php @@ -263,5 +263,7 @@ return [ 'enable_system_messages' => 'Enable system messages', 'plant_count' => '{count} plants', 'danger_count' => '{count} in danger', - 'all_in_good_standing' => 'All fine' + 'all_in_good_standing' => 'All fine', + 'theme' => 'Theme', + 'themes' => 'Themes' ]; \ No newline at end of file diff --git a/app/migrations/UserModel.php b/app/migrations/UserModel.php index fd6afcc..bb280a4 100644 --- a/app/migrations/UserModel.php +++ b/app/migrations/UserModel.php @@ -38,6 +38,7 @@ class UserModel_Migration { $this->database->add('lang VARCHAR(512) NULL'); $this->database->add('chatcolor VARCHAR(512) NULL'); $this->database->add('notes TEXT NULL'); + $this->database->add('theme VARCHAR(512) NULL'); $this->database->add('show_log BOOLEAN NOT NULL DEFAULT 1'); $this->database->add('show_plants_aoru BOOLEAN NOT NULL DEFAULT 1'); $this->database->add('notify_tasks_overdue BOOLEAN NOT NULL DEFAULT 1'); diff --git a/app/models/UserModel.php b/app/models/UserModel.php index 5a970eb..359834f 100644 --- a/app/models/UserModel.php +++ b/app/models/UserModel.php @@ -182,6 +182,7 @@ class UserModel extends \Asatru\Database\Model { * @param $name * @param $email * @param $lang + * @param $theme * @param $chatcolor * @param $show_log * @param $notify_tasks_overdue @@ -190,7 +191,7 @@ class UserModel extends \Asatru\Database\Model { * @return void * @throws \Exception */ - public static function editPreferences($name, $email, $lang, $chatcolor, $show_log, $notify_tasks_overdue, $notify_tasks_tomorrow, $show_plants_aoru) + public static function editPreferences($name, $email, $lang, $theme, $chatcolor, $show_log, $notify_tasks_overdue, $notify_tasks_tomorrow, $show_plants_aoru) { try { $user = static::getAuthUser(); @@ -198,8 +199,8 @@ class UserModel extends \Asatru\Database\Model { throw new \Exception('User not authenticated'); } - static::raw('UPDATE `' . self::tableName() . '` SET name = ?, email = ?, lang = ?, chatcolor = ?, show_log = ?, notify_tasks_overdue = ?, notify_tasks_tomorrow = ?, show_plants_aoru = ? WHERE id = ?', [ - trim($name), trim($email), $lang, $chatcolor, $show_log, $notify_tasks_overdue, $notify_tasks_tomorrow, (int)$show_plants_aoru, $user->get('id') + static::raw('UPDATE `' . self::tableName() . '` SET name = ?, email = ?, lang = ?, theme = ?, chatcolor = ?, show_log = ?, notify_tasks_overdue = ?, notify_tasks_tomorrow = ?, show_plants_aoru = ? WHERE id = ?', [ + trim($name), trim($email), $lang, $theme, $chatcolor, $show_log, $notify_tasks_overdue, $notify_tasks_tomorrow, (int)$show_plants_aoru, $user->get('id') ]); } catch (\Exception $e) { throw $e; diff --git a/app/modules/ThemeModule.php b/app/modules/ThemeModule.php new file mode 100644 index 0000000..7420d74 --- /dev/null +++ b/app/modules/ThemeModule.php @@ -0,0 +1,122 @@ +banner)) { + throw new \Exception('Banner asset not found'); + } + + self::$theme_data->banner_url = asset('themes/' . self::$theme_data->name . '/' . self::$theme_data->banner); + + self::$theme_data->inline_rules = ''; + foreach (self::$theme_data->rules as $key => $value) { + self::$theme_data->inline_rules .= $key . ': ' . $value . ' !important;'; + } + + if (isset(self::$theme_data->icon)) { + if (!file_exists($path . '/' . self::$theme_data->icon->asset)) { + throw new \Exception('Icon asset not found'); + } + + self::$theme_data->icon->url = asset('themes/' . self::$theme_data->name . '/' . self::$theme_data->icon->asset); + + self::$theme_data->icon->inline_rules = new \stdClass(); + + self::$theme_data->icon->inline_rules->base = ''; + foreach (self::$theme_data->icon->base as $key => $value) { + self::$theme_data->icon->inline_rules->base .= $key . ': ' . $value . ' !important;'; + } + + self::$theme_data->icon->inline_rules->img = ''; + foreach (self::$theme_data->icon->img as $key => $value) { + self::$theme_data->icon->inline_rules->img .= $key . ': ' . $value . ' !important;'; + } + } + + if (isset(self::$theme_data->accessory)) { + if (!file_exists($path . '/' . self::$theme_data->accessory->asset)) { + throw new \Exception('Icon asset not found'); + } + + self::$theme_data->accessory->url = asset('themes/' . self::$theme_data->name . '/' . self::$theme_data->accessory->asset); + + self::$theme_data->accessory->inline_rules = new \stdClass(); + + self::$theme_data->accessory->inline_rules->base = ''; + foreach (self::$theme_data->accessory->base as $key => $value) { + self::$theme_data->accessory->inline_rules->base .= $key . ': ' . $value . ' !important;'; + } + + self::$theme_data->accessory->inline_rules->img = ''; + foreach (self::$theme_data->accessory->img as $key => $value) { + self::$theme_data->accessory->inline_rules->img .= $key . ': ' . $value . ' !important;'; + } + } + } catch (\Exception $e) { + throw $e; + } + } + + /** + * @return mixed + * @throws \Exception + */ + public static function data() + { + try { + return self::$theme_data; + } catch (\Exception $e) { + throw $e; + } + } + + /** + * @return bool + */ + public static function ready() + { + return (is_object(self::$theme_data)); + } + + /** + * @return array + * @throws \Exception + */ + public static function list() + { + try { + $result = []; + + $folders = scandir(public_path() . '/themes'); + foreach ($folders as $folder) { + if (((substr($folder, 0, 1)) !== '.') && (is_dir(public_path() . '/themes/' . $folder))) { + $result[] = $folder; + } + } + + return $result; + } catch (\Exception $e) { + throw $e; + } + } +} diff --git a/app/resources/sass/app.scss b/app/resources/sass/app.scss index 5acd811..b8321e2 100644 --- a/app/resources/sass/app.scss +++ b/app/resources/sass/app.scss @@ -284,6 +284,17 @@ a.navbar-burger:hover { height: 72px; } +.banner-accessory { + position: relative; + top: 172px; + right: -83%; +} + +.banner-accessory img { + width: 256px; + height: 256px; +} + .content-inner { position: relative; padding: 15px; diff --git a/app/views/banner.php b/app/views/banner.php index c401375..d6a4741 100644 --- a/app/views/banner.php +++ b/app/views/banner.php @@ -4,4 +4,10 @@ banner-icon @endif + + @if (file_exists(public_path() . '/img/banner-accessory.png')) + + @endif \ No newline at end of file diff --git a/app/views/layout.php b/app/views/layout.php index dd23a55..00e8e11 100644 --- a/app/views/layout.php +++ b/app/views/layout.php @@ -24,7 +24,12 @@
@include('navbar.php') - @include('banner.php') + + @if (ThemeModule::ready()) + @include('theme.php') + @else + @include('banner.php') + @endif
@@ -643,6 +648,17 @@ +
+ +
+ +
+
+
diff --git a/app/views/theme.php b/app/views/theme.php new file mode 100644 index 0000000..e3bb547 --- /dev/null +++ b/app/views/theme.php @@ -0,0 +1,13 @@ + \ No newline at end of file diff --git a/public/js/app.js b/public/js/app.js index 184a860..0a9cba6 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -27,7 +27,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _sas /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/*\\n app.scss\\n*/\\nhtml, body {\\n width: 100%;\\n height: 100%;\\n padding: 0;\\n margin: 0;\\n background-color: rgb(48, 52, 55);\\n}\\n\\nbody {\\n overflow-x: hidden;\\n}\\n\\n.is-image-container {\\n background-repeat: no-repeat;\\n background-size: cover;\\n padding: unset;\\n}\\n\\n.column-overlay {\\n width: 100%;\\n height: 100%;\\n padding: 20px;\\n background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\nh1 {\\n font-size: 2.5em;\\n color: rgb(250, 250, 250);\\n}\\n\\nh2 {\\n font-size: 2em;\\n margin-bottom: 30px;\\n color: rgb(200, 200, 200);\\n}\\n\\n.smaller-headline {\\n font-size: 1.2em;\\n margin-bottom: 15px;\\n}\\n\\n.is-default-link {\\n color: rgb(79, 134, 202);\\n}\\n\\n.is-default-link:hover {\\n color: rgb(79, 134, 202);\\n text-decoration: underline;\\n}\\n\\n.is-yellow-link {\\n color: rgb(156, 115, 67);\\n}\\n\\n.is-yellow-link:hover {\\n color: rgb(156, 115, 67);\\n text-decoration: underline;\\n}\\n\\n.is-fixed-button-link {\\n position: relative;\\n top: 5px;\\n}\\n\\n.is-default-text-color {\\n color: rgb(150, 150, 150);\\n}\\n\\n.is-color-darker {\\n color: rgb(100, 100, 100);\\n}\\n\\n.is-color-error {\\n color: rgb(154, 73, 69);\\n}\\n\\n.is-input-dark {\\n background-color: rgba(90, 90, 90, 0.5);\\n color: rgb(200, 200, 200);\\n border: 1px solid rgb(100, 100, 100);\\n}\\n\\n.is-action-button-margin {\\n margin-right: 10px;\\n margin-bottom: 10px;\\n}\\n@media screen and (max-width: 376px) {\\n .is-action-button-margin {\\n margin-right: 15px;\\n }\\n}\\n\\n.is-underlined {\\n text-decoration: underline;\\n}\\n\\n.is-stretched {\\n width: 100%;\\n}\\n\\n.is-pointer {\\n cursor: pointer;\\n}\\n\\n.is-indicator {\\n position: absolute;\\n width: 10px;\\n height: 10px;\\n top: 17px;\\n left: 20px;\\n background-color: rgb(223, 50, 50);\\n border-radius: 50%;\\n z-index: 5;\\n}\\n@media screen and (max-width: 1087px) {\\n .is-indicator {\\n top: 10px;\\n left: 22px;\\n }\\n}\\n\\n.is-indicator-tab {\\n position: relative;\\n width: 10px;\\n height: 10px;\\n top: -4px;\\n left: -3px;\\n background-color: rgb(223, 50, 50);\\n border-radius: 50%;\\n z-index: 5;\\n}\\n\\n.is-background-success-light {\\n background-color: rgb(215, 253, 200);\\n}\\n\\n.float-right {\\n float: right;\\n}\\n\\n.belongs-to-previous-field {\\n position: relative;\\n top: -5px;\\n margin-bottom: 20px !important;\\n}\\n\\n.is-next-to-elem {\\n position: relative;\\n top: 5px;\\n margin-left: 10px;\\n}\\n@media screen and (max-width: 453px) {\\n .is-next-to-elem {\\n top: -3px;\\n margin-bottom: 20px !important;\\n margin-left: unset;\\n }\\n}\\n\\n.is-margin-bottom-20 {\\n margin-bottom: 20px !important;\\n}\\n\\n.field small {\\n color: rgb(120, 120, 120);\\n}\\n\\n.form-paragraph-modal a {\\n color: rgb(5, 67, 183);\\n}\\n\\n.form-paragraph-modal a:hover {\\n color: rgb(5, 67, 183);\\n text-decoration: underline;\\n}\\n\\n.navbar-item a {\\n color: rgb(200, 200, 200);\\n}\\n\\n.navbar-item a:hover {\\n color: rgb(250, 250, 250);\\n}\\n\\na.navbar-item:hover, a.navbar-item.is-active, .navbar-link:hover, .navbar-link.is-active {\\n background-color: rgba(255, 255, 255, 0) !important;\\n color: rgb(180, 180, 180) !important;\\n}\\n\\n.navbar-item, .navbar-burger, .navbar-link {\\n color: rgb(190, 190, 190);\\n}\\n\\n.navbar-dropdown {\\n background-color: rgb(50, 50, 48);\\n padding-top: unset;\\n}\\n\\n.navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link {\\n background-color: rgba(0, 0, 0, 0);\\n}\\n\\n@media screen and (max-width: 1087px) {\\n .navbar-menu {\\n background-color: rgb(50, 50, 48);\\n }\\n}\\na.navbar-burger:hover {\\n color: rgb(200, 200, 200);\\n}\\n\\n@media screen and (min-width: 1088px) {\\n .navbar-start {\\n flex-grow: 1;\\n justify-content: center;\\n }\\n}\\n\\n@media screen and (min-width: 1089px) {\\n .navbar-item-only-mobile {\\n display: none;\\n }\\n}\\n\\n@media screen and (min-width: 1089px) {\\n .navbar-dropdown-minwidth {\\n display: block;\\n top: 5px;\\n min-width: 135px;\\n text-align: center;\\n }\\n}\\n\\n@media screen and (min-width: 1089px) {\\n .navbar-dropdown-minwidth:not(.is-multiple):not(.is-loading)::after {\\n top: 20px !important;\\n }\\n}\\n\\n@media screen and (max-width: 1087px) {\\n .navbar-item-brand-mobile-right {\\n position: absolute;\\n top: 10px;\\n right: 45px;\\n }\\n}\\n@media screen and (min-width: 1089px) {\\n .navbar-item-brand-mobile-right {\\n display: none;\\n }\\n}\\n\\n@media screen and (max-width: 1087px) {\\n .navbar.is-fixed-top-pwa {\\n position: fixed;\\n top: 0;\\n left: 0;\\n right: 0;\\n z-index: 30;\\n }\\n}\\n\\n@media screen and (min-width: 768px) {\\n .column h1 {\\n margin-top: 20px;\\n }\\n}\\n\\n.banner {\\n width: 100%;\\n height: 250px;\\n background-repeat: no-repeat;\\n background-size: 100% 100%;\\n}\\n@media screen and (max-width: 768px) {\\n .banner {\\n display: none;\\n }\\n}\\n\\n.banner-icon {\\n position: relative;\\n top: 210px;\\n left: 195px;\\n}\\n\\n.banner-icon img {\\n width: 72px;\\n height: 72px;\\n}\\n\\n.content-inner {\\n position: relative;\\n padding: 15px;\\n}\\n\\n.modal {\\n z-index: 105;\\n}\\n\\n.fade {\\n transition: opacity 0.65s linear;\\n}\\n\\n.fade-in {\\n opacity: 1;\\n}\\n\\n.fade-out {\\n opacity: 0;\\n}\\n\\n@media screen and (max-width: 1087px) {\\n .app-padding-pwa {\\n padding-top: 65px;\\n padding-bottom: 87px;\\n }\\n}\\n@media screen and (max-width: 768px) {\\n .app-padding-pwa {\\n padding-top: 41px;\\n padding-bottom: 87px;\\n }\\n}\\n\\nfieldset legend {\\n margin-bottom: 5px !important;\\n}\\n\\nfieldset .field {\\n margin-bottom: unset !important;\\n}\\n\\n.notification-badge {\\n color: rgb(255, 255, 255);\\n text-decoration: none;\\n border-radius: 2px;\\n}\\n\\n.notification-badge .notify-badge {\\n padding: 1px 7px;\\n border-radius: 50%;\\n background: rgb(255, 0, 0);\\n color: rgb(255, 255, 255);\\n font-size: 0.8em;\\n}\\n@media screen and (min-width: 1089px) {\\n .notification-badge .notify-badge {\\n position: absolute;\\n right: -5px;\\n top: 4px;\\n }\\n}\\n@media screen and (max-width: 1087px) {\\n .notification-badge .notify-badge {\\n position: relative;\\n right: -4px;\\n top: -10px;\\n }\\n}\\n\\n.notify-badge .notify-badge-count {\\n position: relative;\\n top: -2px;\\n}\\n\\n.locations {\\n text-align: center;\\n}\\n\\n.locations a {\\n color: rgb(100, 100, 100);\\n}\\n\\n.locations a:hover {\\n color: rgb(100, 100, 100);\\n}\\n\\n.location {\\n position: relative;\\n display: inline-block;\\n width: 245px;\\n height: 250px;\\n margin-left: 10px;\\n margin-right: 10px;\\n margin-bottom: 30px;\\n background-color: rgb(55, 59, 62);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n}\\n@media screen and (max-width: 830px) {\\n .location {\\n width: 134px;\\n height: 137px;\\n }\\n}\\n\\n.location:hover {\\n box-shadow: 0 0 20px 0 rgba(105, 165, 85, 0.95);\\n}\\n\\n.location-title {\\n text-align: center;\\n font-size: 2em;\\n padding-bottom: 4px;\\n margin-bottom: 20px;\\n background-color: rgba(115, 143, 100, 0.9);\\n color: #c3e4a3;\\n}\\n@media screen and (max-width: 830px) {\\n .location-title {\\n font-size: 1em;\\n padding-top: 2px;\\n padding-bottom: 5px;\\n }\\n}\\n@media screen and (min-width: 831px) {\\n .location-title {\\n padding-bottom: 15px;\\n }\\n}\\n\\n.location-icon {\\n text-align: center;\\n}\\n\\n.location-icon i {\\n color: #99ac97;\\n font-size: 5em;\\n}\\n@media screen and (max-width: 830px) {\\n .location-icon i {\\n font-size: 2em;\\n }\\n}\\n@media screen and (min-width: 831px) {\\n .location-icon i {\\n margin-top: 25px;\\n }\\n}\\n\\n.location-footer {\\n position: relative;\\n bottom: -30px;\\n padding-top: 10px;\\n padding-left: 10px;\\n padding-bottom: 10px;\\n font-size: 0.9em;\\n text-align: left;\\n background-color: rgb(50, 54, 59);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n}\\n@media screen and (max-width: 830px) {\\n .location-footer {\\n font-size: 0.75em;\\n bottom: -15px;\\n }\\n}\\n\\n.location-footer-count-desktop {\\n display: none;\\n}\\n@media screen and (min-width: 850px) {\\n .location-footer-count-desktop {\\n display: inherit;\\n }\\n}\\n\\n.location-footer-count-mobile {\\n display: none;\\n}\\n@media screen and (max-width: 850px) {\\n .location-footer-count-mobile {\\n display: inherit;\\n }\\n}\\n\\n.upcoming-tasks-overview {\\n position: relative;\\n text-align: center;\\n margin-bottom: 63px;\\n}\\n\\n.upcoming-tasks-overview h3 {\\n padding-top: 25px;\\n font-size: 2em;\\n color: rgb(150, 150, 150);\\n}\\n\\n.upcoming-tasks-overview-items {\\n margin-top: 25px;\\n}\\n\\n.last-added-or-authored-plants {\\n margin-top: 20px;\\n margin-bottom: 40px;\\n margin-left: -20px;\\n margin-right: -20px;\\n padding-bottom: 5px;\\n background-color: rgb(55, 59, 62);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n text-align: center;\\n}\\n\\n.last-added-or-authored-plants h3 {\\n padding-top: 15px;\\n font-size: 2em;\\n color: rgb(150, 150, 150);\\n}\\n\\n.margin-vertical {\\n margin-top: 20px;\\n margin-bottom: 20px;\\n}\\n\\n.margin-bottom {\\n margin-bottom: 20px;\\n}\\n\\n.sorting {\\n position: relative;\\n top: 10px;\\n margin-left: 10px;\\n}\\n\\n.sorting-control {\\n position: relative;\\n display: inline-block;\\n margin-bottom: 10px;\\n}\\n\\n.sorting-control select, .sorting-control input[type=text] {\\n color: rgb(200, 200, 200);\\n background-color: rgba(50, 50, 50, 0.9);\\n border: 1px solid rgb(100, 100, 100);\\n margin-right: 5px;\\n}\\n\\n.sorting-control input[type=text] {\\n height: 27px;\\n border-radius: 290486px;\\n padding-left: 1em;\\n}\\n\\n.select:not(.is-multiple):not(.is-loading)::after {\\n border-color: rgb(50, 115, 220) !important;\\n}\\n\\n.plants {\\n margin-top: 30px;\\n}\\n@media screen and (max-width: 552px) {\\n .plants {\\n text-align: center;\\n }\\n}\\n\\n.plants-empty {\\n position: relative;\\n margin-top: 50px;\\n text-align: center;\\n}\\n\\n.plants-empty-image img {\\n width: 256px;\\n height: 256px;\\n}\\n\\n.plants-empty-text {\\n position: relative;\\n top: -20px;\\n color: rgb(150, 150, 150);\\n font-style: italic;\\n font-size: 1.4em;\\n}\\n\\n.plant-card {\\n position: relative;\\n display: inline-block;\\n width: 245px;\\n height: 375px;\\n margin-left: 10px;\\n margin-right: 10px;\\n margin-bottom: 20px;\\n background-repeat: no-repeat;\\n background-size: cover;\\n border-radius: 10px;\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);\\n}\\n@media screen and (max-width: 552px) {\\n .plant-card {\\n width: 141px;\\n height: 222px;\\n }\\n}\\n\\n.plant-card:hover {\\n box-shadow: 0 0 20px 0 rgba(105, 165, 85, 0.95);\\n}\\n\\n.plant-card-overlay {\\n width: 100%;\\n height: 100%;\\n background: transparent;\\n border-radius: 10px;\\n}\\n\\n.plant-card-overlay:hover {\\n background-color: rgba(0, 0, 0, 0.05);\\n}\\n\\n.plant-card-title {\\n position: absolute;\\n bottom: 0;\\n z-index: 2;\\n width: 100%;\\n height: 69px;\\n padding-top: 17px;\\n background-color: rgba(0, 0, 0, 0.5);\\n color: rgb(200, 200, 200);\\n text-align: center;\\n font-size: 1.2em;\\n border-bottom-left-radius: 10px;\\n border-bottom-right-radius: 10px;\\n}\\n@media screen and (max-width: 552px) {\\n .plant-card-title {\\n padding-top: 22px;\\n font-size: 0.9em;\\n }\\n}\\n\\n.plant-card-title-with-hint {\\n padding-top: 7px;\\n}\\n\\n.plant-card-title-longtext {\\n padding-top: 5px;\\n padding-left: 5px;\\n padding-right: 5px;\\n}\\n@media screen and (max-width: 552px) {\\n .plant-card-title-longtext {\\n padding-top: 12px;\\n padding-left: 2px;\\n padding-right: 2px;\\n }\\n}\\n\\n.plant-card-title-second {\\n color: rgb(150, 150, 150);\\n font-size: 0.8em;\\n}\\n\\n.plant-card-health-state, .plant-card-options {\\n position: absolute;\\n top: 7px;\\n right: 8px;\\n z-index: 2;\\n}\\n\\n.plant-card-options {\\n color: rgb(200, 200, 200);\\n}\\n\\n.plant-card-health-state i {\\n background-color: rgba(0, 0, 0, 0.5);\\n padding: 5px;\\n border-radius: 32%;\\n}\\n\\n@media screen and (min-width: 520px) {\\n .plant-column {\\n padding: 20px;\\n }\\n}\\n@media screen and (max-width: 520px) {\\n .plant-column {\\n display: inline-block;\\n width: 100%;\\n padding-left: 15px;\\n padding-right: 15px;\\n }\\n}\\n@media screen and (max-width: 365px) {\\n .plant-column {\\n display: inline-block;\\n padding-left: unset;\\n padding-right: unset;\\n width: 107% !important;\\n }\\n}\\n\\n.plant-column table {\\n width: 100%;\\n color: rgb(200, 200, 200);\\n}\\n\\n.plant-column table strong {\\n color: rgb(200, 200, 200);\\n}\\n\\n.plant-column thead {\\n background-color: rgba(104, 145, 194, 0.5);\\n}\\n\\n.plant-column table td {\\n border: 1px solid rgb(200, 200, 200);\\n padding: 10px;\\n}\\n\\n.plant-details-title {\\n position: relative;\\n}\\n\\n.plant-details-title h1 {\\n display: inline-block;\\n}\\n\\n.plant-details-title h2 {\\n position: relative;\\n display: inline-block;\\n top: 14px;\\n font-size: 1.5em;\\n color: rgb(100, 100, 100);\\n float: right;\\n}\\n\\n.is-color-yes, .is-color-ok {\\n color: rgb(115, 214, 103);\\n}\\n\\n.is-color-no, .is-color-danger {\\n color: rgb(212, 67, 67);\\n}\\n\\n.is-not-available {\\n color: rgb(100, 100, 100);\\n font-style: italic;\\n}\\n\\n.plant-notes {\\n position: relative;\\n width: 100%;\\n min-width: 300px;\\n min-height: 75px;\\n padding: 10px;\\n color: rgb(200, 200, 200);\\n background-color: rgba(90, 90, 90, 0.5);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n font-size: 1em;\\n border: 1px solid rgb(100, 100, 100);\\n border-left: 3px solid rgb(163, 122, 61);\\n border-radius: 4px;\\n}\\n\\n.plant-notes-content {\\n position: relative;\\n display: inline-block;\\n width: 90%;\\n}\\n\\n.plant-notes-edit {\\n position: relative;\\n display: inline-block;\\n float: right;\\n}\\n\\n.plant-photo {\\n position: relative;\\n width: 345px;\\n height: 543px;\\n background-repeat: no-repeat;\\n background-size: cover;\\n float: right;\\n}\\n@media screen and (max-width: 512px) {\\n .plant-photo {\\n width: 100%;\\n }\\n}\\n\\n.plant-photo-overlay {\\n width: 100%;\\n height: 45px;\\n background-color: rgba(0, 0, 0, 0.8);\\n}\\n\\n.plant-photo-view {\\n position: absolute;\\n top: 10px;\\n left: 10px;\\n}\\n\\n.plant-photo-edit {\\n position: absolute;\\n top: 10px;\\n left: 40px;\\n}\\n\\n.plant-photo-share {\\n position: absolute;\\n top: 10px;\\n right: 10px;\\n}\\n\\n.plant-photo-edit i, .plant-photo-view i, .plant-photo-share i {\\n color: rgb(200, 200, 200);\\n}\\n\\n.plant-state-in-good-standing {\\n color: rgb(115, 214, 103);\\n}\\n\\n.plant-state-overwatered {\\n color: rgb(54, 105, 201);\\n}\\n\\n.plant-state-withering {\\n color: rgb(156, 115, 67);\\n}\\n\\n.plant-state-infected {\\n color: rgb(173, 86, 86);\\n}\\n\\n.plant-warning {\\n margin-top: 10px;\\n margin-bottom: 10px;\\n color: rgb(212, 50, 50);\\n}\\n@media screen and (max-width: 510px) {\\n .plant-warning {\\n margin-bottom: 30px;\\n }\\n}\\n\\n@media screen and (min-width: 795px) {\\n .line-up-frames {\\n display: flex;\\n }\\n}\\n\\n.warning-plants {\\n position: relative;\\n flex: 1;\\n width: 45%;\\n margin-top: -10px;\\n margin-bottom: 45px;\\n margin-right: 5px;\\n margin-left: 10px;\\n padding: 15px 15px 15px 15px;\\n padding-left: 25px;\\n background-color: rgb(55, 59, 62);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n border-radius: 4px;\\n}\\n@media screen and (max-width: 796px) {\\n .warning-plants {\\n flex: unset;\\n display: inline-block;\\n width: 100%;\\n }\\n}\\n@media screen and (max-width: 512px) {\\n .warning-plants {\\n padding-left: 15px;\\n margin-left: unset;\\n }\\n}\\n\\n.has-warnings {\\n color: rgb(200, 105, 105) !important;\\n}\\n\\n.warning-plants-title {\\n margin-top: 10px !important;\\n margin-bottom: 10px;\\n font-size: 1.3em;\\n color: rgb(200, 200, 200);\\n}\\n\\n.warning-plants-title-no-margin-bottom {\\n margin-bottom: unset;\\n}\\n\\n.warning-plants-title-margin-top-25 {\\n margin-top: 25px;\\n}\\n\\n.warning-plants-title-centered {\\n text-align: center;\\n}\\n\\n.warning-plants-content {\\n padding-left: 15px;\\n}\\n\\n.warning-plants-item {\\n color: rgb(150, 150, 150);\\n margin-bottom: 10px;\\n}\\n\\n.history-years {\\n position: relative;\\n margin-top: 30px;\\n margin-bottom: 40px;\\n margin-left: 10px;\\n}\\n\\n.history-year {\\n position: relative;\\n display: inline-block;\\n margin-right: 5px;\\n margin-bottom: 20px;\\n}\\n\\n.history-year a {\\n padding-top: 5px;\\n padding-bottom: 5px;\\n padding-left: 20px;\\n padding-right: 20px;\\n color: rgb(30, 30, 30);\\n background-color: rgba(200, 200, 200, 0.5);\\n border: 1px solid rgb(150, 150, 150);\\n border-radius: 20px;\\n}\\n\\n.history-year a:hover {\\n color: rgb(30, 30, 30);\\n background-color: rgba(200, 200, 200, 0.7);\\n}\\n\\n.history-year-selected a {\\n color: rgb(30, 30, 30);\\n background-color: rgba(220, 220, 220, 0.79);\\n}\\n\\n.history-year-selected a:hover {\\n color: rgb(30, 30, 30);\\n background-color: rgba(250, 250, 250, 0.79);\\n}\\n\\n.overdue-tasks {\\n position: relative;\\n flex: 1;\\n width: 45%;\\n margin-top: -10px;\\n margin-bottom: 45px;\\n margin-left: 5px;\\n margin-right: 10px;\\n padding-top: 2px;\\n padding-left: 30px;\\n padding-right: 30px;\\n padding-bottom: 10px;\\n background-color: rgb(55, 59, 62);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n border-radius: 4px;\\n}\\n@media screen and (max-width: 796px) {\\n .overdue-tasks {\\n flex: unset;\\n display: inline-block;\\n width: 100%;\\n margin-left: unset;\\n }\\n}\\n@media screen and (max-width: 512px) {\\n .overdue-tasks {\\n padding-left: 15px;\\n padding-right: 2px;\\n }\\n}\\n\\n.overdue-tasks-title {\\n margin-top: 20px;\\n margin-bottom: 10px;\\n font-size: 1.3em;\\n color: rgb(200, 105, 105);\\n}\\n\\n.overdue-tasks-content {\\n padding: 10px;\\n}\\n\\n.overdue-tasks-item {\\n color: rgb(150, 150, 150);\\n margin-bottom: 10px;\\n}\\n\\n.log {\\n position: relative;\\n width: 100%;\\n margin-top: 23px;\\n margin-bottom: 45px;\\n padding: 0 15px 15px 15px;\\n border: 1px solid rgb(43, 43, 43);\\n background-color: rgb(50, 54, 59);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n border-radius: 4px;\\n}\\n\\n.log-title {\\n margin-top: 10px;\\n margin-bottom: 10px;\\n font-size: 1.3em;\\n color: rgb(0, 215, 63);\\n}\\n\\n.log-content {\\n max-height: 200px;\\n overflow-y: auto;\\n}\\n\\n.log-item {\\n color: rgb(150, 150, 150);\\n margin-bottom: 10px;\\n}\\n\\n.log-item a {\\n color: rgb(150, 150, 150);\\n}\\n\\n.log-item a:hover {\\n color: rgb(200, 200, 200);\\n}\\n\\n.plant-gallery {\\n position: relative;\\n margin-top: 10px;\\n margin-bottom: 10px;\\n}\\n\\n.plant-gallery-title {\\n margin-bottom: 20px;\\n font-size: 1.5em;\\n color: rgb(150, 150, 150);\\n}\\n\\n.plant-gallery-upload {\\n margin-bottom: 20px;\\n}\\n\\n.plant-gallery-photos {\\n margin-top: 30px;\\n}\\n\\n.plant-gallery-photos strong {\\n color: rgb(100, 100, 100);\\n}\\n\\n.plant-gallery-item {\\n position: relative;\\n display: inline-block;\\n width: 315px;\\n height: auto;\\n margin-left: 10px;\\n margin-right: 10px;\\n margin-bottom: 30px;\\n background-color: rgb(73, 79, 83);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n border-radius: 4px;\\n}\\n\\n.plant-gallery-item-header {\\n padding: 10px;\\n}\\n\\n.plant-gallery-item-header-label {\\n display: inline-block;\\n color: rgb(230, 230, 230);\\n}\\n\\n.plant-gallery-item-header-action {\\n display: inline-block;\\n float: right;\\n}\\n\\n.plant-gallery-item-header-action i.is-action-share {\\n color: rgb(200, 200, 200);\\n}\\n\\n.plant-gallery-item-header-action i.is-action-share:hover {\\n color: rgb(220, 220, 220);\\n}\\n\\n.plant-gallery-item-header-action i.is-action-delete {\\n color: rgb(173, 86, 86);\\n}\\n\\n.plant-gallery-item-header-action i.is-action-delete:hover {\\n color: rgb(173, 90, 90);\\n}\\n\\n.plant-gallery-item-photo {\\n position: relative;\\n}\\n\\n.plant-gallery-item-photo-overlay {\\n position: absolute;\\n z-index: 2;\\n width: 100%;\\n height: 97%;\\n}\\n\\n.plant-gallery-item-photo-overlay:hover {\\n background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n.plant-gallery-item-photo-overlay .plant-gallery-item-photo-image {\\n visibility: hidden;\\n}\\n\\n.plant-gallery-item-photo-overlay:hover .plant-gallery-item-photo-image {\\n visibility: visible;\\n}\\n\\n.plant-gallery-item-footer {\\n position: relative;\\n top: -3px;\\n padding: 10px;\\n color: rgb(135, 135, 135);\\n}\\n\\n.stats {\\n position: relative;\\n margin-top: 10px;\\n margin-bottom: 25px;\\n text-align: center;\\n}\\n\\n.stats-item {\\n position: relative;\\n display: inline-block;\\n width: 243.9px;\\n height: 135px;\\n margin-left: 12px;\\n margin-right: 12px;\\n margin-bottom: 20px;\\n padding: 20px;\\n background-color: rgb(55, 59, 62);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n border-radius: 4px;\\n border-left: 2px solid rgb(159, 165, 45);\\n}\\n@media screen and (max-width: 512px) {\\n .stats-item {\\n width: 135px;\\n }\\n}\\n\\n.stats-item-count {\\n color: rgb(250, 250, 250);\\n font-size: 2em;\\n text-align: center;\\n}\\n\\n.stats-item-label {\\n color: rgb(200, 200, 200);\\n font-size: 1.4em;\\n text-align: center;\\n}\\n\\n.plant-tags {\\n position: relative;\\n}\\n\\n.plant-tags-content {\\n position: relative;\\n display: inline-block;\\n width: 90%;\\n}\\n\\n.plant-tags-edit {\\n position: relative;\\n display: inline-block;\\n float: right;\\n}\\n\\n.plant-tags-item {\\n position: relative;\\n display: inline-block;\\n min-width: 125px;\\n padding-left: 10px;\\n padding-right: 10px;\\n padding-top: 5px;\\n padding-bottom: 9px;\\n margin-left: 5px;\\n margin-right: 5px;\\n margin-bottom: 16px;\\n text-align: center;\\n background-color: rgba(123, 123, 123, 0.3);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n border-radius: 10px;\\n}\\n\\n.plant-tags-item:hover {\\n background-color: rgba(150, 150, 150, 0.5);\\n}\\n\\n.plant-tags-item a {\\n color: rgb(190, 190, 190);\\n}\\n\\n.plant-tags-item a:hover {\\n color: rgb(230, 230, 230);\\n}\\n\\n.tasks {\\n margin-bottom: 50px;\\n}\\n\\n.task {\\n position: relative;\\n display: inline-block;\\n width: 45%;\\n height: auto;\\n margin-left: 10px;\\n margin-right: 10px;\\n margin-bottom: 29px;\\n background-color: rgb(55, 59, 62);\\n border: 1px solid rgb(80, 80, 80);\\n border-radius: 4px;\\n}\\n@media screen and (max-width: 580px) {\\n .task {\\n width: 95%;\\n }\\n}\\n\\n.task-header {\\n position: relative;\\n width: 100%;\\n height: 50px;\\n padding: 10px;\\n border-top-left-radius: 4px;\\n border-top-right-radius: 4px;\\n background-color: rgb(25, 25, 25);\\n}\\n\\n.task-header-title {\\n position: relative;\\n display: inline-block;\\n font-size: 1.2em;\\n color: rgb(200, 200, 200);\\n}\\n\\n.task-header-action {\\n position: relative;\\n display: inline-block;\\n float: right;\\n}\\n\\n.task-header-action a {\\n color: rgb(150, 150, 150);\\n}\\n\\n.task-description {\\n position: relative;\\n height: 150px;\\n margin-bottom: 43px;\\n padding: 10px;\\n font-size: 1em;\\n color: rgb(150, 150, 150);\\n overflow-y: auto;\\n}\\n\\n.task-description pre {\\n background-color: inherit;\\n color: inherit;\\n white-space: pre-wrap;\\n word-wrap: break-word;\\n}\\n\\n.task-footer {\\n position: absolute;\\n bottom: 0;\\n padding: 10px;\\n width: 100%;\\n background-color: rgb(10, 10, 10);\\n border-bottom-left-radius: 4px;\\n border-bottom-right-radius: 4px;\\n font-size: 0.8em;\\n}\\n\\n.task-footer-date {\\n position: relative;\\n display: inline-block;\\n width: 43%;\\n}\\n\\n.task-footer-due {\\n position: relative;\\n display: inline-block;\\n}\\n\\n.is-task-overdue {\\n color: rgb(212, 50, 50);\\n}\\n\\n.task-footer-action {\\n position: relative;\\n display: inline-block;\\n float: right;\\n}\\n\\n.task-footer-action a {\\n color: rgb(150, 150, 150);\\n}\\n\\n.tasks-all-done {\\n position: relative;\\n margin-top: 30px;\\n text-align: center;\\n}\\n\\n.tasks-all-done-image img {\\n width: 256px;\\n height: 256px;\\n}\\n\\n.tasks-all-done-text {\\n color: rgb(120, 215, 105);\\n font-size: 2em;\\n}\\n\\n.inventory {\\n margin-bottom: 50px;\\n}\\n\\n.inventory-item-group {\\n position: relative;\\n width: 100%;\\n padding-left: 10px;\\n padding-right: 10px;\\n padding-top: 5px;\\n padding-bottom: 5px;\\n background-color: rgba(200, 200, 200, 0.76);\\n border: 1px solid rgb(90, 90, 90);\\n}\\n\\n.inventory-item {\\n position: relative;\\n width: 100%;\\n padding-left: 10px;\\n padding-right: 10px;\\n padding-top: 5px;\\n padding-bottom: 5px;\\n background-color: rgba(50, 50, 50, 0.76);\\n border: 1px solid rgb(90, 90, 90);\\n}\\n\\n.inventory-item-header {\\n position: relative;\\n}\\n\\n.inventory-item-name {\\n position: relative;\\n display: inline-block;\\n min-width: 50%;\\n}\\n\\n.inventory-item-name a {\\n color: rgb(150, 150, 150);\\n}\\n\\n.inventory-item-name a:hover {\\n color: rgb(150, 150, 150);\\n}\\n\\n.inventory-item-amount {\\n position: relative;\\n display: inline-block;\\n}\\n\\n.inventory-item-amount i {\\n color: rgb(150, 150, 150);\\n}\\n\\n.inventory-item-amount span {\\n color: rgb(215, 215, 215);\\n}\\n\\n.is-inventory-item-empty {\\n color: rgb(212, 50, 50) !important;\\n}\\n\\n.inventory-item-actions {\\n position: relative;\\n display: inline-block;\\n float: right;\\n}\\n\\n.inventory-item-actions i {\\n color: rgb(100, 100, 100);\\n}\\n\\n.inventory-item-body {\\n position: relative;\\n height: 0;\\n opacity: 0;\\n overflow: hidden;\\n -webkit-transition: opacity 1s ease-out;\\n -moz-transition: opacity 1s ease-out;\\n transition: opacity 1s ease-out;\\n}\\n\\n.inventory-item-body.expand {\\n height: auto;\\n opacity: 1;\\n}\\n\\n.inventory-item-description {\\n position: relative;\\n color: rgb(100, 100, 100);\\n margin-top: 10px;\\n margin-bottom: 10px;\\n}\\n\\n.inventory-item-description pre {\\n background-color: inherit;\\n color: inherit;\\n white-space: normal;\\n}\\n\\n.inventory-item-photo {\\n position: relative;\\n text-align: center;\\n}\\n\\n.inventory-item-author {\\n position: relative;\\n color: rgb(100, 100, 100);\\n margin-top: 10px;\\n}\\n\\n.inventory-groups {\\n width: 100%;\\n}\\n\\n.inventory-groups a {\\n color: rgb(50, 50, 50);\\n}\\n\\n.inventory-groups a:hover {\\n color: rgb(50, 50, 50);\\n text-decoration: underline;\\n}\\n\\n.chat-message {\\n position: relative;\\n width: 90%;\\n padding: 15px;\\n margin-bottom: 20px;\\n background-color: rgba(200, 200, 200, 0.5);\\n border-radius: 10px;\\n}\\n\\n.chat-message-right {\\n margin-left: 10%;\\n background-color: rgba(115, 143, 100, 0.9);\\n}\\n\\n.chat-message-user {\\n position: relative;\\n font-size: 1.2em;\\n margin-bottom: 10px;\\n}\\n\\n.chat-message-new {\\n position: relative;\\n display: inline-block;\\n background-color: rgb(212, 130, 67);\\n border: 1px solid rgb(92, 64, 25);\\n color: rgb(250, 250, 250);\\n border-radius: 4px;\\n padding: 5px;\\n font-size: 0.5em;\\n text-transform: uppercase;\\n float: right;\\n}\\n\\n.chat-message-content {\\n position: relative;\\n}\\n\\n.chat-message-content pre {\\n background-color: transparent;\\n color: rgb(255, 255, 255);\\n}\\n\\n.chat-message-info {\\n position: relative;\\n margin-top: 10px;\\n font-size: 0.76em;\\n color: rgb(155, 155, 155);\\n}\\n\\n.chat-typing-indicator {\\n display: none;\\n background-color: rgba(50, 50, 50, 0.5);\\n}\\n\\n.chat-typing-indicator.visible {\\n display: block;\\n}\\n\\n.chat-user-list {\\n position: relative;\\n margin-top: 10px;\\n margin-bottom: 23px;\\n color: rgb(92, 255, 0);\\n}\\n\\n.system-message {\\n position: relative;\\n background-color: rgb(205, 202, 165);\\n border-radius: 10px;\\n padding: 20px;\\n margin-bottom: 20px;\\n}\\n\\n.system-message-left {\\n position: relative;\\n display: inline-block;\\n width: 93%;\\n}\\n@media screen and (max-width: 1000px) {\\n .system-message-left {\\n width: 80%;\\n }\\n}\\n\\n.system-message-left-new {\\n top: -3px;\\n}\\n\\n.system-message-right {\\n position: relative;\\n display: inline-block;\\n top: 3px;\\n}\\n\\n.system-message-context {\\n position: relative;\\n display: inline-block;\\n font-weight: bold;\\n}\\n\\n.system-message-content {\\n position: relative;\\n display: inline-block;\\n}\\n@media screen and (max-width: 768px) {\\n .system-message-content {\\n margin-top: 10px;\\n }\\n}\\n\\n.system-message-content a {\\n color: rgb(135, 75, 5);\\n}\\n\\n.system-message-content a:hover {\\n color: rgb(135, 75, 5);\\n text-decoration: underline;\\n}\\n\\n@media screen and (max-width: 768px) {\\n .system-message-new {\\n top: -58px;\\n }\\n}\\n\\n#small-system-messages {\\n position: fixed;\\n z-index: 3;\\n top: 55px;\\n}\\n@media screen and (max-width: 512px) {\\n #small-system-messages {\\n width: 100%;\\n }\\n}\\n\\n.system-message-small {\\n position: relative;\\n top: 12px;\\n left: 12px;\\n background-color: rgb(205, 202, 165);\\n border-radius: 10px;\\n border: 1px solid rgb(250, 250, 250);\\n padding: 20px;\\n margin-bottom: 10px;\\n}\\n@media screen and (max-width: 512px) {\\n .system-message-small {\\n width: 100%;\\n left: 0;\\n }\\n}\\n\\n.system-message-small-context {\\n font-weight: bold;\\n}\\n\\n.system-message-small-content a {\\n color: rgb(135, 75, 5);\\n}\\n\\n.system-message-small-content a:hover {\\n color: rgb(135, 75, 5);\\n text-decoration: underline;\\n}\\n\\n.scroll-to-top {\\n position: fixed;\\n z-index: 102;\\n bottom: 12px;\\n right: 12px;\\n}\\n\\n.scroll-to-top-inner {\\n background-color: rgb(80, 80, 80);\\n border-radius: 50%;\\n padding: 12px;\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\\n}\\n\\n.scroll-to-top-inner a {\\n color: rgb(200, 200, 200);\\n}\\n\\n.auth-main {\\n width: 100%;\\n height: 100%;\\n background-repeat: no-repeat;\\n background-size: cover;\\n}\\n\\n.auth-overlay {\\n width: 100%;\\n height: 100%;\\n background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n.auth-content {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n text-align: center;\\n padding: 20px;\\n}\\n\\n.auth-header {\\n position: relative;\\n margin-bottom: 20px;\\n}\\n\\n.auth-header img {\\n position: relative;\\n width: 128px;\\n height: 128px;\\n border-radius: 50%;\\n}\\n\\n.auth-header h1 {\\n font-size: 2.5em;\\n font-family: Quicksand, Verdana, Geneva, Tahoma, sans-serif;\\n font-weight: bold;\\n color: rgb(150, 150, 150);\\n}\\n\\n.auth-info {\\n position: relative;\\n margin-bottom: 43px;\\n}\\n\\n.auth-info-error {\\n color: rgb(154, 73, 69);\\n}\\n\\n.auth-info-success {\\n color: rgb(69, 154, 83);\\n}\\n\\n.auth-form {\\n position: relative;\\n}\\n\\n.auth-form input[type=email], .auth-form input[type=password] {\\n color: rgb(150, 150, 150);\\n background-color: rgb(50, 50, 50);\\n}\\n\\n.auth-form input[type=email]::placeholder, .auth-form input[type=password]::placeholder {\\n color: rgb(200, 200, 200);\\n}\\n\\n.auth-form input[type=submit] {\\n width: 100%;\\n}\\n\\n.auth-help {\\n position: relative;\\n margin-top: 20px;\\n}\\n\\n.auth-help a {\\n color: rgb(54, 105, 203);\\n}\\n\\n.auth-help a:hover {\\n color: rgb(54, 105, 203);\\n text-decoration: underline;\\n}\\n\\n.reset-main {\\n width: 100%;\\n height: 100%;\\n background-repeat: no-repeat;\\n background-size: cover;\\n}\\n\\n.reset-overlay {\\n width: 100%;\\n height: 100%;\\n background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n.reset-content {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n text-align: center;\\n padding: 20px;\\n}\\n\\n.reset-content h1 {\\n margin-bottom: 30px;\\n line-height: 1;\\n}\\n\\n.reset-info {\\n position: relative;\\n margin-bottom: 43px;\\n}\\n\\n.reset-info-error {\\n color: rgb(154, 73, 69);\\n}\\n\\n.reset-info-success {\\n color: rgb(69, 154, 83);\\n}\\n\\n.reset-form {\\n position: relative;\\n}\\n\\n.reset-form input[type=email], .reset-form input[type=password] {\\n color: rgb(150, 150, 150);\\n background-color: rgb(50, 50, 50);\\n}\\n\\n.reset-form input[type=email]::placeholder, .reset-form input[type=password]::placeholder {\\n color: rgb(200, 200, 200);\\n}\\n\\n.reset-form input[type=submit] {\\n width: 100%;\\n}\\n\\n.preferences-header {\\n position: relative;\\n}\\n\\n.preferences-header i {\\n color: rgb(150, 150, 150);\\n}\\n\\n.admin-tabs {\\n margin-top: 23px;\\n}\\n\\n.admin-tabs a {\\n color: rgb(200, 200, 200);\\n}\\n\\n.admin-tabs a:hover {\\n color: rgb(230, 230, 230);\\n border-bottom-color: rgb(111, 172, 243);\\n}\\n\\n.admin-environment {\\n position: relative;\\n}\\n\\n.admin-environment h2 {\\n margin-top: 20px;\\n margin-bottom: 10px;\\n}\\n\\n.admin-environment label, .admin-environment span {\\n color: rgb(150, 150, 150);\\n}\\n\\n.admin-environment input, .admin-environment select {\\n color: rgb(150, 150, 150);\\n background-color: rgb(50, 50, 50);\\n}\\n\\n.admin-media {\\n position: relative;\\n width: 100%;\\n}\\n\\n.admin-media h2 {\\n margin-top: 20px;\\n margin-bottom: 20px;\\n}\\n\\n.admin-media label {\\n color: rgb(150, 150, 150);\\n}\\n\\n.admin-media input, .admin-backup input {\\n color: rgb(150, 150, 150);\\n background-color: rgb(50, 50, 50);\\n}\\n\\n.admin-media input[type=submit] {\\n margin-top: 10px;\\n margin-bottom: 20px;\\n}\\n\\n.admin-users {\\n position: relative;\\n width: 100%;\\n}\\n\\n.admin-users h2 {\\n margin-top: 20px;\\n margin-bottom: 20px;\\n}\\n\\n.admin-users-list {\\n position: relative;\\n}\\n\\n.admin-user-account {\\n position: relative;\\n margin-bottom: 15px;\\n}\\n\\n.admin-user-account label, .admin-user-account span {\\n color: rgb(150, 150, 150);\\n}\\n\\n.admin-user-account input, .admin-user-account select {\\n color: rgb(150, 150, 150);\\n background-color: rgb(50, 50, 50);\\n}\\n\\n.admin-user-account-item {\\n position: relative;\\n display: inline-block;\\n margin-left: 5px;\\n margin-right: 5px;\\n}\\n\\n.admin-user-account-item-input {\\n width: 30%;\\n}\\n\\n.admin-user-account-actions {\\n position: relative;\\n display: inline-block;\\n}\\n\\n.admin-user-account-item-centered {\\n text-align: center;\\n}\\n\\n.admin-user-account-action-item {\\n position: relative;\\n}\\n\\n.admin-users-actions {\\n position: relative;\\n margin-top: 20px;\\n}\\n\\n.admin-locations {\\n position: relative;\\n width: 100%;\\n}\\n\\n.admin-locations h2 {\\n margin-top: 20px;\\n margin-bottom: 20px;\\n}\\n\\n.admin-locations-list {\\n position: relative;\\n}\\n\\n.admin-location {\\n position: relative;\\n margin-bottom: 15px;\\n}\\n\\n.admin-location label, .admin-location span {\\n color: rgb(150, 150, 150);\\n}\\n\\n.admin-location input {\\n color: rgb(150, 150, 150);\\n background-color: rgb(50, 50, 50);\\n}\\n\\n.admin-location-item {\\n position: relative;\\n display: inline-block;\\n margin-left: 5px;\\n margin-right: 5px;\\n}\\n\\n.admin-location-item-input {\\n width: 30%;\\n}\\n\\n.admin-location-actions {\\n position: relative;\\n display: inline-block;\\n}\\n\\n.admin-location-item-centered {\\n text-align: center;\\n}\\n\\n.admin-location-action-item {\\n position: relative;\\n}\\n\\n.admin-locations-actions {\\n position: relative;\\n margin-top: 20px;\\n}\\n\\n.admin-mail {\\n position: relative;\\n}\\n\\n.admin-mail h2 {\\n margin-top: 20px;\\n margin-bottom: 10px;\\n}\\n\\n.admin-mail label, .admin-mail span {\\n color: rgb(150, 150, 150);\\n}\\n\\n.admin-mail input, .admin-mail select {\\n color: rgb(150, 150, 150);\\n background-color: rgb(50, 50, 50);\\n}\\n\\n.admin-backup label, .admin-backup span {\\n color: rgb(150, 150, 150);\\n}\\n\\n.admin-backup-result {\\n position: relative;\\n padding: 10px;\\n border-radius: 5px;\\n border: 1px solid rgb(255, 255, 255);\\n background-color: rgb(185, 255, 164);\\n}\\n\\n.admin-backup-result i {\\n color: rgb(50, 50, 50);\\n}\\n\\n.admin-backup-result a {\\n color: rgb(15, 150, 43);\\n}\\n\\n.admin-backup-result a:hover {\\n color: rgb(15, 150, 43);\\n text-decoration: underline;\\n}\\n\\n.admin-info {\\n position: relative;\\n}\\n\\n.admin-info-version {\\n color: rgb(200, 200, 200);\\n font-size: 1.5em;\\n}\\n\\n.admin-info-version-smaller {\\n color: rgb(150, 150, 150);\\n font-size: 0.76em;\\n}\\n\\n.version-check {\\n position: relative;\\n margin-top: 30px;\\n}\\n\\n.version-info {\\n position: relative;\\n padding: 20px;\\n margin-top: 30px;\\n color: rgb(250, 250, 250);\\n background-color: rgba(102, 202, 160, 0.76);\\n border: 1px solid rgb(150, 236, 200);\\n border-radius: 10px;\\n}\\n\\n.version-info a {\\n color: rgb(132, 255, 123);\\n font-weight: bold;\\n}\\n\\n.version-info a:hover {\\n color: rgb(132, 255, 123);\\n text-decoration: underline;\\n}\\n\\n.bottomnav {\\n position: fixed;\\n bottom: 0;\\n width: 100%;\\n height: 70px;\\n z-index: 100;\\n padding-left: 5px;\\n padding-right: 5px;\\n background-color: rgb(50, 50, 50);\\n}\\n@media screen and (min-width: 1087px) {\\n .bottomnav {\\n display: none;\\n }\\n}\\n\\n.bottomnav-items {\\n position: relative;\\n display: block;\\n top: 10px;\\n width: 100%;\\n height: 100%;\\n margin-left: auto;\\n margin-right: auto;\\n text-align: center;\\n}\\n\\n.bottomnav-item {\\n position: relative;\\n display: inline-block;\\n width: 65px;\\n height: 50px;\\n margin-top: 6px;\\n color: rgb(150, 150, 150);\\n text-align: center;\\n font-size: 0.8em;\\n}\\n\\n.bottomnav-item a {\\n color: rgb(150, 150, 150);\\n}\\n\\n.bottomnav-item a:hover {\\n color: rgb(200, 200, 200);\\n text-decoration: none;\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://asatruphp/./app/resources/sass/app.scss?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/*\\n app.scss\\n*/\\nhtml, body {\\n width: 100%;\\n height: 100%;\\n padding: 0;\\n margin: 0;\\n background-color: rgb(48, 52, 55);\\n}\\n\\nbody {\\n overflow-x: hidden;\\n}\\n\\n.is-image-container {\\n background-repeat: no-repeat;\\n background-size: cover;\\n padding: unset;\\n}\\n\\n.column-overlay {\\n width: 100%;\\n height: 100%;\\n padding: 20px;\\n background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\nh1 {\\n font-size: 2.5em;\\n color: rgb(250, 250, 250);\\n}\\n\\nh2 {\\n font-size: 2em;\\n margin-bottom: 30px;\\n color: rgb(200, 200, 200);\\n}\\n\\n.smaller-headline {\\n font-size: 1.2em;\\n margin-bottom: 15px;\\n}\\n\\n.is-default-link {\\n color: rgb(79, 134, 202);\\n}\\n\\n.is-default-link:hover {\\n color: rgb(79, 134, 202);\\n text-decoration: underline;\\n}\\n\\n.is-yellow-link {\\n color: rgb(156, 115, 67);\\n}\\n\\n.is-yellow-link:hover {\\n color: rgb(156, 115, 67);\\n text-decoration: underline;\\n}\\n\\n.is-fixed-button-link {\\n position: relative;\\n top: 5px;\\n}\\n\\n.is-default-text-color {\\n color: rgb(150, 150, 150);\\n}\\n\\n.is-color-darker {\\n color: rgb(100, 100, 100);\\n}\\n\\n.is-color-error {\\n color: rgb(154, 73, 69);\\n}\\n\\n.is-input-dark {\\n background-color: rgba(90, 90, 90, 0.5);\\n color: rgb(200, 200, 200);\\n border: 1px solid rgb(100, 100, 100);\\n}\\n\\n.is-action-button-margin {\\n margin-right: 10px;\\n margin-bottom: 10px;\\n}\\n@media screen and (max-width: 376px) {\\n .is-action-button-margin {\\n margin-right: 15px;\\n }\\n}\\n\\n.is-underlined {\\n text-decoration: underline;\\n}\\n\\n.is-stretched {\\n width: 100%;\\n}\\n\\n.is-pointer {\\n cursor: pointer;\\n}\\n\\n.is-indicator {\\n position: absolute;\\n width: 10px;\\n height: 10px;\\n top: 17px;\\n left: 20px;\\n background-color: rgb(223, 50, 50);\\n border-radius: 50%;\\n z-index: 5;\\n}\\n@media screen and (max-width: 1087px) {\\n .is-indicator {\\n top: 10px;\\n left: 22px;\\n }\\n}\\n\\n.is-indicator-tab {\\n position: relative;\\n width: 10px;\\n height: 10px;\\n top: -4px;\\n left: -3px;\\n background-color: rgb(223, 50, 50);\\n border-radius: 50%;\\n z-index: 5;\\n}\\n\\n.is-background-success-light {\\n background-color: rgb(215, 253, 200);\\n}\\n\\n.float-right {\\n float: right;\\n}\\n\\n.belongs-to-previous-field {\\n position: relative;\\n top: -5px;\\n margin-bottom: 20px !important;\\n}\\n\\n.is-next-to-elem {\\n position: relative;\\n top: 5px;\\n margin-left: 10px;\\n}\\n@media screen and (max-width: 453px) {\\n .is-next-to-elem {\\n top: -3px;\\n margin-bottom: 20px !important;\\n margin-left: unset;\\n }\\n}\\n\\n.is-margin-bottom-20 {\\n margin-bottom: 20px !important;\\n}\\n\\n.field small {\\n color: rgb(120, 120, 120);\\n}\\n\\n.form-paragraph-modal a {\\n color: rgb(5, 67, 183);\\n}\\n\\n.form-paragraph-modal a:hover {\\n color: rgb(5, 67, 183);\\n text-decoration: underline;\\n}\\n\\n.navbar-item a {\\n color: rgb(200, 200, 200);\\n}\\n\\n.navbar-item a:hover {\\n color: rgb(250, 250, 250);\\n}\\n\\na.navbar-item:hover, a.navbar-item.is-active, .navbar-link:hover, .navbar-link.is-active {\\n background-color: rgba(255, 255, 255, 0) !important;\\n color: rgb(180, 180, 180) !important;\\n}\\n\\n.navbar-item, .navbar-burger, .navbar-link {\\n color: rgb(190, 190, 190);\\n}\\n\\n.navbar-dropdown {\\n background-color: rgb(50, 50, 48);\\n padding-top: unset;\\n}\\n\\n.navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link {\\n background-color: rgba(0, 0, 0, 0);\\n}\\n\\n@media screen and (max-width: 1087px) {\\n .navbar-menu {\\n background-color: rgb(50, 50, 48);\\n }\\n}\\na.navbar-burger:hover {\\n color: rgb(200, 200, 200);\\n}\\n\\n@media screen and (min-width: 1088px) {\\n .navbar-start {\\n flex-grow: 1;\\n justify-content: center;\\n }\\n}\\n\\n@media screen and (min-width: 1089px) {\\n .navbar-item-only-mobile {\\n display: none;\\n }\\n}\\n\\n@media screen and (min-width: 1089px) {\\n .navbar-dropdown-minwidth {\\n display: block;\\n top: 5px;\\n min-width: 135px;\\n text-align: center;\\n }\\n}\\n\\n@media screen and (min-width: 1089px) {\\n .navbar-dropdown-minwidth:not(.is-multiple):not(.is-loading)::after {\\n top: 20px !important;\\n }\\n}\\n\\n@media screen and (max-width: 1087px) {\\n .navbar-item-brand-mobile-right {\\n position: absolute;\\n top: 10px;\\n right: 45px;\\n }\\n}\\n@media screen and (min-width: 1089px) {\\n .navbar-item-brand-mobile-right {\\n display: none;\\n }\\n}\\n\\n@media screen and (max-width: 1087px) {\\n .navbar.is-fixed-top-pwa {\\n position: fixed;\\n top: 0;\\n left: 0;\\n right: 0;\\n z-index: 30;\\n }\\n}\\n\\n@media screen and (min-width: 768px) {\\n .column h1 {\\n margin-top: 20px;\\n }\\n}\\n\\n.banner {\\n width: 100%;\\n height: 250px;\\n background-repeat: no-repeat;\\n background-size: 100% 100%;\\n}\\n@media screen and (max-width: 768px) {\\n .banner {\\n display: none;\\n }\\n}\\n\\n.banner-icon {\\n position: relative;\\n top: 210px;\\n left: 195px;\\n}\\n\\n.banner-icon img {\\n width: 72px;\\n height: 72px;\\n}\\n\\n.banner-accessory {\\n position: relative;\\n top: 172px;\\n right: -83%;\\n}\\n\\n.banner-accessory img {\\n width: 256px;\\n height: 256px;\\n}\\n\\n.content-inner {\\n position: relative;\\n padding: 15px;\\n}\\n\\n.modal {\\n z-index: 105;\\n}\\n\\n.fade {\\n transition: opacity 0.65s linear;\\n}\\n\\n.fade-in {\\n opacity: 1;\\n}\\n\\n.fade-out {\\n opacity: 0;\\n}\\n\\n@media screen and (max-width: 1087px) {\\n .app-padding-pwa {\\n padding-top: 65px;\\n padding-bottom: 87px;\\n }\\n}\\n@media screen and (max-width: 768px) {\\n .app-padding-pwa {\\n padding-top: 41px;\\n padding-bottom: 87px;\\n }\\n}\\n\\nfieldset legend {\\n margin-bottom: 5px !important;\\n}\\n\\nfieldset .field {\\n margin-bottom: unset !important;\\n}\\n\\n.notification-badge {\\n color: rgb(255, 255, 255);\\n text-decoration: none;\\n border-radius: 2px;\\n}\\n\\n.notification-badge .notify-badge {\\n padding: 1px 7px;\\n border-radius: 50%;\\n background: rgb(255, 0, 0);\\n color: rgb(255, 255, 255);\\n font-size: 0.8em;\\n}\\n@media screen and (min-width: 1089px) {\\n .notification-badge .notify-badge {\\n position: absolute;\\n right: -5px;\\n top: 4px;\\n }\\n}\\n@media screen and (max-width: 1087px) {\\n .notification-badge .notify-badge {\\n position: relative;\\n right: -4px;\\n top: -10px;\\n }\\n}\\n\\n.notify-badge .notify-badge-count {\\n position: relative;\\n top: -2px;\\n}\\n\\n.locations {\\n text-align: center;\\n}\\n\\n.locations a {\\n color: rgb(100, 100, 100);\\n}\\n\\n.locations a:hover {\\n color: rgb(100, 100, 100);\\n}\\n\\n.location {\\n position: relative;\\n display: inline-block;\\n width: 245px;\\n height: 250px;\\n margin-left: 10px;\\n margin-right: 10px;\\n margin-bottom: 30px;\\n background-color: rgb(55, 59, 62);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n}\\n@media screen and (max-width: 830px) {\\n .location {\\n width: 134px;\\n height: 137px;\\n }\\n}\\n\\n.location:hover {\\n box-shadow: 0 0 20px 0 rgba(105, 165, 85, 0.95);\\n}\\n\\n.location-title {\\n text-align: center;\\n font-size: 2em;\\n padding-bottom: 4px;\\n margin-bottom: 20px;\\n background-color: rgba(115, 143, 100, 0.9);\\n color: #c3e4a3;\\n}\\n@media screen and (max-width: 830px) {\\n .location-title {\\n font-size: 1em;\\n padding-top: 2px;\\n padding-bottom: 5px;\\n }\\n}\\n@media screen and (min-width: 831px) {\\n .location-title {\\n padding-bottom: 15px;\\n }\\n}\\n\\n.location-icon {\\n text-align: center;\\n}\\n\\n.location-icon i {\\n color: #99ac97;\\n font-size: 5em;\\n}\\n@media screen and (max-width: 830px) {\\n .location-icon i {\\n font-size: 2em;\\n }\\n}\\n@media screen and (min-width: 831px) {\\n .location-icon i {\\n margin-top: 25px;\\n }\\n}\\n\\n.location-footer {\\n position: relative;\\n bottom: -30px;\\n padding-top: 10px;\\n padding-left: 10px;\\n padding-bottom: 10px;\\n font-size: 0.9em;\\n text-align: left;\\n background-color: rgb(50, 54, 59);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n}\\n@media screen and (max-width: 830px) {\\n .location-footer {\\n font-size: 0.75em;\\n bottom: -15px;\\n }\\n}\\n\\n.location-footer-count-desktop {\\n display: none;\\n}\\n@media screen and (min-width: 850px) {\\n .location-footer-count-desktop {\\n display: inherit;\\n }\\n}\\n\\n.location-footer-count-mobile {\\n display: none;\\n}\\n@media screen and (max-width: 850px) {\\n .location-footer-count-mobile {\\n display: inherit;\\n }\\n}\\n\\n.upcoming-tasks-overview {\\n position: relative;\\n text-align: center;\\n margin-bottom: 63px;\\n}\\n\\n.upcoming-tasks-overview h3 {\\n padding-top: 25px;\\n font-size: 2em;\\n color: rgb(150, 150, 150);\\n}\\n\\n.upcoming-tasks-overview-items {\\n margin-top: 25px;\\n}\\n\\n.last-added-or-authored-plants {\\n margin-top: 20px;\\n margin-bottom: 40px;\\n margin-left: -20px;\\n margin-right: -20px;\\n padding-bottom: 5px;\\n background-color: rgb(55, 59, 62);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n text-align: center;\\n}\\n\\n.last-added-or-authored-plants h3 {\\n padding-top: 15px;\\n font-size: 2em;\\n color: rgb(150, 150, 150);\\n}\\n\\n.margin-vertical {\\n margin-top: 20px;\\n margin-bottom: 20px;\\n}\\n\\n.margin-bottom {\\n margin-bottom: 20px;\\n}\\n\\n.sorting {\\n position: relative;\\n top: 10px;\\n margin-left: 10px;\\n}\\n\\n.sorting-control {\\n position: relative;\\n display: inline-block;\\n margin-bottom: 10px;\\n}\\n\\n.sorting-control select, .sorting-control input[type=text] {\\n color: rgb(200, 200, 200);\\n background-color: rgba(50, 50, 50, 0.9);\\n border: 1px solid rgb(100, 100, 100);\\n margin-right: 5px;\\n}\\n\\n.sorting-control input[type=text] {\\n height: 27px;\\n border-radius: 290486px;\\n padding-left: 1em;\\n}\\n\\n.select:not(.is-multiple):not(.is-loading)::after {\\n border-color: rgb(50, 115, 220) !important;\\n}\\n\\n.plants {\\n margin-top: 30px;\\n}\\n@media screen and (max-width: 552px) {\\n .plants {\\n text-align: center;\\n }\\n}\\n\\n.plants-empty {\\n position: relative;\\n margin-top: 50px;\\n text-align: center;\\n}\\n\\n.plants-empty-image img {\\n width: 256px;\\n height: 256px;\\n}\\n\\n.plants-empty-text {\\n position: relative;\\n top: -20px;\\n color: rgb(150, 150, 150);\\n font-style: italic;\\n font-size: 1.4em;\\n}\\n\\n.plant-card {\\n position: relative;\\n display: inline-block;\\n width: 245px;\\n height: 375px;\\n margin-left: 10px;\\n margin-right: 10px;\\n margin-bottom: 20px;\\n background-repeat: no-repeat;\\n background-size: cover;\\n border-radius: 10px;\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);\\n}\\n@media screen and (max-width: 552px) {\\n .plant-card {\\n width: 141px;\\n height: 222px;\\n }\\n}\\n\\n.plant-card:hover {\\n box-shadow: 0 0 20px 0 rgba(105, 165, 85, 0.95);\\n}\\n\\n.plant-card-overlay {\\n width: 100%;\\n height: 100%;\\n background: transparent;\\n border-radius: 10px;\\n}\\n\\n.plant-card-overlay:hover {\\n background-color: rgba(0, 0, 0, 0.05);\\n}\\n\\n.plant-card-title {\\n position: absolute;\\n bottom: 0;\\n z-index: 2;\\n width: 100%;\\n height: 69px;\\n padding-top: 17px;\\n background-color: rgba(0, 0, 0, 0.5);\\n color: rgb(200, 200, 200);\\n text-align: center;\\n font-size: 1.2em;\\n border-bottom-left-radius: 10px;\\n border-bottom-right-radius: 10px;\\n}\\n@media screen and (max-width: 552px) {\\n .plant-card-title {\\n padding-top: 22px;\\n font-size: 0.9em;\\n }\\n}\\n\\n.plant-card-title-with-hint {\\n padding-top: 7px;\\n}\\n\\n.plant-card-title-longtext {\\n padding-top: 5px;\\n padding-left: 5px;\\n padding-right: 5px;\\n}\\n@media screen and (max-width: 552px) {\\n .plant-card-title-longtext {\\n padding-top: 12px;\\n padding-left: 2px;\\n padding-right: 2px;\\n }\\n}\\n\\n.plant-card-title-second {\\n color: rgb(150, 150, 150);\\n font-size: 0.8em;\\n}\\n\\n.plant-card-health-state, .plant-card-options {\\n position: absolute;\\n top: 7px;\\n right: 8px;\\n z-index: 2;\\n}\\n\\n.plant-card-options {\\n color: rgb(200, 200, 200);\\n}\\n\\n.plant-card-health-state i {\\n background-color: rgba(0, 0, 0, 0.5);\\n padding: 5px;\\n border-radius: 32%;\\n}\\n\\n@media screen and (min-width: 520px) {\\n .plant-column {\\n padding: 20px;\\n }\\n}\\n@media screen and (max-width: 520px) {\\n .plant-column {\\n display: inline-block;\\n width: 100%;\\n padding-left: 15px;\\n padding-right: 15px;\\n }\\n}\\n@media screen and (max-width: 365px) {\\n .plant-column {\\n display: inline-block;\\n padding-left: unset;\\n padding-right: unset;\\n width: 107% !important;\\n }\\n}\\n\\n.plant-column table {\\n width: 100%;\\n color: rgb(200, 200, 200);\\n}\\n\\n.plant-column table strong {\\n color: rgb(200, 200, 200);\\n}\\n\\n.plant-column thead {\\n background-color: rgba(104, 145, 194, 0.5);\\n}\\n\\n.plant-column table td {\\n border: 1px solid rgb(200, 200, 200);\\n padding: 10px;\\n}\\n\\n.plant-details-title {\\n position: relative;\\n}\\n\\n.plant-details-title h1 {\\n display: inline-block;\\n}\\n\\n.plant-details-title h2 {\\n position: relative;\\n display: inline-block;\\n top: 14px;\\n font-size: 1.5em;\\n color: rgb(100, 100, 100);\\n float: right;\\n}\\n\\n.is-color-yes, .is-color-ok {\\n color: rgb(115, 214, 103);\\n}\\n\\n.is-color-no, .is-color-danger {\\n color: rgb(212, 67, 67);\\n}\\n\\n.is-not-available {\\n color: rgb(100, 100, 100);\\n font-style: italic;\\n}\\n\\n.plant-notes {\\n position: relative;\\n width: 100%;\\n min-width: 300px;\\n min-height: 75px;\\n padding: 10px;\\n color: rgb(200, 200, 200);\\n background-color: rgba(90, 90, 90, 0.5);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n font-size: 1em;\\n border: 1px solid rgb(100, 100, 100);\\n border-left: 3px solid rgb(163, 122, 61);\\n border-radius: 4px;\\n}\\n\\n.plant-notes-content {\\n position: relative;\\n display: inline-block;\\n width: 90%;\\n}\\n\\n.plant-notes-edit {\\n position: relative;\\n display: inline-block;\\n float: right;\\n}\\n\\n.plant-photo {\\n position: relative;\\n width: 345px;\\n height: 543px;\\n background-repeat: no-repeat;\\n background-size: cover;\\n float: right;\\n}\\n@media screen and (max-width: 512px) {\\n .plant-photo {\\n width: 100%;\\n }\\n}\\n\\n.plant-photo-overlay {\\n width: 100%;\\n height: 45px;\\n background-color: rgba(0, 0, 0, 0.8);\\n}\\n\\n.plant-photo-view {\\n position: absolute;\\n top: 10px;\\n left: 10px;\\n}\\n\\n.plant-photo-edit {\\n position: absolute;\\n top: 10px;\\n left: 40px;\\n}\\n\\n.plant-photo-share {\\n position: absolute;\\n top: 10px;\\n right: 10px;\\n}\\n\\n.plant-photo-edit i, .plant-photo-view i, .plant-photo-share i {\\n color: rgb(200, 200, 200);\\n}\\n\\n.plant-state-in-good-standing {\\n color: rgb(115, 214, 103);\\n}\\n\\n.plant-state-overwatered {\\n color: rgb(54, 105, 201);\\n}\\n\\n.plant-state-withering {\\n color: rgb(156, 115, 67);\\n}\\n\\n.plant-state-infected {\\n color: rgb(173, 86, 86);\\n}\\n\\n.plant-warning {\\n margin-top: 10px;\\n margin-bottom: 10px;\\n color: rgb(212, 50, 50);\\n}\\n@media screen and (max-width: 510px) {\\n .plant-warning {\\n margin-bottom: 30px;\\n }\\n}\\n\\n@media screen and (min-width: 795px) {\\n .line-up-frames {\\n display: flex;\\n }\\n}\\n\\n.warning-plants {\\n position: relative;\\n flex: 1;\\n width: 45%;\\n margin-top: -10px;\\n margin-bottom: 45px;\\n margin-right: 5px;\\n margin-left: 10px;\\n padding: 15px 15px 15px 15px;\\n padding-left: 25px;\\n background-color: rgb(55, 59, 62);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n border-radius: 4px;\\n}\\n@media screen and (max-width: 796px) {\\n .warning-plants {\\n flex: unset;\\n display: inline-block;\\n width: 100%;\\n }\\n}\\n@media screen and (max-width: 512px) {\\n .warning-plants {\\n padding-left: 15px;\\n margin-left: unset;\\n }\\n}\\n\\n.has-warnings {\\n color: rgb(200, 105, 105) !important;\\n}\\n\\n.warning-plants-title {\\n margin-top: 10px !important;\\n margin-bottom: 10px;\\n font-size: 1.3em;\\n color: rgb(200, 200, 200);\\n}\\n\\n.warning-plants-title-no-margin-bottom {\\n margin-bottom: unset;\\n}\\n\\n.warning-plants-title-margin-top-25 {\\n margin-top: 25px;\\n}\\n\\n.warning-plants-title-centered {\\n text-align: center;\\n}\\n\\n.warning-plants-content {\\n padding-left: 15px;\\n}\\n\\n.warning-plants-item {\\n color: rgb(150, 150, 150);\\n margin-bottom: 10px;\\n}\\n\\n.history-years {\\n position: relative;\\n margin-top: 30px;\\n margin-bottom: 40px;\\n margin-left: 10px;\\n}\\n\\n.history-year {\\n position: relative;\\n display: inline-block;\\n margin-right: 5px;\\n margin-bottom: 20px;\\n}\\n\\n.history-year a {\\n padding-top: 5px;\\n padding-bottom: 5px;\\n padding-left: 20px;\\n padding-right: 20px;\\n color: rgb(30, 30, 30);\\n background-color: rgba(200, 200, 200, 0.5);\\n border: 1px solid rgb(150, 150, 150);\\n border-radius: 20px;\\n}\\n\\n.history-year a:hover {\\n color: rgb(30, 30, 30);\\n background-color: rgba(200, 200, 200, 0.7);\\n}\\n\\n.history-year-selected a {\\n color: rgb(30, 30, 30);\\n background-color: rgba(220, 220, 220, 0.79);\\n}\\n\\n.history-year-selected a:hover {\\n color: rgb(30, 30, 30);\\n background-color: rgba(250, 250, 250, 0.79);\\n}\\n\\n.overdue-tasks {\\n position: relative;\\n flex: 1;\\n width: 45%;\\n margin-top: -10px;\\n margin-bottom: 45px;\\n margin-left: 5px;\\n margin-right: 10px;\\n padding-top: 2px;\\n padding-left: 30px;\\n padding-right: 30px;\\n padding-bottom: 10px;\\n background-color: rgb(55, 59, 62);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n border-radius: 4px;\\n}\\n@media screen and (max-width: 796px) {\\n .overdue-tasks {\\n flex: unset;\\n display: inline-block;\\n width: 100%;\\n margin-left: unset;\\n }\\n}\\n@media screen and (max-width: 512px) {\\n .overdue-tasks {\\n padding-left: 15px;\\n padding-right: 2px;\\n }\\n}\\n\\n.overdue-tasks-title {\\n margin-top: 20px;\\n margin-bottom: 10px;\\n font-size: 1.3em;\\n color: rgb(200, 105, 105);\\n}\\n\\n.overdue-tasks-content {\\n padding: 10px;\\n}\\n\\n.overdue-tasks-item {\\n color: rgb(150, 150, 150);\\n margin-bottom: 10px;\\n}\\n\\n.log {\\n position: relative;\\n width: 100%;\\n margin-top: 23px;\\n margin-bottom: 45px;\\n padding: 0 15px 15px 15px;\\n border: 1px solid rgb(43, 43, 43);\\n background-color: rgb(50, 54, 59);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n border-radius: 4px;\\n}\\n\\n.log-title {\\n margin-top: 10px;\\n margin-bottom: 10px;\\n font-size: 1.3em;\\n color: rgb(0, 215, 63);\\n}\\n\\n.log-content {\\n max-height: 200px;\\n overflow-y: auto;\\n}\\n\\n.log-item {\\n color: rgb(150, 150, 150);\\n margin-bottom: 10px;\\n}\\n\\n.log-item a {\\n color: rgb(150, 150, 150);\\n}\\n\\n.log-item a:hover {\\n color: rgb(200, 200, 200);\\n}\\n\\n.plant-gallery {\\n position: relative;\\n margin-top: 10px;\\n margin-bottom: 10px;\\n}\\n\\n.plant-gallery-title {\\n margin-bottom: 20px;\\n font-size: 1.5em;\\n color: rgb(150, 150, 150);\\n}\\n\\n.plant-gallery-upload {\\n margin-bottom: 20px;\\n}\\n\\n.plant-gallery-photos {\\n margin-top: 30px;\\n}\\n\\n.plant-gallery-photos strong {\\n color: rgb(100, 100, 100);\\n}\\n\\n.plant-gallery-item {\\n position: relative;\\n display: inline-block;\\n width: 315px;\\n height: auto;\\n margin-left: 10px;\\n margin-right: 10px;\\n margin-bottom: 30px;\\n background-color: rgb(73, 79, 83);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n border-radius: 4px;\\n}\\n\\n.plant-gallery-item-header {\\n padding: 10px;\\n}\\n\\n.plant-gallery-item-header-label {\\n display: inline-block;\\n color: rgb(230, 230, 230);\\n}\\n\\n.plant-gallery-item-header-action {\\n display: inline-block;\\n float: right;\\n}\\n\\n.plant-gallery-item-header-action i.is-action-share {\\n color: rgb(200, 200, 200);\\n}\\n\\n.plant-gallery-item-header-action i.is-action-share:hover {\\n color: rgb(220, 220, 220);\\n}\\n\\n.plant-gallery-item-header-action i.is-action-delete {\\n color: rgb(173, 86, 86);\\n}\\n\\n.plant-gallery-item-header-action i.is-action-delete:hover {\\n color: rgb(173, 90, 90);\\n}\\n\\n.plant-gallery-item-photo {\\n position: relative;\\n}\\n\\n.plant-gallery-item-photo-overlay {\\n position: absolute;\\n z-index: 2;\\n width: 100%;\\n height: 97%;\\n}\\n\\n.plant-gallery-item-photo-overlay:hover {\\n background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n.plant-gallery-item-photo-overlay .plant-gallery-item-photo-image {\\n visibility: hidden;\\n}\\n\\n.plant-gallery-item-photo-overlay:hover .plant-gallery-item-photo-image {\\n visibility: visible;\\n}\\n\\n.plant-gallery-item-footer {\\n position: relative;\\n top: -3px;\\n padding: 10px;\\n color: rgb(135, 135, 135);\\n}\\n\\n.stats {\\n position: relative;\\n margin-top: 10px;\\n margin-bottom: 25px;\\n text-align: center;\\n}\\n\\n.stats-item {\\n position: relative;\\n display: inline-block;\\n width: 243.9px;\\n height: 135px;\\n margin-left: 12px;\\n margin-right: 12px;\\n margin-bottom: 20px;\\n padding: 20px;\\n background-color: rgb(55, 59, 62);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n border-radius: 4px;\\n border-left: 2px solid rgb(159, 165, 45);\\n}\\n@media screen and (max-width: 512px) {\\n .stats-item {\\n width: 135px;\\n }\\n}\\n\\n.stats-item-count {\\n color: rgb(250, 250, 250);\\n font-size: 2em;\\n text-align: center;\\n}\\n\\n.stats-item-label {\\n color: rgb(200, 200, 200);\\n font-size: 1.4em;\\n text-align: center;\\n}\\n\\n.plant-tags {\\n position: relative;\\n}\\n\\n.plant-tags-content {\\n position: relative;\\n display: inline-block;\\n width: 90%;\\n}\\n\\n.plant-tags-edit {\\n position: relative;\\n display: inline-block;\\n float: right;\\n}\\n\\n.plant-tags-item {\\n position: relative;\\n display: inline-block;\\n min-width: 125px;\\n padding-left: 10px;\\n padding-right: 10px;\\n padding-top: 5px;\\n padding-bottom: 9px;\\n margin-left: 5px;\\n margin-right: 5px;\\n margin-bottom: 16px;\\n text-align: center;\\n background-color: rgba(123, 123, 123, 0.3);\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\\n border-radius: 10px;\\n}\\n\\n.plant-tags-item:hover {\\n background-color: rgba(150, 150, 150, 0.5);\\n}\\n\\n.plant-tags-item a {\\n color: rgb(190, 190, 190);\\n}\\n\\n.plant-tags-item a:hover {\\n color: rgb(230, 230, 230);\\n}\\n\\n.tasks {\\n margin-bottom: 50px;\\n}\\n\\n.task {\\n position: relative;\\n display: inline-block;\\n width: 45%;\\n height: auto;\\n margin-left: 10px;\\n margin-right: 10px;\\n margin-bottom: 29px;\\n background-color: rgb(55, 59, 62);\\n border: 1px solid rgb(80, 80, 80);\\n border-radius: 4px;\\n}\\n@media screen and (max-width: 580px) {\\n .task {\\n width: 95%;\\n }\\n}\\n\\n.task-header {\\n position: relative;\\n width: 100%;\\n height: 50px;\\n padding: 10px;\\n border-top-left-radius: 4px;\\n border-top-right-radius: 4px;\\n background-color: rgb(25, 25, 25);\\n}\\n\\n.task-header-title {\\n position: relative;\\n display: inline-block;\\n font-size: 1.2em;\\n color: rgb(200, 200, 200);\\n}\\n\\n.task-header-action {\\n position: relative;\\n display: inline-block;\\n float: right;\\n}\\n\\n.task-header-action a {\\n color: rgb(150, 150, 150);\\n}\\n\\n.task-description {\\n position: relative;\\n height: 150px;\\n margin-bottom: 43px;\\n padding: 10px;\\n font-size: 1em;\\n color: rgb(150, 150, 150);\\n overflow-y: auto;\\n}\\n\\n.task-description pre {\\n background-color: inherit;\\n color: inherit;\\n white-space: pre-wrap;\\n word-wrap: break-word;\\n}\\n\\n.task-footer {\\n position: absolute;\\n bottom: 0;\\n padding: 10px;\\n width: 100%;\\n background-color: rgb(10, 10, 10);\\n border-bottom-left-radius: 4px;\\n border-bottom-right-radius: 4px;\\n font-size: 0.8em;\\n}\\n\\n.task-footer-date {\\n position: relative;\\n display: inline-block;\\n width: 43%;\\n}\\n\\n.task-footer-due {\\n position: relative;\\n display: inline-block;\\n}\\n\\n.is-task-overdue {\\n color: rgb(212, 50, 50);\\n}\\n\\n.task-footer-action {\\n position: relative;\\n display: inline-block;\\n float: right;\\n}\\n\\n.task-footer-action a {\\n color: rgb(150, 150, 150);\\n}\\n\\n.tasks-all-done {\\n position: relative;\\n margin-top: 30px;\\n text-align: center;\\n}\\n\\n.tasks-all-done-image img {\\n width: 256px;\\n height: 256px;\\n}\\n\\n.tasks-all-done-text {\\n color: rgb(120, 215, 105);\\n font-size: 2em;\\n}\\n\\n.inventory {\\n margin-bottom: 50px;\\n}\\n\\n.inventory-item-group {\\n position: relative;\\n width: 100%;\\n padding-left: 10px;\\n padding-right: 10px;\\n padding-top: 5px;\\n padding-bottom: 5px;\\n background-color: rgba(200, 200, 200, 0.76);\\n border: 1px solid rgb(90, 90, 90);\\n}\\n\\n.inventory-item {\\n position: relative;\\n width: 100%;\\n padding-left: 10px;\\n padding-right: 10px;\\n padding-top: 5px;\\n padding-bottom: 5px;\\n background-color: rgba(50, 50, 50, 0.76);\\n border: 1px solid rgb(90, 90, 90);\\n}\\n\\n.inventory-item-header {\\n position: relative;\\n}\\n\\n.inventory-item-name {\\n position: relative;\\n display: inline-block;\\n min-width: 50%;\\n}\\n\\n.inventory-item-name a {\\n color: rgb(150, 150, 150);\\n}\\n\\n.inventory-item-name a:hover {\\n color: rgb(150, 150, 150);\\n}\\n\\n.inventory-item-amount {\\n position: relative;\\n display: inline-block;\\n}\\n\\n.inventory-item-amount i {\\n color: rgb(150, 150, 150);\\n}\\n\\n.inventory-item-amount span {\\n color: rgb(215, 215, 215);\\n}\\n\\n.is-inventory-item-empty {\\n color: rgb(212, 50, 50) !important;\\n}\\n\\n.inventory-item-actions {\\n position: relative;\\n display: inline-block;\\n float: right;\\n}\\n\\n.inventory-item-actions i {\\n color: rgb(100, 100, 100);\\n}\\n\\n.inventory-item-body {\\n position: relative;\\n height: 0;\\n opacity: 0;\\n overflow: hidden;\\n -webkit-transition: opacity 1s ease-out;\\n -moz-transition: opacity 1s ease-out;\\n transition: opacity 1s ease-out;\\n}\\n\\n.inventory-item-body.expand {\\n height: auto;\\n opacity: 1;\\n}\\n\\n.inventory-item-description {\\n position: relative;\\n color: rgb(100, 100, 100);\\n margin-top: 10px;\\n margin-bottom: 10px;\\n}\\n\\n.inventory-item-description pre {\\n background-color: inherit;\\n color: inherit;\\n white-space: normal;\\n}\\n\\n.inventory-item-photo {\\n position: relative;\\n text-align: center;\\n}\\n\\n.inventory-item-author {\\n position: relative;\\n color: rgb(100, 100, 100);\\n margin-top: 10px;\\n}\\n\\n.inventory-groups {\\n width: 100%;\\n}\\n\\n.inventory-groups a {\\n color: rgb(50, 50, 50);\\n}\\n\\n.inventory-groups a:hover {\\n color: rgb(50, 50, 50);\\n text-decoration: underline;\\n}\\n\\n.chat-message {\\n position: relative;\\n width: 90%;\\n padding: 15px;\\n margin-bottom: 20px;\\n background-color: rgba(200, 200, 200, 0.5);\\n border-radius: 10px;\\n}\\n\\n.chat-message-right {\\n margin-left: 10%;\\n background-color: rgba(115, 143, 100, 0.9);\\n}\\n\\n.chat-message-user {\\n position: relative;\\n font-size: 1.2em;\\n margin-bottom: 10px;\\n}\\n\\n.chat-message-new {\\n position: relative;\\n display: inline-block;\\n background-color: rgb(212, 130, 67);\\n border: 1px solid rgb(92, 64, 25);\\n color: rgb(250, 250, 250);\\n border-radius: 4px;\\n padding: 5px;\\n font-size: 0.5em;\\n text-transform: uppercase;\\n float: right;\\n}\\n\\n.chat-message-content {\\n position: relative;\\n}\\n\\n.chat-message-content pre {\\n background-color: transparent;\\n color: rgb(255, 255, 255);\\n}\\n\\n.chat-message-info {\\n position: relative;\\n margin-top: 10px;\\n font-size: 0.76em;\\n color: rgb(155, 155, 155);\\n}\\n\\n.chat-typing-indicator {\\n display: none;\\n background-color: rgba(50, 50, 50, 0.5);\\n}\\n\\n.chat-typing-indicator.visible {\\n display: block;\\n}\\n\\n.chat-user-list {\\n position: relative;\\n margin-top: 10px;\\n margin-bottom: 23px;\\n color: rgb(92, 255, 0);\\n}\\n\\n.system-message {\\n position: relative;\\n background-color: rgb(205, 202, 165);\\n border-radius: 10px;\\n padding: 20px;\\n margin-bottom: 20px;\\n}\\n\\n.system-message-left {\\n position: relative;\\n display: inline-block;\\n width: 93%;\\n}\\n@media screen and (max-width: 1000px) {\\n .system-message-left {\\n width: 80%;\\n }\\n}\\n\\n.system-message-left-new {\\n top: -3px;\\n}\\n\\n.system-message-right {\\n position: relative;\\n display: inline-block;\\n top: 3px;\\n}\\n\\n.system-message-context {\\n position: relative;\\n display: inline-block;\\n font-weight: bold;\\n}\\n\\n.system-message-content {\\n position: relative;\\n display: inline-block;\\n}\\n@media screen and (max-width: 768px) {\\n .system-message-content {\\n margin-top: 10px;\\n }\\n}\\n\\n.system-message-content a {\\n color: rgb(135, 75, 5);\\n}\\n\\n.system-message-content a:hover {\\n color: rgb(135, 75, 5);\\n text-decoration: underline;\\n}\\n\\n@media screen and (max-width: 768px) {\\n .system-message-new {\\n top: -58px;\\n }\\n}\\n\\n#small-system-messages {\\n position: fixed;\\n z-index: 3;\\n top: 55px;\\n}\\n@media screen and (max-width: 512px) {\\n #small-system-messages {\\n width: 100%;\\n }\\n}\\n\\n.system-message-small {\\n position: relative;\\n top: 12px;\\n left: 12px;\\n background-color: rgb(205, 202, 165);\\n border-radius: 10px;\\n border: 1px solid rgb(250, 250, 250);\\n padding: 20px;\\n margin-bottom: 10px;\\n}\\n@media screen and (max-width: 512px) {\\n .system-message-small {\\n width: 100%;\\n left: 0;\\n }\\n}\\n\\n.system-message-small-context {\\n font-weight: bold;\\n}\\n\\n.system-message-small-content a {\\n color: rgb(135, 75, 5);\\n}\\n\\n.system-message-small-content a:hover {\\n color: rgb(135, 75, 5);\\n text-decoration: underline;\\n}\\n\\n.scroll-to-top {\\n position: fixed;\\n z-index: 102;\\n bottom: 12px;\\n right: 12px;\\n}\\n\\n.scroll-to-top-inner {\\n background-color: rgb(80, 80, 80);\\n border-radius: 50%;\\n padding: 12px;\\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\\n}\\n\\n.scroll-to-top-inner a {\\n color: rgb(200, 200, 200);\\n}\\n\\n.auth-main {\\n width: 100%;\\n height: 100%;\\n background-repeat: no-repeat;\\n background-size: cover;\\n}\\n\\n.auth-overlay {\\n width: 100%;\\n height: 100%;\\n background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n.auth-content {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n text-align: center;\\n padding: 20px;\\n}\\n\\n.auth-header {\\n position: relative;\\n margin-bottom: 20px;\\n}\\n\\n.auth-header img {\\n position: relative;\\n width: 128px;\\n height: 128px;\\n border-radius: 50%;\\n}\\n\\n.auth-header h1 {\\n font-size: 2.5em;\\n font-family: Quicksand, Verdana, Geneva, Tahoma, sans-serif;\\n font-weight: bold;\\n color: rgb(150, 150, 150);\\n}\\n\\n.auth-info {\\n position: relative;\\n margin-bottom: 43px;\\n}\\n\\n.auth-info-error {\\n color: rgb(154, 73, 69);\\n}\\n\\n.auth-info-success {\\n color: rgb(69, 154, 83);\\n}\\n\\n.auth-form {\\n position: relative;\\n}\\n\\n.auth-form input[type=email], .auth-form input[type=password] {\\n color: rgb(150, 150, 150);\\n background-color: rgb(50, 50, 50);\\n}\\n\\n.auth-form input[type=email]::placeholder, .auth-form input[type=password]::placeholder {\\n color: rgb(200, 200, 200);\\n}\\n\\n.auth-form input[type=submit] {\\n width: 100%;\\n}\\n\\n.auth-help {\\n position: relative;\\n margin-top: 20px;\\n}\\n\\n.auth-help a {\\n color: rgb(54, 105, 203);\\n}\\n\\n.auth-help a:hover {\\n color: rgb(54, 105, 203);\\n text-decoration: underline;\\n}\\n\\n.reset-main {\\n width: 100%;\\n height: 100%;\\n background-repeat: no-repeat;\\n background-size: cover;\\n}\\n\\n.reset-overlay {\\n width: 100%;\\n height: 100%;\\n background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n.reset-content {\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n text-align: center;\\n padding: 20px;\\n}\\n\\n.reset-content h1 {\\n margin-bottom: 30px;\\n line-height: 1;\\n}\\n\\n.reset-info {\\n position: relative;\\n margin-bottom: 43px;\\n}\\n\\n.reset-info-error {\\n color: rgb(154, 73, 69);\\n}\\n\\n.reset-info-success {\\n color: rgb(69, 154, 83);\\n}\\n\\n.reset-form {\\n position: relative;\\n}\\n\\n.reset-form input[type=email], .reset-form input[type=password] {\\n color: rgb(150, 150, 150);\\n background-color: rgb(50, 50, 50);\\n}\\n\\n.reset-form input[type=email]::placeholder, .reset-form input[type=password]::placeholder {\\n color: rgb(200, 200, 200);\\n}\\n\\n.reset-form input[type=submit] {\\n width: 100%;\\n}\\n\\n.preferences-header {\\n position: relative;\\n}\\n\\n.preferences-header i {\\n color: rgb(150, 150, 150);\\n}\\n\\n.admin-tabs {\\n margin-top: 23px;\\n}\\n\\n.admin-tabs a {\\n color: rgb(200, 200, 200);\\n}\\n\\n.admin-tabs a:hover {\\n color: rgb(230, 230, 230);\\n border-bottom-color: rgb(111, 172, 243);\\n}\\n\\n.admin-environment {\\n position: relative;\\n}\\n\\n.admin-environment h2 {\\n margin-top: 20px;\\n margin-bottom: 10px;\\n}\\n\\n.admin-environment label, .admin-environment span {\\n color: rgb(150, 150, 150);\\n}\\n\\n.admin-environment input, .admin-environment select {\\n color: rgb(150, 150, 150);\\n background-color: rgb(50, 50, 50);\\n}\\n\\n.admin-media {\\n position: relative;\\n width: 100%;\\n}\\n\\n.admin-media h2 {\\n margin-top: 20px;\\n margin-bottom: 20px;\\n}\\n\\n.admin-media label {\\n color: rgb(150, 150, 150);\\n}\\n\\n.admin-media input, .admin-backup input {\\n color: rgb(150, 150, 150);\\n background-color: rgb(50, 50, 50);\\n}\\n\\n.admin-media input[type=submit] {\\n margin-top: 10px;\\n margin-bottom: 20px;\\n}\\n\\n.admin-users {\\n position: relative;\\n width: 100%;\\n}\\n\\n.admin-users h2 {\\n margin-top: 20px;\\n margin-bottom: 20px;\\n}\\n\\n.admin-users-list {\\n position: relative;\\n}\\n\\n.admin-user-account {\\n position: relative;\\n margin-bottom: 15px;\\n}\\n\\n.admin-user-account label, .admin-user-account span {\\n color: rgb(150, 150, 150);\\n}\\n\\n.admin-user-account input, .admin-user-account select {\\n color: rgb(150, 150, 150);\\n background-color: rgb(50, 50, 50);\\n}\\n\\n.admin-user-account-item {\\n position: relative;\\n display: inline-block;\\n margin-left: 5px;\\n margin-right: 5px;\\n}\\n\\n.admin-user-account-item-input {\\n width: 30%;\\n}\\n\\n.admin-user-account-actions {\\n position: relative;\\n display: inline-block;\\n}\\n\\n.admin-user-account-item-centered {\\n text-align: center;\\n}\\n\\n.admin-user-account-action-item {\\n position: relative;\\n}\\n\\n.admin-users-actions {\\n position: relative;\\n margin-top: 20px;\\n}\\n\\n.admin-locations {\\n position: relative;\\n width: 100%;\\n}\\n\\n.admin-locations h2 {\\n margin-top: 20px;\\n margin-bottom: 20px;\\n}\\n\\n.admin-locations-list {\\n position: relative;\\n}\\n\\n.admin-location {\\n position: relative;\\n margin-bottom: 15px;\\n}\\n\\n.admin-location label, .admin-location span {\\n color: rgb(150, 150, 150);\\n}\\n\\n.admin-location input {\\n color: rgb(150, 150, 150);\\n background-color: rgb(50, 50, 50);\\n}\\n\\n.admin-location-item {\\n position: relative;\\n display: inline-block;\\n margin-left: 5px;\\n margin-right: 5px;\\n}\\n\\n.admin-location-item-input {\\n width: 30%;\\n}\\n\\n.admin-location-actions {\\n position: relative;\\n display: inline-block;\\n}\\n\\n.admin-location-item-centered {\\n text-align: center;\\n}\\n\\n.admin-location-action-item {\\n position: relative;\\n}\\n\\n.admin-locations-actions {\\n position: relative;\\n margin-top: 20px;\\n}\\n\\n.admin-mail {\\n position: relative;\\n}\\n\\n.admin-mail h2 {\\n margin-top: 20px;\\n margin-bottom: 10px;\\n}\\n\\n.admin-mail label, .admin-mail span {\\n color: rgb(150, 150, 150);\\n}\\n\\n.admin-mail input, .admin-mail select {\\n color: rgb(150, 150, 150);\\n background-color: rgb(50, 50, 50);\\n}\\n\\n.admin-backup label, .admin-backup span {\\n color: rgb(150, 150, 150);\\n}\\n\\n.admin-backup-result {\\n position: relative;\\n padding: 10px;\\n border-radius: 5px;\\n border: 1px solid rgb(255, 255, 255);\\n background-color: rgb(185, 255, 164);\\n}\\n\\n.admin-backup-result i {\\n color: rgb(50, 50, 50);\\n}\\n\\n.admin-backup-result a {\\n color: rgb(15, 150, 43);\\n}\\n\\n.admin-backup-result a:hover {\\n color: rgb(15, 150, 43);\\n text-decoration: underline;\\n}\\n\\n.admin-info {\\n position: relative;\\n}\\n\\n.admin-info-version {\\n color: rgb(200, 200, 200);\\n font-size: 1.5em;\\n}\\n\\n.admin-info-version-smaller {\\n color: rgb(150, 150, 150);\\n font-size: 0.76em;\\n}\\n\\n.version-check {\\n position: relative;\\n margin-top: 30px;\\n}\\n\\n.version-info {\\n position: relative;\\n padding: 20px;\\n margin-top: 30px;\\n color: rgb(250, 250, 250);\\n background-color: rgba(102, 202, 160, 0.76);\\n border: 1px solid rgb(150, 236, 200);\\n border-radius: 10px;\\n}\\n\\n.version-info a {\\n color: rgb(132, 255, 123);\\n font-weight: bold;\\n}\\n\\n.version-info a:hover {\\n color: rgb(132, 255, 123);\\n text-decoration: underline;\\n}\\n\\n.bottomnav {\\n position: fixed;\\n bottom: 0;\\n width: 100%;\\n height: 70px;\\n z-index: 100;\\n padding-left: 5px;\\n padding-right: 5px;\\n background-color: rgb(50, 50, 50);\\n}\\n@media screen and (min-width: 1087px) {\\n .bottomnav {\\n display: none;\\n }\\n}\\n\\n.bottomnav-items {\\n position: relative;\\n display: block;\\n top: 10px;\\n width: 100%;\\n height: 100%;\\n margin-left: auto;\\n margin-right: auto;\\n text-align: center;\\n}\\n\\n.bottomnav-item {\\n position: relative;\\n display: inline-block;\\n width: 65px;\\n height: 50px;\\n margin-top: 6px;\\n color: rgb(150, 150, 150);\\n text-align: center;\\n font-size: 0.8em;\\n}\\n\\n.bottomnav-item a {\\n color: rgb(150, 150, 150);\\n}\\n\\n.bottomnav-item a:hover {\\n color: rgb(200, 200, 200);\\n text-decoration: none;\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://asatruphp/./app/resources/sass/app.scss?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js"); /***/ }), diff --git a/public/themes/default/banner-accessory.png b/public/themes/default/banner-accessory.png new file mode 100644 index 0000000..ba775c6 Binary files /dev/null and b/public/themes/default/banner-accessory.png differ diff --git a/public/themes/default/banner-icon.png b/public/themes/default/banner-icon.png new file mode 100644 index 0000000..5ed692a Binary files /dev/null and b/public/themes/default/banner-icon.png differ diff --git a/public/themes/default/banner.jpg b/public/themes/default/banner.jpg new file mode 100644 index 0000000..d62f752 Binary files /dev/null and b/public/themes/default/banner.jpg differ diff --git a/public/themes/default/layout.json b/public/themes/default/layout.json new file mode 100644 index 0000000..a3c9ca7 --- /dev/null +++ b/public/themes/default/layout.json @@ -0,0 +1,29 @@ +{ + "name": "default", + "banner": "banner.jpg", + "rules": { + "height": "250px" + }, + "icon": { + "asset": "banner-icon.png", + "base": { + "top": "210px", + "left": "195px" + }, + "img": { + "width": "72px", + "height": "72px" + } + }, + "accessory": { + "asset": "banner-accessory.png", + "base": { + "top": "172px", + "right": "-83%" + }, + "img": { + "width": "256px", + "height": "256px" + } + } +}