Skip to content

Commit 6488252

Browse files
modstartmodstart
committed
feat: blog dark mode optimized
1 parent 2bf629a commit 6488252

File tree

9 files changed

+280
-264
lines changed

9 files changed

+280
-264
lines changed

‎module/Blog/View/pc/blog/inc/blogItems.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
</span>
3131
@endif
3232
<a href="{{modstart_web_url('blog/'.$record['id'])}}"
33-
class="pb-keywords-highlight tw-align-top tw-inline-block tw-leading-6 ub-text-default tw-text-xl">
33+
class="pb-keywords-highlight tw-align-top tw-inline-block tw-leading-6 default tw-text-xl">
3434
{{$record['title']}}
3535
</a>
3636
</div>

‎module/Blog/View/pc/blog/message.blade.php‎

Lines changed: 60 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -82,74 +82,76 @@
8282
</div>
8383
</div>
8484
</div>
85-
<div class="tw-p-6 margin-bottom tw-bg-white tw-rounded">
86-
<div class="tw-text-lg">
87-
<i class="iconfont icon-comment"></i>
88-
我来留言
89-
</div>
90-
<div class="tw-mt-4" onclick="$('.pb-blog-comment-submit-box').css({height:'auto'})">
91-
<form method="post" data-ajax-form action="{{modstart_api_url('blog/message/add')}}">
92-
<div class="pb-blog-comment">
93-
<div class="tw-flex">
94-
<div class="tw-w-10">
95-
<div class="ub-cover-1-1 tw-rounded-full" style="background-image:url({{\ModStart\Core\Assets\AssetsUtil::fixOrDefault(empty($_memberUser)?'':$_memberUser['avatar'],'asset/image/avatar.svg')}})"></div>
96-
</div>
97-
<div class="tw-flex-grow tw-leading-10 tw-ml-4 tw-text-lg">
98-
@if(!empty($_memberUser))
99-
<input type="text" name="username" class="form-lg" style="border:none;border-bottom:1px solid #EEE;background:transparent;" value="{{$_memberUser['username']}}" readonly />
100-
@else
101-
<input type="text" name="username" class="form-lg" style="border:none;border-bottom:1px solid #EEE;" placeholder="匿名用户" value="{{!empty($_memberUser)?$_memberUser['username']:''}}" />
102-
@endif
103-
</div>
104-
@if(modstart_module_enabled('Member'))
105-
<div class="tw-pt-4">
106-
@if(\Module\Member\Auth\MemberUser::isNotLogin())
107-
<a href="{{modstart_web_url('login',['redirect'=>\ModStart\Core\Input\Request::currentPageUrl()])}}" class="tw-text-gray-400">
108-
<i class="iconfont icon-user-o"></i>
109-
登录
110-
</a>
85+
<div class="ub-content-box margin-bottom">
86+
<div class="tw-p-3">
87+
<div class="tw-text-lg">
88+
<i class="iconfont icon-comment"></i>
89+
我来留言
90+
</div>
91+
<div class="tw-mt-4" onclick="$('.pb-blog-comment-submit-box').css({height:'auto'})">
92+
<form method="post" data-ajax-form action="{{modstart_api_url('blog/message/add')}}">
93+
<div class="pb-blog-comment">
94+
<div class="tw-flex">
95+
<div class="tw-w-10">
96+
<div class="ub-cover-1-1 tw-rounded-full" style="background-image:url({{\ModStart\Core\Assets\AssetsUtil::fixOrDefault(empty($_memberUser)?'':$_memberUser['avatar'],'asset/image/avatar.svg')}})"></div>
97+
</div>
98+
<div class="tw-flex-grow tw-leading-10 tw-ml-4 tw-text-lg">
99+
@if(!empty($_memberUser))
100+
<input type="text" name="username" class="form-lg" style="border:none;border-bottom:1px solid #EEE;background:transparent;" value="{{$_memberUser['username']}}" readonly />
111101
@else
112-
<a href="{{modstart_web_url('member')}}" class="tw-text-gray-400">
113-
<i class="iconfont icon-user-o"></i>
114-
已登录
115-
</a>
102+
<input type="text" name="username" class="form-lg" style="border:none;border-bottom:1px solid #EEE;" placeholder="匿名用户" value="{{!empty($_memberUser)?$_memberUser['username']:''}}" />
116103
@endif
117104
</div>
118-
@endif
119-
</div>
120-
<div class="tw-mt-4">
121-
<textarea class="form-lg tw-w-full tw-resize-none" name="content" style="height:5rem;" placeholder="输入想说的话"></textarea>
122-
</div>
123-
<div class="pb-blog-comment-submit-box tw-h-0 tw-overflow-hidden">
124-
<div>
125-
<div class="row">
126-
<div class="col-md-6 tw-mt-4">
127-
<input type="text" class="form-lg tw-w-full" name="email" placeholder="输入邮箱" />
105+
@if(modstart_module_enabled('Member'))
106+
<div class="tw-pt-4">
107+
@if(\Module\Member\Auth\MemberUser::isNotLogin())
108+
<a href="{{modstart_web_url('login',['redirect'=>\ModStart\Core\Input\Request::currentPageUrl()])}}" class="tw-text-gray-400">
109+
<i class="iconfont icon-user-o"></i>
110+
登录
111+
</a>
112+
@else
113+
<a href="{{modstart_web_url('member')}}" class="tw-text-gray-400">
114+
<i class="iconfont icon-user-o"></i>
115+
已登录
116+
</a>
117+
@endif
128118
</div>
129-
<div class="col-md-6 tw-mt-4">
130-
<input type="text" class="form-lg tw-w-full" name="url" placeholder="输入网站" />
131-
</div>
132-
</div>
119+
@endif
120+
</div>
121+
<div class="tw-mt-4">
122+
<textarea class="form-lg tw-w-full tw-resize-none" name="content" style="height:5rem;" placeholder="输入想说的话"></textarea>
133123
</div>
134-
<div>
135-
<div class="row">
136-
<div class="col-md-6 tw-mt-4">
137-
{!! \Module\Vendor\Provider\Captcha\CaptchaProvider::get(modstart_config('Blog_MessageCaptchaProvider','default'))->render() !!}
124+
<div class="pb-blog-comment-submit-box tw-h-0 tw-overflow-hidden">
125+
<div>
126+
<div class="row">
127+
<div class="col-md-6 tw-mt-4">
128+
<input type="text" class="form-lg tw-w-full" name="email" placeholder="输入邮箱" />
129+
</div>
130+
<div class="col-md-6 tw-mt-4">
131+
<input type="text" class="form-lg tw-w-full" name="url" placeholder="输入网站" />
132+
</div>
138133
</div>
139-
<div class="col-md-6 tw-mt-4">
140-
<button type="submit" class="btn btn-lg btn-block">
141-
<i class="iconfont icon-direction-right"></i>
142-
提交
143-
</button>
134+
</div>
135+
<div>
136+
<div class="row">
137+
<div class="col-md-6 tw-mt-4">
138+
{!! \Module\Vendor\Provider\Captcha\CaptchaProvider::get(modstart_config('Blog_MessageCaptchaProvider','default'))->render() !!}
139+
</div>
140+
<div class="col-md-6 tw-mt-4">
141+
<button type="submit" class="btn btn-lg btn-block">
142+
<i class="iconfont icon-direction-right"></i>
143+
提交
144+
</button>
145+
</div>
144146
</div>
145147
</div>
146-
</div>
147-
<div class="tw-mt-4 tw-text-gray-400">
148-
<b>说明：</b>请文明发言，共建和谐网络，您的个人信息不会被公开显示。
148+
<div class="tw-mt-4 tw-text-gray-400">
149+
<b>说明：</b>请文明发言，共建和谐网络，您的个人信息不会被公开显示。
150+
</div>
149151
</div>
150152
</div>
151-
</div>
152-
</form>
153+
</form>
154+
</div>
153155
</div>
154156
</div>
155157

‎module/Blog/View/pc/blog/tags.blade.php‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,27 @@
1010

1111
@section('bodyContent')
1212

13-
<div class="ub-container">
13+
<div class="ub-container margin-top">
1414
<div class="row">
15-
<div class="col-md-8 margin-bottom">
16-
17-
<div class="tw-p-6 tw-bg-white tw-rounded">
18-
<div class="tw-text-lg">
19-
<i class="iconfont icon-tag"></i>
20-
博客标签
21-
</div>
22-
<div class="tw-mt-4">
23-
@foreach($tags as $tag)
24-
<a href="{{modstart_web_url('blogs',['keywords'=>$tag['name']])}}"
25-
class="tw-rounded-3xl tw-text-gray-600 tw-inline-block tw-bg-gray-100 tw-leading-8 tw-mb-3 tw-px-2 tw-mr-2 @if(!empty($keywords)&&$keywords==$t) ub-bg-primary ub-text-white @endif">
26-
{{$tag['name']}}
27-
<span class="tw-rounded-3xl tw-bg-gray-300 tw-text-white tw-px-2">
28-
{{$tag['count']?$tag['count']:0}}
29-
</span>
30-
</a>
31-
@endforeach
15+
<div class="col-md-8">
16+
17+
<div class="ub-content-box margin-bottom">
18+
<div class="tw-p-3">
19+
<div class="tw-text-lg">
20+
<i class="iconfont icon-tag"></i>
21+
博客标签
22+
</div>
23+
<div class="tw-mt-4">
24+
@foreach($tags as $t)
25+
<a href="{{modstart_web_url('blogs',['keywords'=>$t['name']])}}"
26+
class="hover:tw-shadow ub-content-block tw-inline-block tw-leading-5 tw-mb-2 tw-mr-2 tw-px-2 tw-py-1 tw-rounded-3xl @if(!empty($keywords)&&$keywords==$t) ub-bg-primary @endif">
27+
{{$t['name']}}
28+
<span class="tw-rounded-3xl tw-bg-gray-400 tw-text-white tw-px-1 tw-opacity-50">
29+
{{$t['count']?$t['count']:0}}
30+
</span>
31+
</a>
32+
@endforeach
33+
</div>
3234
</div>
3335
</div>
3436

‎public/asset/theme/default/style.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vendor/modstart/modstart/asset/theme/default/style.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vendor/modstart/modstart/resources/asset/src/sui/base/component/reset.less‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,15 +118,19 @@ sup {
118118
}
119119

120120
a {
121-
color: #007bff;
121+
color: var(--color-link);
122122
text-decoration: none;
123123
background-color: transparent;
124124
-webkit-text-decoration-skip: objects;
125125
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
126+
127+
&.default {
128+
color: var(--color-text);
129+
}
126130
}
127131

128132
a:hover {
129-
color: #0056b3;
133+
color: var(--color-link-hover);
130134
}
131135

132136
a:not([href]):not([tabindex]):focus {

‎vendor/modstart/modstart/resources/asset/src/sui/base/theme.less‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@
1212
@color-warning-dark: rgb(210, 103, 0);
1313
@color-warning-light: rgb(255, 248, 234);
1414
@color-link: rgb(0, 100, 250);
15-
@color-link-dark: rgb(0, 98, 214);
15+
@color-link-dark: rgb(0, 76, 165);
1616
@color-link-light: rgb(107, 167, 245);
17+
@color-link-hover: rgb(0, 76, 165);
1718
@color-tertiary: rgb(107, 112, 117);
1819
@color-tertiary-dark: rgb(85, 91, 97);
1920
@color-tertiary-light: rgb(198, 202, 205);
@@ -28,6 +29,7 @@
2829
@color-body-block-bg-hover: darken(@color-body-block-bg, 5%);
2930
@color-body-block: #666666;
3031
@color-body-block-hover: darken(@color-body-block, 5%);
32+
@color-mark: rgba(0, 0, 0, 0.5);
3133

3234
:root, page {
3335
// 主色调
@@ -48,6 +50,7 @@
4850
--color-link: @color-link;
4951
--color-link-light: @color-link-light;
5052
--color-link-dark: @color-link-dark;
53+
--color-link-hover: @color-link-hover;
5154
--color-tertiary: @color-tertiary;
5255
--color-tertiary-dark: @color-tertiary-dark;
5356
--color-tertiary-light: @color-tertiary-light;
@@ -67,6 +70,8 @@
6770
--color-body-block-bg-hover: @color-body-block-bg-hover;
6871
--color-body-block: @color-body-block;
6972
--color-body-block-hover: @color-body-block-hover;
73+
// 遮罩层
74+
--color-mask: @color-mark;
7075

7176
// 渐变色背景
7277
--color-primary-gradient-bg: linear-gradient(45deg, var(--color-primary) 0%, var(--color-primary-light) 150%);
@@ -88,17 +93,20 @@
8893

8994
[data-theme="dark"] {
9095
&:root, page, & {
91-
--color-body-bg: #151728 !important;
92-
--color-content-bg: #1b1e32 !important;
93-
--color-body-line: #424554 !important;
94-
--color-text: #a3a7bb !important;
95-
--color-input-placeholder: #80859f !important;
96-
--color-input-bg: #1b1e32 !important;
97-
--color-input-light-bg: #1b1e32 !important;
98-
--color-muted: #80859f !important;
99-
--color-body-block-bg: #545767 !important;
100-
--color-body-block-bg-hover: #9396a8 !important;
101-
--color-body-block: #F8F8F8 !important;
102-
--color-body-block-hover: #FFFFFF !important;
96+
--color-link: #a3a7bb;
97+
--color-link-hover: #cacdda;
98+
--color-body-bg: #151728;
99+
--color-content-bg: #1b1e32;
100+
--color-body-line: #424554;
101+
--color-text: #a3a7bb;
102+
--color-input-placeholder: #80859f;
103+
--color-input-bg: #1b1e32;
104+
--color-input-light-bg: #1b1e32;
105+
--color-muted: #80859f;
106+
--color-body-block-bg: #545767;
107+
--color-body-block-bg-hover: #9396a8;
108+
--color-body-block: #F8F8F8;
109+
--color-body-block-hover: #FFFFFF;
110+
--color-mask: rgba(240, 240, 240, 0.5);
103111
}
104112
}

‎vendor/modstart/modstart/resources/asset/src/sui/bricks/component/header/header.less‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@
206206
.menu-mask {
207207
content: '';
208208
display: block;
209-
background: rgba(0, 0, 0, 0.5);
209+
background: var(--color-mask);
210210
position: fixed;
211211
top: 2.5rem;
212212
right: 0;
@@ -810,7 +810,7 @@
810810
.nav-mask {
811811
content: '';
812812
display: block;
813-
background: rgba(0, 0, 0, 0.5);
813+
background: var(--color-mask);
814814
position: absolute;
815815
top: 2.5rem;
816816
right: 0;
@@ -882,7 +882,7 @@
882882
.nav {
883883
position: absolute;
884884
display: block;
885-
background: #FFF;
885+
background: var(--color-content-bg);
886886
top: 2.5rem;
887887
left: -60%;
888888
bottom: 0;
@@ -901,7 +901,7 @@
901901

902902
a, .nav-item {
903903
display: block;
904-
background: #FFF;
904+
background: var(--color-content-bg);
905905

906906
.sub-nav {
907907
display: block;
@@ -1071,7 +1071,7 @@
10711071
.menu-mask {
10721072
content: '';
10731073
display: block;
1074-
background: rgba(0, 0, 0, 0.5);
1074+
background: var(--color-mask);
10751075
position: fixed;
10761076
top: 3rem;
10771077
right: 0;
@@ -1101,7 +1101,7 @@
11011101
.search-mask {
11021102
content: '';
11031103
display: block;
1104-
background: rgba(0, 0, 0, 0.5);
1104+
background: var(--color-mask);
11051105
position: fixed;
11061106
top: 3rem;
11071107
right: 0;

0 commit comments

Comments
 (0)