文章
文章用户Dehoing Store档案快讯社区网址导航

蝶梦社区 CSS 源码公开

也想出现在这里？ 联系我们吧
释放双眼，带上耳机，听听看~！

无论何时，您可以将该 CSS 源码非商业免费使用。
该 CSS 适用于 Flarum 引擎。
当您使用它时，请您务必在您使用它的任何网页的页脚插入以下语句（其中您不可改变链接地址，但链接显示内容可做适当的不违背原意的修改）：

<a href="https://deing-dev.com" target="_blank" rel="noopener">CSS Powered By Dehoing</a>

CSS 文件：

[code]
@font-face {
font-family: 'MiSans';
src: url("https://api.deing-dev.com/space_ui/font/MiSans-Regular.ttf");
}

:root{
<pre><code>/*色彩类*/

--Menu_Color:rgba(255,255,255,0.67);                            /*导航栏颜色*/
--Menu_Color_Mobile:rgba(255,255,255,0.55);

--Second_Menu_Color:rgba(247,247,247,0.75);

--User_Card_Button_Color:rgba(0,0,0,0.15);                      /*用户主页操作按钮平时颜色*/
--User_Card_Button_Hover_Color:rgba(255,255,255,0.67);          /*用户主页操作按钮悬停颜色*/

--Theme_Color:#333;                                             /*主题色设置，只需在此设置一次即可。*/

--text_color:#000;                                              /*文字颜色*/
--background_color:#f9f9f9;                                     /*背景颜色*/
--color_title_3:#888;                                           /*小标题颜色*/
--list_describe_color:#bbb;                                     /*文章描述颜色*/
--Describe_Color:#ccc;                                          /*描述性文字颜色,此处仅应用到页脚文字*/

--Footer_Background_Color:#f9f9f9;                              /*页脚背景颜色*/



/*阴影 &amp; 线的效果*/

--Menu_Shadow:0px 0px 0px rgba(0,0,0,100%);                     /*导航栏阴影调节，分别是 x轴位移，y轴位移，阴影半径，颜色（R，G，B，透明度）*/
--Window_Shadow:0px 29px 64px rgba(0,0,0,35%);                  /*弹出窗体的阴影*/
--Windows_Shadow_Out:0px 10px 29px rgba(0,0,0,18%);
--Second_Menu_Shadow:0 13px 35px rgba(0,0,0,25%);               /*下拉菜单的阴影*/

--Material_Line_Color:#ccc;                                     /*元素边缘使元素拥有亚克力质感的线条，最好不要动它。*/
--Material_Line_Color_Dark:#777;                                /*元素边缘使元素拥有亚克力质感的线条（深色模式），最好不要动它*/
--Menu_Border_Width:0 0 0.5px 0;                                  /*菜单质感*/
--Meterial_Line_Weigh:0.4px;                                      /*标准质感边缘*/
--Meterial_Line_Weigh_Bold:0.6px;                                 /*更粗的质感边缘*/



/*模糊效果*/

--Ultra_Blur:65px;                                                /*全屏窗口使用的模糊半径*/
--Max_Blur:45px;                                                  /*最大模糊半径（用于窗口*/
--Default_Blur:23px;                                              /*默认模糊半径*/
--Small_Blur:15px;                                                /*小模糊半径（用于弹窗饿背景模糊）*/
--Min_Blur:5px;                                                   /*最小模糊半径*/



/*动画速度*/

--Change_Speed:0.35s linear;



/*文字排版变量*/

--Footer_Vertical:middle;                                         /*页脚信息显示位置，left为居左；middle为居中；right为居右*/
--Footer_Font_Size:13px;                                          /*页脚文字大小*/
--font_size:15px;                                                 /*一般字体*/
--page_size:13px;                                                 /*文章字体*/
--title_0:41px;                                                   /*大标题字体*/
--title_1:35px;                                                   /*标题字体*/
--title_2:29px;                                                   /*中标题字体*/
--title_3:23px;                                                   /*小标题字体*/
--list_title:23px;                                                /*清单标题*/
--list_describe:13px;                                             /*文章描述信息*/

--Nonlinear_animation: ;  
--linear_animation:linear;



/*圆角及其它*/

--Border_Radius:12px;                                            /*标准圆角*/
--Border_Radius_Min:8px;                                          /*最小圆角*/
--Border_Radius_Max:18px;                                         /*最大圆角*/




transition: var(--Change_Speed);                                  /*全局动画速度*/


--border-radius: 12px;</code></pre>
}

/<em>以上是全局变量</em>/
body {
font-family: "MiSans";
}

/<em>以上嵌入字体文件（字体来自蝶影云 API）</em>/
*{
margin: 0;
padding: 0;
text-decoration: none;
font-family: "MiSans";
box-sizing: border-box;
}

/<em>菜单栏样式边框，勿动</em>/

/<em>saturate(180%)</em>/

#header{                                                              /<em>顶部导航栏</em>/
-webkit-backdrop-filter: blur(var(--Default_Blur));                 /<em>高斯模糊代码开始</em>/
backdrop-filter: blur(var(--Default_Blur));
background-color: var(--Menu_Color);                                /<em>导航栏颜色</em>/
padding: 8px 15px 3px 15px;                                         /<em>勿动</em>/
top: 0;
box-shadow:var(--Menu_Shadow);
border-style:solid;                                                 /<em>线条类型</em>/
border-width:var(--Menu_Border_Width);                              /<em>线条粗细</em>/
border-color:var(--Material_Line_Color);
}

.IndexPage-results sideNavOffset {
transition: var(--Change_Speed);

}

/*

.material_line {
position: fixed; 绝对定位
margin-top: 52px;
background-color: var(--Material_Line_Color);
height: 0.6px;
width: 100%;
text-align: center;
z-index: 5;
}

*/

#app-navigation{                                                      /<em>手机端顶部导航栏</em>/
background-color: var(--Menu_Color_Mobile);
-webkit-backdrop-filter: blur(var(--Default_Blur));                 /<em>高斯模糊代码开始</em>/
backdrop-filter: blur(var(--Default_Blur));
height: 52px;
top: 0;
box-shadow:0 0 0;
padding:10px 0;
overflow: hidden;

}

.app-navigation{                                                      /<em>手机端顶部导航栏</em>/
background-color: var(--Menu_Color_Mobile);
-webkit-backdrop-filter: blur(var(--Default_Blur));                 /<em>高斯模糊代码开始</em>/
backdrop-filter: blur(var(--Default_Blur));
height: 52px;
top: 0;
box-shadow:0 0 0;
padding:10px 0;
overflow: hidden;

}

/<em>按钮</em>/

#app .button {
margin-top: 60px;
margin-bottom: 60px;
margin-left: 60px;
margin-right: 60px;
}

#app .button a {
display: inline-block;
margin: 15px 30px;
color: var(--Theme_Color);
font-size: var(--font_size);
font-weight: 500;
width: 180px;
border: var(--Meterial_Line_Weigh_Bold) solid var(--Theme_Color);
padding: 14px 0;
border-radius: 12px;
transition: var(--Change_Speed);
text-align: center;
}

#app .button a:hover{
background-color: var(--Theme_Color);
color: #fff;
transition: var(--Change_Speed);
}

/<em>页脚</em>/

.footer_line {
margin-top: 40px;
background-color: var(--Material_Line_Color);
height: var(--Meterial_Line_Weigh);
width: 100%;
text-align: center;
}

.footer {

width: 100%;
padding: 20px 0;
top: 0;
background-color: var(--Footer_Background_Color);
}
footer {

color: var(--Describe_Color);
line-height: 25px;
font-size: var(--Footer_Font_Size);
text-align: center;
vertical-align:var(--Footer_Vertical);
padding: 0 13% 0 13%;

}

footer a {
color: var(--Footer_Font_Size);
transition: var(--Change_Speed);
text-decoration: none;

}

footer a:hover{
color: var(--Theme_Color);
transition: var(--Change_Speed);
text-decoration: none;

}

/<em>二级菜单</em>/

.Dropdown-menu {
background-color: var(--Second_Menu_Color);
-webkit-backdrop-filter: blur(var(--Default_Blur));                    /<em>高斯模糊</em>/
backdrop-filter: blur(var(--Default_Blur));
transition: var(--Change_Speed);
border-style:solid;
border-width:var(--Meterial_Line_Weigh_Bold);
border-color: var(--Second_Menu_Color);
box-shadow:var(--Second_Menu_Shadow);

}

/<em>用户主页卡片的按钮</em>/

.UserCard .Button {
background-color: var(--User_Card_Button_Color);
-webkit-backdrop-filter: blur(var(--Default_Blur));                     /<em>高斯模糊</em>/
backdrop-filter: blur(var(--Default_Blur));
border-radius: 8px;
transition: var(--Change_Speed);
border-style:solid;
border-width:var(--Meterial_Line_Weigh);
border-color:var(--Material_Line_Color);
}

/<em>用户主页卡片“操作”按钮悬停</em>/

.UserCard .Button:hover {
background-color: var(--User_Card_Button_Hover_Color);
-webkit-backdrop-filter: blur(var(--Default_Blur));                     /<em>高斯模糊</em>/
backdrop-filter: blur(var(--Default_Blur));
border-radius: 8px;
color:var(--Theme_Color);
transition: var(--Change_Speed);
border-style:solid;
border-width:var(--Meterial_Line_Weigh_Bold);
border-color:var(--Material_Line_Color);
}

/<em>二级菜单选项</em>/
.hasIcon:hover {
transition: var(--Change_Speed);
}

.hasIcon {
transition: var(--Change_Speed);
}

.header-primary {
transition: var(--Change_Speed);
}

/<em>弹窗</em>/

.modal-backdrop {                                                           /<em>弹窗背景</em>/
background-color: rgba(0,0,0,0.55);
-webkit-backdrop-filter: blur(var(--Small_Blur));                       /<em>高斯模糊</em>/
backdrop-filter: blur(--Small_Blur);
transition: var(--Change_Speed);
}

.Modal-content {                                                            /<em>弹窗窗体</em>/
border-radius: 8px;
border-style:solid;
border-width:var(--Meterial_Line_Weigh_Bold);
border-color:var(--Material_Line_Color);
box-shadow:var(--Window_Shadow);
background-color: rgba(255,255,255,1);
}

/<em>手机版弹窗</em>/

.drawer-backdrop {                                                          /<em>弹窗背景</em>/
background-color: rgba(0,0,0,0.55);
-webkit-backdrop-filter: blur(var(--Small_Blur));                       /<em>高斯模糊</em>/
backdrop-filter: blur(var(--Small_Blur));
transition: var(--Change_Speed);
}

/<em>修改头像</em>/

.AvatarEditor .Dropdown-toggle {
-webkit-backdrop-filter: blur(var(--Min_Blur));                         /<em>高斯模糊</em>/
backdrop-filter: blur(var(--Min_Blur));
transition: var(--Change_Speed);
}

/<em>顶部菜单栏</em>/

.NotificationsDropdown .Dropdown-toggle:hover {
transition: var(--Change_Speed);
}

.Button--user {
transition: var(--Change_Speed);
}

.ButtonGroup&gt;.Button{
transition: var(--Change_Speed);
}

.IndexPage .DiscussionListItem-info&gt;.item-tags, .UserPage .DiscussionListItem-info&gt;.item-tags {
transition: var(--Change_Speed);
}

.Modal-body {
background-color:#f1f3f5;
}

.Modal-header {
background-color: rgba(255,255,255,0.67);
}

.TagDiscussionModal .Modal-header{
background-color: rgba(255,255,255,0.67);
}

/<em>发布主题/发布评论的窗体</em>/

.Composer {                                                                 /<em>非全屏，失去焦点</em>/
border-style:solid;
border-width:var(--Meterial_Line_Weigh_Bold);
border-color:var(--Material_Line_Color);
box-shadow:var(--Windows_Shadow_Out);
-webkit-backdrop-filter: blur(var(--Max_Blur));                             /<em>高斯模糊代码开始</em>/
backdrop-filter: blur(--Max_Blur);
background-color: rgba(255,255,255,100%);
}

.Composer.active:not(.fullScreen) {                                         /<em>非全屏，焦点</em>/
border-style:solid;
border-width:var(--Meterial_Line_Weigh_Bold);
border-color:var(--Material_Line_Color);
box-shadow:var(--Window_Shadow);
-webkit-backdrop-filter: blur(var(--Max_Blur));                             /<em>高斯模糊代码开始</em>/
backdrop-filter: blur(--Max_Blur);
background-color: rgba(255,255,255,0.57);
}

.Composer.fullScreen {                                                      /<em>全屏模式</em>/
border-style:solid;
border-width:0px;
border-color:var(--Material_Line_Color);
box-shadow:0 0px 0px rgba(0,0,0,35%);
-webkit-backdrop-filter: blur(var(--Ultra_Blur));                       /<em>高斯模糊代码开始</em>/
backdrop-filter: blur(var(--Ultra_Blur));
background-color: rgba(255,255,255,0.63);
}

/<em>导航栏按钮状态</em>/

.Notification:hover, .Notification:focus, .Notification:focus-within {
transition: var(--Change_Speed);
border-radius: 8px;
}

.Notification {
transition: var(--Change_Speed);
border-radius: 8px;
}

/<em>个人主页个性签名</em>/

.UserCard .FormControl {
-webkit-backdrop-filter: blur(var(--Small_Blur));                       /<em>高斯模糊代码开始</em>/
backdrop-filter: blur(var(--Small_Blur));
background-color: rgba(0,0,0,0.21);
border-style:solid;
border-width:var(--Meterial_Line_Weigh);
border-color:var(--Material_Line_Color_Dark);
box-shadow:0 0 0;
transition: var(--Change_Speed);
color: #fff;

}

.UserCard .FormControl:hover {
-webkit-backdrop-filter: blur(var(--Small_Blur));                       /<em>高斯模糊代码开始</em>/
backdrop-filter: blur(var(--Small_Blur));
background-color: rgba(255,255,255,0.67);
border-style:solid;
border-width:var(--Meterial_Line_Weigh);
border-color:var(--Material_Line_Color);
box-shadow:var(--Second_Menu_Shadow);
transition: var(--Change_Speed);
color: #141414;

}

[/code]
       

【蝶梦社区】温馨提醒：

本站所有文章都可以进行提问，有问必答，欢迎骚扰！

如果您喜欢我们，请收藏本站，您将得到更好的服务。 如有侵权请邮件与我们联系处理。


           
       投诉建议        成为大会员        Dehoing Store
© 转载请联系作者，私自转载视为侵权！

相关文章：

  1. Air Design 4 标准页脚
  2. 文章功能，隐藏内容
  3. 文章功能，文件下载
  4. 【版本更新】蝶梦社区 2.1.01 固件更新

给TA祝梦
共{{data.count}}人
人已祝梦
Air DesignDehoing蝶幻影
猜你喜欢

Air Design 4 标准页脚

012

文章功能，隐藏内容

010

文章功能，文件下载

015
也想出现在这里？ 联系我们吧
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

返回顶部