From 588f05dfde8c2a24d557a0e04585a101d6886a01 Mon Sep 17 00:00:00 2001 From: Wisp X Date: Fri, 11 Feb 2022 13:48:22 +0800 Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E7=94=BB=E5=BB=8A=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/Http/Controllers/User/UserController.php | 6 + app/Http/Requests/UserSettingRequest.php | 2 + app/Models/User.php | 10 + app/Utils.php | 27 +- .../2014_10_12_000000_create_users_table.php | 1 + package-lock.json | 123 ++++ package.json | 10 +- public/css/app.css | 686 +++++++++--------- public/js/app.js | 25 +- public/mix-manifest.json | 5 +- resources/css/gallery.less | 9 + resources/views/user/gallery.blade.php | 47 +- resources/views/user/settings.blade.php | 5 + webpack.mix.js | 6 + 14 files changed, 601 insertions(+), 361 deletions(-) create mode 100644 resources/css/gallery.less diff --git a/app/Http/Controllers/User/UserController.php b/app/Http/Controllers/User/UserController.php index 3dc4eeeb..40d33739 100644 --- a/app/Http/Controllers/User/UserController.php +++ b/app/Http/Controllers/User/UserController.php @@ -41,11 +41,17 @@ class UserController extends Controller return view('user.gallery'); } + public function works(): Response + { + return $this->success(); + } + public function update(UserSettingRequest $request): Response { /** @var User $user */ $user = Auth::user(); $user->name = $request->validated('name'); + $user->url = $request->validated('url'); $user->configs = $user->configs->merge(collect($request->validated('configs'))->transform(function ($value) { return (int)$value; })); diff --git a/app/Http/Requests/UserSettingRequest.php b/app/Http/Requests/UserSettingRequest.php index ccca58bb..b8154f54 100644 --- a/app/Http/Requests/UserSettingRequest.php +++ b/app/Http/Requests/UserSettingRequest.php @@ -13,6 +13,7 @@ class UserSettingRequest extends FormRequest { return [ 'name' => 'required|between:2,20', + 'url' => 'url', 'password' => 'nullable|between:6,32', 'configs' => 'array', 'configs.default_album' => 'required|numeric', @@ -27,6 +28,7 @@ class UserSettingRequest extends FormRequest return [ 'name.required' => '昵称不能为空', 'name.between' => '昵称必须在 2-20 个字符之间', + 'url.url' => '个人主页地址格式不正确', 'password.between' => '昵称必须在 6-32 个字符之间', 'configs.array' => '配置值不正确', 'configs.default_album.required' => '默认相册选择错误', diff --git a/app/Models/User.php b/app/Models/User.php index 5a7247b9..3295bca3 100644 --- a/app/Models/User.php +++ b/app/Models/User.php @@ -4,8 +4,10 @@ namespace App\Models; use App\Enums\ImagePermission; use App\Enums\UserConfigKey; +use App\Utils; use Carbon\Carbon; use Illuminate\Contracts\Auth\MustVerifyEmail; +use Illuminate\Database\Eloquent\Casts\Attribute; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Relations\BelongsTo; use Illuminate\Database\Eloquent\Relations\HasMany; @@ -23,6 +25,7 @@ use Laravel\Sanctum\HasApiTokens; * @property string $remember_token * @property boolean $is_adminer * @property float $capacity + * @property string $url * @property Collection $configs * @property int $image_num * @property int $album_num @@ -31,6 +34,7 @@ use Laravel\Sanctum\HasApiTokens; * @property Carbon $email_verified_at * @property Carbon $updated_at * @property Carbon $created_at + * @property-read string $avatar * @property-read Group $group * @property-read \Illuminate\Database\Eloquent\Collection $albums * @property-read \Illuminate\Database\Eloquent\Collection $images @@ -48,6 +52,7 @@ class User extends Authenticatable implements MustVerifyEmail 'name', 'email', 'password', + 'url', 'configs', 'registered_ip', ]; @@ -91,6 +96,11 @@ class User extends Authenticatable implements MustVerifyEmail }); } + public function avatar(): Attribute + { + return new Attribute(fn () => Utils::getAvatar($this->email)); + } + public function group(): BelongsTo { return $this->belongsTo(Group::class, 'group_id', 'id'); diff --git a/app/Utils.php b/app/Utils.php index eeb72929..17f80787 100644 --- a/app/Utils.php +++ b/app/Utils.php @@ -9,6 +9,29 @@ use Illuminate\Support\Facades\Cache; class Utils { + /** + * 获取头像地址 + * + * @param $email + * @param int $s + * @param string $d + * @param string $r + * @return string + */ + public static function getAvatar($email, int $s = 96, string $d = 'mp', string $r = 'g'): string + { + preg_match_all('/((\d)*)@qq.com/', $email, $vai); + if (empty($vai['1']['0'])) { + $url = 'https://gravatar.cat.net/avatar/'; + $url .= md5(strtolower(trim($email))); + $url .= "?s=$s&d=$d&r=$r"; + return $url; + } else { + $url = 'https://q2.qlogo.cn/headimg_dl?dst_uin='.$vai['1']['0'].'&spec=100'; + } + return $url; + } + /** * 获取系统配置，获取全部配置时将返回 * @@ -87,8 +110,8 @@ class Utils /** * 格式化配置，设置默认配置以及将字符串数字转换为数字 * - * @param array $defaults 默认配置 - * @param array $configs 新配置 + * @param array $defaults 默认配置 + * @param array $configs 新配置 * @return array */ public static function parseConfigs(array $defaults, array $configs): array diff --git a/database/migrations/2014_10_12_000000_create_users_table.php b/database/migrations/2014_10_12_000000_create_users_table.php index 1a567796..4cc99f3e 100644 --- a/database/migrations/2014_10_12_000000_create_users_table.php +++ b/database/migrations/2014_10_12_000000_create_users_table.php @@ -26,6 +26,7 @@ return new class extends Migration $table->rememberToken(); $table->boolean('is_adminer')->default(false)->comment('是否为管理员'); $table->decimal('capacity', 20)->default(0)->comment('总容量(kb)'); + $table->string('url')->default('')->comment('个人主页'); $table->json('configs')->comment('配置'); $table->unsignedBigInteger('image_num')->default(0)->comment('图片数量'); $table->unsignedBigInteger('album_num')->default(0)->comment('相册数量'); diff --git a/package-lock.json b/package-lock.json index 6ba45e1a..97d69788 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "deepmerge": "^4.2.2", "dragselect": "^2.3.0", "echarts": "^5.2.2", + "imagesloaded": "^4.1.4", "jquery": "^3.6.0", "jquery.photoswipe": "^1.1.1", "justifiedGallery": "^3.8.1", @@ -25,6 +26,7 @@ "less": "^4.1.2", "less-loader": "^10.2.0", "lodash": "^4.17.19", + "masonry-layout": "^4.2.2", "postcss": "^8.2.1", "postcss-import": "^14.0.1", "resolve-url-loader": "^4.0.0", @@ -4424,6 +4426,13 @@ "minimalistic-assert": "^1.0.0" } }, + "node_modules/desandro-matches-selector": { + "version": "2.0.2", + "resolved": "https://repo.huaweicloud.com/repository/npm/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz", + "integrity": "sha1-cXvu1NwT59jzdi9wem1YpndCGOE=", + "dev": true, + "license": "MIT" + }, "node_modules/destroy": { "version": "1.0.4", "resolved": "https://repo.huaweicloud.com/repository/npm/destroy/-/destroy-1.0.4.tgz", @@ -4904,6 +4913,13 @@ "node": ">= 0.6" } }, + "node_modules/ev-emitter": { + "version": "1.1.1", + "resolved": "https://repo.huaweicloud.com/repository/npm/ev-emitter/-/ev-emitter-1.1.1.tgz", + "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==", + "dev": true, + "license": "MIT" + }, "node_modules/eventemitter3": { "version": "4.0.7", "resolved": "https://repo.huaweicloud.com/repository/npm/eventemitter3/-/eventemitter3-4.0.7.tgz", @@ -5250,6 +5266,16 @@ "node": ">=8" } }, + "node_modules/fizzy-ui-utils": { + "version": "2.0.7", + "resolved": "https://repo.huaweicloud.com/repository/npm/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz", + "integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==", + "dev": true, + "license": "MIT", + "dependencies": { + "desandro-matches-selector": "^2.0.0" + } + }, "node_modules/follow-redirects": { "version": "1.14.8", "resolved": "https://repo.huaweicloud.com/repository/npm/follow-redirects/-/follow-redirects-1.14.8.tgz", @@ -5391,6 +5417,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-size": { + "version": "2.0.3", + "resolved": "https://repo.huaweicloud.com/repository/npm/get-size/-/get-size-2.0.3.tgz", + "integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==", + "dev": true, + "license": "MIT" + }, "node_modules/get-stream": { "version": "6.0.1", "resolved": "https://repo.huaweicloud.com/repository/npm/get-stream/-/get-stream-6.0.1.tgz", @@ -5997,6 +6030,16 @@ "node": ">=8" } }, + "node_modules/imagesloaded": { + "version": "4.1.4", + "resolved": "https://repo.huaweicloud.com/repository/npm/imagesloaded/-/imagesloaded-4.1.4.tgz", + "integrity": "sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ev-emitter": "^1.0.0" + } + }, "node_modules/img-loader": { "version": "4.0.0", "resolved": "https://repo.huaweicloud.com/repository/npm/img-loader/-/img-loader-4.0.0.tgz", @@ -6843,6 +6886,17 @@ "semver": "bin/semver.js" } }, + "node_modules/masonry-layout": { + "version": "4.2.2", + "resolved": "https://repo.huaweicloud.com/repository/npm/masonry-layout/-/masonry-layout-4.2.2.tgz", + "integrity": "sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==", + "dev": true, + "license": "MIT", + "dependencies": { + "get-size": "^2.0.2", + "outlayer": "^2.1.0" + } + }, "node_modules/md5": { "version": "2.3.0", "resolved": "https://repo.huaweicloud.com/repository/npm/md5/-/md5-2.3.0.tgz", @@ -7494,6 +7548,18 @@ "dev": true, "license": "MIT" }, + "node_modules/outlayer": { + "version": "2.1.1", + "resolved": "https://repo.huaweicloud.com/repository/npm/outlayer/-/outlayer-2.1.1.tgz", + "integrity": "sha1-KYY7beEOpdrf/8rfoNcokHOH6aI=", + "dev": true, + "license": "MIT", + "dependencies": { + "ev-emitter": "^1.0.0", + "fizzy-ui-utils": "^2.0.0", + "get-size": "^2.0.2" + } + }, "node_modules/p-limit": { "version": "2.3.0", "resolved": "https://repo.huaweicloud.com/repository/npm/p-limit/-/p-limit-2.3.0.tgz", @@ -13994,6 +14060,12 @@ "minimalistic-assert": "^1.0.0" } }, + "desandro-matches-selector": { + "version": "2.0.2", + "resolved": "https://repo.huaweicloud.com/repository/npm/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz", + "integrity": "sha1-cXvu1NwT59jzdi9wem1YpndCGOE=", + "dev": true + }, "destroy": { "version": "1.0.4", "resolved": "https://repo.huaweicloud.com/repository/npm/destroy/-/destroy-1.0.4.tgz", @@ -14348,6 +14420,12 @@ "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=", "dev": true }, + "ev-emitter": { + "version": "1.1.1", + "resolved": "https://repo.huaweicloud.com/repository/npm/ev-emitter/-/ev-emitter-1.1.1.tgz", + "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==", + "dev": true + }, "eventemitter3": { "version": "4.0.7", "resolved": "https://repo.huaweicloud.com/repository/npm/eventemitter3/-/eventemitter3-4.0.7.tgz", @@ -14605,6 +14683,15 @@ "path-exists": "^4.0.0" } }, + "fizzy-ui-utils": { + "version": "2.0.7", + "resolved": "https://repo.huaweicloud.com/repository/npm/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz", + "integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==", + "dev": true, + "requires": { + "desandro-matches-selector": "^2.0.0" + } + }, "follow-redirects": { "version": "1.14.8", "resolved": "https://repo.huaweicloud.com/repository/npm/follow-redirects/-/follow-redirects-1.14.8.tgz", @@ -14688,6 +14775,12 @@ "has-symbols": "^1.0.1" } }, + "get-size": { + "version": "2.0.3", + "resolved": "https://repo.huaweicloud.com/repository/npm/get-size/-/get-size-2.0.3.tgz", + "integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==", + "dev": true + }, "get-stream": { "version": "6.0.1", "resolved": "https://repo.huaweicloud.com/repository/npm/get-stream/-/get-stream-6.0.1.tgz", @@ -15099,6 +15192,15 @@ "replace-ext": "^1.0.0" } }, + "imagesloaded": { + "version": "4.1.4", + "resolved": "https://repo.huaweicloud.com/repository/npm/imagesloaded/-/imagesloaded-4.1.4.tgz", + "integrity": "sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==", + "dev": true, + "requires": { + "ev-emitter": "^1.0.0" + } + }, "img-loader": { "version": "4.0.0", "resolved": "https://repo.huaweicloud.com/repository/npm/img-loader/-/img-loader-4.0.0.tgz", @@ -15675,6 +15777,16 @@ } } }, + "masonry-layout": { + "version": "4.2.2", + "resolved": "https://repo.huaweicloud.com/repository/npm/masonry-layout/-/masonry-layout-4.2.2.tgz", + "integrity": "sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==", + "dev": true, + "requires": { + "get-size": "^2.0.2", + "outlayer": "^2.1.0" + } + }, "md5": { "version": "2.3.0", "resolved": "https://repo.huaweicloud.com/repository/npm/md5/-/md5-2.3.0.tgz", @@ -16137,6 +16249,17 @@ "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=", "dev": true }, + "outlayer": { + "version": "2.1.1", + "resolved": "https://repo.huaweicloud.com/repository/npm/outlayer/-/outlayer-2.1.1.tgz", + "integrity": "sha1-KYY7beEOpdrf/8rfoNcokHOH6aI=", + "dev": true, + "requires": { + "ev-emitter": "^1.0.0", + "fizzy-ui-utils": "^2.0.0", + "get-size": "^2.0.2" + } + }, "p-limit": { "version": "2.3.0", "resolved": "https://repo.huaweicloud.com/repository/npm/p-limit/-/p-limit-2.3.0.tgz", diff --git a/package.json b/package.json index f80dd150..949f4d67 100644 --- a/package.json +++ b/package.json @@ -10,13 +10,11 @@ "production": "mix --production" }, "devDependencies": { - "axios": "^0.25", - "laravel-mix": "^6.0.6", - "lodash": "^4.17.19", "@fortawesome/fontawesome-free": "^5.15.4", "@tailwindcss/forms": "^0.4.0", "alpinejs": "^3.4.2", "autoprefixer": "^10.1.0", + "axios": "^0.25", "blueimp-canvas-to-blob": "^3.29.0", "blueimp-file-upload": "^10.32.0", "blueimp-load-image": "^5.16.0", @@ -28,14 +26,18 @@ "jquery": "^3.6.0", "jquery.photoswipe": "^1.1.1", "justifiedGallery": "^3.8.1", + "laravel-mix": "^6.0.6", "less": "^4.1.2", "less-loader": "^10.2.0", + "lodash": "^4.17.19", + "masonry-layout": "^4.2.2", "postcss": "^8.2.1", "postcss-import": "^14.0.1", "resolve-url-loader": "^4.0.0", "sweetalert2": "^11.3.3", "tailwindcss": "^3.0.0", "toastr": "^2.1.4", - "viewerjs": "^1.10.2" + "viewerjs": "^1.10.2", + "imagesloaded": "^4.1.4" } } diff --git a/public/css/app.css b/public/css/app.css index da49a1df..89c1deab 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -652,6 +652,18 @@ select { bottom: 0px; left: 0px; } +.top-1 { + top: 0.25rem; +} +.right-1 { + right: 0.25rem; +} +.top-2 { + top: 0.5rem; +} +.right-2 { + right: 0.5rem; +} .top-14 { top: 3.5rem; } @@ -679,18 +691,6 @@ select { .bottom-2 { bottom: 0.5rem; } -.top-1 { - top: 0.25rem; -} -.right-1 { - right: 0.25rem; -} -.top-2 { - top: 0.5rem; -} -.right-2 { - right: 0.5rem; -} .z-0 { z-index: 0; } @@ -718,6 +718,10 @@ select { .m-2 { margin: 0.5rem; } +.my-6 { + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} .mx-auto { margin-left: auto; margin-right: auto; @@ -738,70 +742,78 @@ select { margin-top: -0.5rem; margin-bottom: -0.5rem; } -.my-6 { - margin-top: 1.5rem; - margin-bottom: 1.5rem; -} .ml-3 { margin-left: 0.75rem; } .-ml-px { margin-left: -1px; } +.mb-4 { + margin-bottom: 1rem; +} +.mb-2 { + margin-bottom: 0.5rem; +} +.mt-3 { + margin-top: 0.75rem; +} +.ml-1 { + margin-left: 0.25rem; +} +.mt-2 { + margin-top: 0.5rem; +} +.ml-2 { + margin-left: 0.5rem; +} +.mt-1 { + margin-top: 0.25rem; +} +.mb-3 { + margin-bottom: 0.75rem; +} +.mt-4 { + margin-top: 1rem; +} +.mt-6 { + margin-top: 1.5rem; +} +.mt-5 { + margin-top: 1.25rem; +} .mb-5 { margin-bottom: 1.25rem; } .mt-10 { margin-top: 2.5rem; } -.mt-2 { - margin-top: 0.5rem; -} -.mb-2 { - margin-bottom: 0.5rem; -} -.-ml-1 { - margin-left: -0.25rem; -} -.mr-4 { - margin-right: 1rem; -} -.mb-4 { - margin-bottom: 1rem; -} -.mt-1 { - margin-top: 0.25rem; -} -.mt-4 { - margin-top: 1rem; -} -.ml-2 { - margin-left: 0.5rem; +.mr-2 { + margin-right: 0.5rem; } .ml-4 { margin-left: 1rem; } -.mt-6 { - margin-top: 1.5rem; +.mt-8 { + margin-top: 2rem; } -.mt-3 { - margin-top: 0.75rem; +.ml-12 { + margin-left: 3rem; +} +.-mt-px { + margin-top: -1px; +} +.mr-4 { + margin-right: 1rem; +} +.-ml-1 { + margin-left: -0.25rem; } .mr-3 { margin-right: 0.75rem; } -.ml-1 { - margin-left: 0.25rem; -} .-mr-2 { margin-right: -0.5rem; } -.mt-5 { - margin-top: 1.25rem; -} -.mb-3 { - margin-bottom: 0.75rem; -} .block { display: block; } @@ -826,15 +838,21 @@ select { .h-5 { height: 1.25rem; } -.h-56 { - height: 14rem; -} .h-full { height: 100%; } .h-8 { height: 2rem; } +.h-10 { + height: 2.5rem; +} +.h-40 { + height: 10rem; +} +.h-6 { + height: 1.5rem; +} .h-screen { height: 100vh; } @@ -847,30 +865,27 @@ select { .h-1 { height: 0.25rem; } +.h-16 { + height: 4rem; +} .h-20 { height: 5rem; } .h-7 { height: 1.75rem; } -.h-6 { - height: 1.5rem; -} -.h-10 { - height: 2.5rem; -} .h-4 { height: 1rem; } -.h-16 { - height: 4rem; -} -.min-h-screen { - min-height: 100vh; +.h-32 { + height: 8rem; } .min-h-\[150px\] { min-height: 150px; } +.min-h-screen { + min-height: 100vh; +} .w-5 { width: 1.25rem; } @@ -880,9 +895,27 @@ select { .w-8 { width: 2rem; } +.w-\[0\%\] { + width: 0%; +} +.w-10 { + width: 2.5rem; +} +.w-\[80\%\] { + width: 80%; +} +.w-40 { + width: 10rem; +} +.w-6 { + width: 1.5rem; +} .w-3\/4 { width: 75%; } +.w-auto { + width: auto; +} .w-48 { width: 12rem; } @@ -892,32 +925,20 @@ select { .w-\[90\%\] { width: 90%; } -.w-\[80\%\] { - width: 80%; -} -.w-6 { - width: 1.5rem; -} .w-20 { width: 5rem; } .w-4 { width: 1rem; } -.w-\[0\%\] { - width: 0%; -} -.w-10 { - width: 2.5rem; -} -.w-auto { - width: auto; -} .min-w-full { min-width: 100%; } -.max-w-2xl { - max-width: 42rem; +.max-w-xl { + max-width: 36rem; +} +.max-w-6xl { + max-width: 72rem; } .max-w-\[70\%\] { max-width: 70%; @@ -1001,18 +1022,21 @@ select { .resize-y { resize: vertical; } +.resize { + resize: both; +} .list-inside { list-style-position: inside; } .list-disc { list-style-type: disc; } -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} .flex-row { flex-direction: row; } @@ -1049,17 +1073,10 @@ select { .gap-6 { gap: 1.5rem; } -.gap-y-10 { - row-gap: 2.5rem; -} -.gap-x-6 { - -moz-column-gap: 1.5rem; - column-gap: 1.5rem; -} -.space-y-3 > :not([hidden]) ~ :not([hidden]) { +.space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; @@ -1071,31 +1088,16 @@ select { margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } +.space-y-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); +} .space-x-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); } -.space-x-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.75rem * var(--tw-space-x-reverse)); - margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); -} -.space-y-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} -.space-x-8 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(2rem * var(--tw-space-x-reverse)); - margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); -} -.space-y-1 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); -} .space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); @@ -1111,6 +1113,21 @@ select { margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } +.space-x-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); +} +.space-x-8 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(2rem * var(--tw-space-x-reverse)); + margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); +} +.space-y-1 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); +} .divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); @@ -1156,15 +1173,15 @@ select { .rounded-md { border-radius: 0.375rem; } +.rounded-lg { + border-radius: 0.5rem; +} .rounded-full { border-radius: 9999px; } .rounded { border-radius: 0.25rem; } -.rounded-lg { - border-radius: 0.5rem; -} .rounded-l-md { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; @@ -1184,14 +1201,11 @@ select { .border { border-width: 1px; } -.border-0 { - border-width: 0px; -} .border-2 { border-width: 2px; } -.border-b { - border-bottom-width: 1px; +.border-0 { + border-width: 0px; } .border-b-2 { border-bottom-width: 2px; @@ -1199,6 +1213,12 @@ select { .border-t { border-top-width: 1px; } +.border-r { + border-right-width: 1px; +} +.border-b { + border-bottom-width: 1px; +} .border-solid { border-style: solid; } @@ -1209,13 +1229,6 @@ select { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.border-gray-500 { - --tw-border-opacity: 1; - border-color: rgb(107 114 128 / var(--tw-border-opacity)); -} -.border-transparent { - border-color: transparent; -} .border-stone-300 { --tw-border-opacity: 1; border-color: rgb(214 211 209 / var(--tw-border-opacity)); @@ -1224,14 +1237,25 @@ select { --tw-border-opacity: 1; border-color: rgb(99 102 241 / var(--tw-border-opacity)); } -.border-gray-100 { - --tw-border-opacity: 1; - border-color: rgb(243 244 246 / var(--tw-border-opacity)); +.border-transparent { + border-color: transparent; } .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); } +.border-gray-400 { + --tw-border-opacity: 1; + border-color: rgb(156 163 175 / var(--tw-border-opacity)); +} +.border-gray-500 { + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity)); +} +.border-gray-100 { + --tw-border-opacity: 1; + border-color: rgb(243 244 246 / var(--tw-border-opacity)); +} .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -1240,6 +1264,26 @@ select { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } +.bg-gray-50 { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); +} +.bg-gray-200 { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); +} +.bg-sky-500 { + --tw-bg-opacity: 1; + background-color: rgb(14 165 233 / var(--tw-bg-opacity)); +} +.bg-blue-500 { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} +.bg-gray-500 { + --tw-bg-opacity: 1; + background-color: rgb(107 114 128 / var(--tw-bg-opacity)); +} .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); @@ -1252,18 +1296,14 @@ select { --tw-bg-opacity: 1; background-color: rgb(75 85 99 / var(--tw-bg-opacity)); } -.bg-gray-500 { +.bg-slate-50 { --tw-bg-opacity: 1; - background-color: rgb(107 114 128 / var(--tw-bg-opacity)); + background-color: rgb(248 250 252 / var(--tw-bg-opacity)); } .bg-red-500 { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } -.bg-gray-200 { - --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); -} .bg-indigo-500 { --tw-bg-opacity: 1; background-color: rgb(99 102 241 / var(--tw-bg-opacity)); @@ -1272,34 +1312,18 @@ select { --tw-bg-opacity: 1; background-color: rgb(96 165 250 / var(--tw-bg-opacity)); } -.bg-gray-700 { - --tw-bg-opacity: 1; - background-color: rgb(55 65 81 / var(--tw-bg-opacity)); -} -.bg-slate-50 { - --tw-bg-opacity: 1; - background-color: rgb(248 250 252 / var(--tw-bg-opacity)); -} -.bg-blue-500 { - --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); -} -.bg-gray-50 { - --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); -} .bg-red-400 { --tw-bg-opacity: 1; background-color: rgb(248 113 113 / var(--tw-bg-opacity)); } +.bg-gray-700 { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); +} .bg-yellow-500 { --tw-bg-opacity: 1; background-color: rgb(234 179 8 / var(--tw-bg-opacity)); } -.bg-sky-500 { - --tw-bg-opacity: 1; - background-color: rgb(14 165 233 / var(--tw-bg-opacity)); -} .bg-opacity-75 { --tw-bg-opacity: 0.75; } @@ -1313,18 +1337,6 @@ select { --tw-gradient-from: #000; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 0 0 / 0)); } -.bg-auto { - background-size: auto; -} -.bg-cover { - background-size: cover; -} -.bg-center { - background-position: center; -} -.bg-no-repeat { - background-repeat: no-repeat; -} .fill-current { fill: currentColor; } @@ -1332,12 +1344,19 @@ select { -o-object-fit: cover; object-fit: cover; } +.object-center { + -o-object-position: center; + object-position: center; +} .p-4 { padding: 1rem; } .p-2 { padding: 0.5rem; } +.p-6 { + padding: 1.5rem; +} .p-1 { padding: 0.25rem; } @@ -1356,22 +1375,42 @@ select { padding-left: 0.5rem; padding-right: 0.5rem; } -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; -} -.px-5 { - padding-left: 1.25rem; - padding-right: 1.25rem; -} .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } +.px-8 { + padding-left: 2rem; + padding-right: 2rem; +} +.py-10 { + padding-top: 2.5rem; + padding-bottom: 2.5rem; +} +.py-5 { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} +.py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; @@ -1384,25 +1423,11 @@ select { padding-top: 3.5rem; padding-bottom: 3.5rem; } -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; +.pb-6 { + padding-bottom: 1.5rem; } -.py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; -} -.py-10 { - padding-top: 2.5rem; - padding-bottom: 2.5rem; -} -.px-8 { - padding-left: 2rem; - padding-right: 2rem; -} -.py-5 { - padding-top: 1.25rem; - padding-bottom: 1.25rem; +.pt-6 { + padding-top: 1.5rem; } .pb-14 { padding-bottom: 3.5rem; @@ -1410,11 +1435,8 @@ select { .pb-12 { padding-bottom: 3rem; } -.pt-6 { - padding-top: 1.5rem; -} -.pb-6 { - padding-bottom: 1.5rem; +.pt-8 { + padding-top: 2rem; } .pt-2 { padding-top: 0.5rem; @@ -1447,14 +1469,30 @@ select { font-size: 0.875rem; line-height: 1.25rem; } +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} .text-xl { font-size: 1.25rem; line-height: 1.75rem; } +.text-6xl { + font-size: 3.75rem; + line-height: 1; +} .text-xs { font-size: 0.75rem; line-height: 1rem; } +.text-5xl { + font-size: 3rem; + line-height: 1; +} +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} .text-4xl { font-size: 2.25rem; line-height: 2.5rem; @@ -1463,22 +1501,6 @@ select { font-size: 1rem; line-height: 1.5rem; } -.text-5xl { - font-size: 3rem; - line-height: 1; -} -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; -} -.text-6xl { - font-size: 3.75rem; - line-height: 1; -} -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} .font-medium { font-weight: 500; } @@ -1491,6 +1513,9 @@ select { .leading-5 { line-height: 1.25rem; } +.leading-7 { + line-height: 1.75rem; +} .tracking-wider { letter-spacing: 0.05em; } @@ -1505,14 +1530,6 @@ select { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); } -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} -.text-blue-500 { - --tw-text-opacity: 1; - color: rgb(59 130 246 / var(--tw-text-opacity)); -} .text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); @@ -1525,34 +1542,6 @@ select { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity)); } -.text-red-400 { - --tw-text-opacity: 1; - color: rgb(248 113 113 / var(--tw-text-opacity)); -} -.text-slate-600 { - --tw-text-opacity: 1; - color: rgb(71 85 105 / var(--tw-text-opacity)); -} -.text-gray-300 { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} -.text-indigo-600 { - --tw-text-opacity: 1; - color: rgb(79 70 229 / var(--tw-text-opacity)); -} -.text-green-600 { - --tw-text-opacity: 1; - color: rgb(22 163 74 / var(--tw-text-opacity)); -} -.text-red-600 { - --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity)); -} -.text-gray-900 { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} .text-green-500 { --tw-text-opacity: 1; color: rgb(34 197 94 / var(--tw-text-opacity)); @@ -1565,6 +1554,46 @@ select { --tw-text-opacity: 1; color: rgb(22 101 52 / var(--tw-text-opacity)); } +.text-red-600 { + --tw-text-opacity: 1; + color: rgb(220 38 38 / var(--tw-text-opacity)); +} +.text-gray-300 { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.text-indigo-600 { + --tw-text-opacity: 1; + color: rgb(79 70 229 / var(--tw-text-opacity)); +} +.text-yellow-500 { + --tw-text-opacity: 1; + color: rgb(234 179 8 / var(--tw-text-opacity)); +} +.text-gray-900 { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} +.text-blue-500 { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity)); +} +.text-gray-200 { + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity)); +} +.text-green-600 { + --tw-text-opacity: 1; + color: rgb(22 163 74 / var(--tw-text-opacity)); +} +.text-red-400 { + --tw-text-opacity: 1; + color: rgb(248 113 113 / var(--tw-text-opacity)); +} .text-amber-500 { --tw-text-opacity: 1; color: rgb(245 158 11 / var(--tw-text-opacity)); @@ -1577,14 +1606,14 @@ select { --tw-text-opacity: 1; color: rgb(74 222 128 / var(--tw-text-opacity)); } -.text-yellow-500 { - --tw-text-opacity: 1; - color: rgb(234 179 8 / var(--tw-text-opacity)); -} .text-rose-500 { --tw-text-opacity: 1; color: rgb(244 63 94 / var(--tw-text-opacity)); } +.text-slate-600 { + --tw-text-opacity: 1; + color: rgb(71 85 105 / var(--tw-text-opacity)); +} .text-orange-500 { --tw-text-opacity: 1; color: rgb(249 115 22 / var(--tw-text-opacity)); @@ -1597,6 +1626,9 @@ select { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } +.opacity-70 { + opacity: 0.7; +} .opacity-0 { opacity: 0; } @@ -1609,9 +1641,6 @@ select { .opacity-75 { opacity: 0.75; } -.opacity-70 { - opacity: 0.7; -} .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); @@ -1622,6 +1651,11 @@ select { --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} .outline-none { outline: 2px solid transparent; outline-offset: 2px; @@ -1664,11 +1698,6 @@ select { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } -.transition-shadow { - transition-property: box-shadow; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -1711,6 +1740,14 @@ select { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } +.hover\:bg-gray-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); +} +.hover\:bg-blue-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); +} .hover\:bg-blue-300:hover { --tw-bg-opacity: 1; background-color: rgb(147 197 253 / var(--tw-bg-opacity)); @@ -1719,14 +1756,6 @@ select { --tw-bg-opacity: 1; background-color: rgb(75 85 99 / var(--tw-bg-opacity)); } -.hover\:bg-blue-600:hover { - --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); -} -.hover\:bg-gray-200:hover { - --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); -} .hover\:text-gray-500:hover { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); @@ -1735,22 +1764,10 @@ select { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); } -.hover\:text-white:hover { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} -.hover\:text-gray-900:hover { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} .hover\:text-indigo-400:hover { --tw-text-opacity: 1; color: rgb(129 140 248 / var(--tw-text-opacity)); } -.hover\:text-gray-700:hover { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} .hover\:text-indigo-900:hover { --tw-text-opacity: 1; color: rgb(49 46 129 / var(--tw-text-opacity)); @@ -1759,10 +1776,17 @@ select { --tw-text-opacity: 1; color: rgb(127 29 29 / var(--tw-text-opacity)); } -.hover\:shadow-xl:hover { - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +.hover\:text-white:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.hover\:text-gray-900:hover { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} +.hover\:text-gray-700:hover { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); } .focus\:z-10:focus { z-index: 10; @@ -1771,14 +1795,14 @@ select { --tw-border-opacity: 1; border-color: rgb(147 197 253 / var(--tw-border-opacity)); } -.focus\:border-indigo-300:focus { - --tw-border-opacity: 1; - border-color: rgb(165 180 252 / var(--tw-border-opacity)); -} .focus\:border-gray-500:focus { --tw-border-opacity: 1; border-color: rgb(107 114 128 / var(--tw-border-opacity)); } +.focus\:border-indigo-300:focus { + --tw-border-opacity: 1; + border-color: rgb(165 180 252 / var(--tw-border-opacity)); +} .focus\:border-gray-300:focus { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); @@ -1808,28 +1832,28 @@ select { --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.focus\:ring-2:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} .focus\:ring-0:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } +.focus\:ring-2:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} .focus\:ring-white:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity)); } -.focus\:ring-indigo-200:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity)); -} .focus\:ring-indigo-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity)); } +.focus\:ring-indigo-200:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity)); +} .focus\:ring-opacity-50:focus { --tw-ring-opacity: 0.5; } @@ -1861,6 +1885,10 @@ select { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.dark .dark\:bg-gray-900 { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +} @media (min-width: 640px) { .sm\:left-0 { @@ -1925,14 +1953,14 @@ select { flex: 1 1 0%; } - .sm\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - .sm\:items-center { align-items: center; } + .sm\:justify-start { + justify-content: flex-start; + } + .sm\:justify-center { justify-content: center; } @@ -1941,28 +1969,28 @@ select { justify-content: space-between; } - .sm\:rounded-lg { - border-radius: 0.5rem; - } - .sm\:rounded-md { border-radius: 0.375rem; } + .sm\:rounded-lg { + border-radius: 0.5rem; + } + .sm\:p-6 { padding: 1.5rem; } - .sm\:px-10 { - padding-left: 2.5rem; - padding-right: 2.5rem; - } - .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } + .sm\:px-10 { + padding-left: 2.5rem; + padding-right: 2.5rem; + } + .sm\:pt-0 { padding-top: 0px; } @@ -1989,14 +2017,14 @@ select { margin-bottom: 2.5rem; } - .md\:mt-8 { - margin-top: 2rem; - } - .md\:mt-0 { margin-top: 0px; } + .md\:mt-8 { + margin-top: 2rem; + } + .md\:block { display: block; } @@ -2017,10 +2045,6 @@ select { width: 70%; } - .md\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -2078,14 +2102,6 @@ select { display: none; } - .lg\:max-w-7xl { - max-width: 80rem; - } - - .lg\:grid-cols-8 { - grid-template-columns: repeat(8, minmax(0, 1fr)); - } - .lg\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; @@ -2102,10 +2118,6 @@ select { width: 40%; } - .xl\:grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } diff --git a/public/js/app.js b/public/js/app.js index 0f12448f..9973a7c0 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -33925,6 +33925,19 @@ __webpack_require__.r(__webpack_exports__); // extracted by mini-css-extract-plugin +/***/ }), + +/***/ "./resources/css/gallery.less": +/*!************************************!*\ + !*** ./resources/css/gallery.less ***! + \************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +// extracted by mini-css-extract-plugin + + /***/ }), /***/ "./resources/css/context-js.less": @@ -38161,6 +38174,7 @@ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/* /******/ "/js/app": 0, /******/ "css/app": 0, /******/ "css/context-js/context-js": 0, +/******/ "css/gallery": 0, /******/ "css/common": 0, /******/ "css/fontawesome": 0 /******/ }; @@ -38212,11 +38226,12 @@ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/* /******/ // startup /******/ // Load entry module and return exports /******/ // This entry module depends on other loaded chunks and execution need to be delayed -/******/ __webpack_require__.O(undefined, ["css/app","css/context-js/context-js","css/common","css/fontawesome"], () => (__webpack_require__("./resources/js/app.js"))) -/******/ __webpack_require__.O(undefined, ["css/app","css/context-js/context-js","css/common","css/fontawesome"], () => (__webpack_require__("./resources/css/fontawesome.less"))) -/******/ __webpack_require__.O(undefined, ["css/app","css/context-js/context-js","css/common","css/fontawesome"], () => (__webpack_require__("./resources/css/common.less"))) -/******/ __webpack_require__.O(undefined, ["css/app","css/context-js/context-js","css/common","css/fontawesome"], () => (__webpack_require__("./resources/css/context-js.less"))) -/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["css/app","css/context-js/context-js","css/common","css/fontawesome"], () => (__webpack_require__("./resources/css/app.css"))) +/******/ __webpack_require__.O(undefined, ["css/app","css/context-js/context-js","css/gallery","css/common","css/fontawesome"], () => (__webpack_require__("./resources/js/app.js"))) +/******/ __webpack_require__.O(undefined, ["css/app","css/context-js/context-js","css/gallery","css/common","css/fontawesome"], () => (__webpack_require__("./resources/css/fontawesome.less"))) +/******/ __webpack_require__.O(undefined, ["css/app","css/context-js/context-js","css/gallery","css/common","css/fontawesome"], () => (__webpack_require__("./resources/css/common.less"))) +/******/ __webpack_require__.O(undefined, ["css/app","css/context-js/context-js","css/gallery","css/common","css/fontawesome"], () => (__webpack_require__("./resources/css/gallery.less"))) +/******/ __webpack_require__.O(undefined, ["css/app","css/context-js/context-js","css/gallery","css/common","css/fontawesome"], () => (__webpack_require__("./resources/css/context-js.less"))) +/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["css/app","css/context-js/context-js","css/gallery","css/common","css/fontawesome"], () => (__webpack_require__("./resources/css/app.css"))) /******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); /******/ /******/ })() diff --git a/public/mix-manifest.json b/public/mix-manifest.json index 37874e1e..d32e44ef 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -2,6 +2,7 @@ "/js/app.js": "/js/app.js", "/css/app.css": "/css/app.css", "/css/context-js/context-js.css": "/css/context-js/context-js.css", + "/css/gallery.css": "/css/gallery.css", "/css/common.css": "/css/common.css", "/css/fontawesome.css": "/css/fontawesome.css", "/js/blueimp-file-upload/jquery.ui.widget.js": "/js/blueimp-file-upload/jquery.ui.widget.js", @@ -16,5 +17,7 @@ "/js/clipboard/index.browser.js": "/js/clipboard/index.browser.js", "/js/dragselect/ds.min.js": "/js/dragselect/ds.min.js", "/js/context-js/context-js.js": "/js/context-js/context-js.js", - "/js/echarts/echarts.min.js": "/js/echarts/echarts.min.js" + "/js/echarts/echarts.min.js": "/js/echarts/echarts.min.js", + "/js/masonry/masonry.pkgd.min.js": "/js/masonry/masonry.pkgd.min.js", + "/js/imagesloaded/imagesloaded.pkgd.min.js": "/js/imagesloaded/imagesloaded.pkgd.min.js" } diff --git a/resources/css/gallery.less b/resources/css/gallery.less new file mode 100644 index 00000000..fa5930f3 --- /dev/null +++ b/resources/css/gallery.less @@ -0,0 +1,9 @@ +.images-grid { + .grid-item { + transition: all .3s; + &:hover { + margin-top: -5px; + box-shadow: 15.8px 21.3px 83.8px rgba(0, 0, 0, 0.07), 102px 137px 196px rgba(0, 0, 0, 0.035); + } + } +} diff --git a/resources/views/user/gallery.blade.php b/resources/views/user/gallery.blade.php index 700844d1..2c1f2c2c 100644 --- a/resources/views/user/gallery.blade.php +++ b/resources/views/user/gallery.blade.php @@ -1,24 +1,47 @@ @section('title', '画廊') +@push('styles') + +@endpush + -
-
- @foreach(\App\Models\Image::all() as $image) -
-
- +
+
+

2022 年 1 月

+
+ @foreach(\App\Models\Image::all() as $image) +
+
+ +
+ + +

{{ $image->user->name }}

+
-
- 11 -
-
- @endforeach + @endforeach +
@push('scripts') + + @endpush diff --git a/resources/views/user/settings.blade.php b/resources/views/user/settings.blade.php index c30e739d..5584ed1f 100644 --- a/resources/views/user/settings.blade.php +++ b/resources/views/user/settings.blade.php @@ -44,6 +44,11 @@
+
+ + +
+
diff --git a/webpack.mix.js b/webpack.mix.js index 47376f1a..77a0623f 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -18,6 +18,7 @@ mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'pub ]); mix.less('resources/css/fontawesome.less', 'public/css'); mix.less('resources/css/common.less', 'public/css'); +mix.less('resources/css/gallery.less', 'public/css'); mix.copy('node_modules/blueimp-file-upload/js/vendor/jquery.ui.widget.js', 'public/js/blueimp-file-upload'); mix.copy('node_modules/blueimp-file-upload/js/jquery.iframe-transport.js', 'public/js/blueimp-file-upload'); @@ -45,3 +46,8 @@ mix.copy('resources/js/context-js.js', 'public/js/context-js') // apache echarts mix.copy('node_modules/echarts/dist/echarts.min.js', 'public/js/echarts') + +// masonry layout +mix.copy('node_modules/masonry-layout/dist/masonry.pkgd.min.js', 'public/js/masonry') +// imagesloaded +mix.copy('node_modules/imagesloaded/imagesloaded.pkgd.min.js', 'public/js/imagesloaded')