generated from dellevin/template
游戏战绩描述
This commit is contained in:
DelLevin-Home
83
static/css/game_dialog.css
Normal file
83
static/css/game_dialog.css
Normal file
@@ -0,0 +1,83 @@
|
||||
/* 悬浮框主体 */
|
||||
.game-detail-tooltip {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
width: 300px;
|
||||
display: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* 悬浮框内容 */
|
||||
.tooltip-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 悬浮框头部 */
|
||||
.tooltip-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.tooltip-header h4 {
|
||||
margin: 0;
|
||||
font-size: 1.1em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 悬浮框关闭按钮 */
|
||||
.tooltip-close {
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
color: #aaa;
|
||||
line-height: 1;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.tooltip-close:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 悬浮框正文 */
|
||||
.tooltip-body p {
|
||||
margin: 8px 0;
|
||||
line-height: 1.5;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.tooltip-body strong {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.tooltip-body em {
|
||||
color: #666;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* 悬浮框图片容器 */
|
||||
.tooltip-images {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* 悬浮框图片项 */
|
||||
.tooltip-image-item {
|
||||
max-width: 200px;
|
||||
max-height: 100px;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* --- 游戏详情悬浮框 (Tooltip) 样式 END --- */
|
||||
324
static/css/main.css
Normal file
324
static/css/main.css
Normal file
@@ -0,0 +1,324 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Georgia', 'Times New Roman', 'STSong', serif;
|
||||
line-height: 1.8;
|
||||
color: #333;
|
||||
padding: 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
/* 信件背景（图片） */
|
||||
background: #eeeeee url(../img/bj.png);
|
||||
background-attachment: fixed;
|
||||
background-repeat: repeat;
|
||||
/* 信件背景（马赛克方格） */
|
||||
/*background-color: #f0f0f0;*/
|
||||
/*background-image:*/
|
||||
/* linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%),*/
|
||||
/* linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%);*/
|
||||
/*background-size: 20px 20px;*/
|
||||
}
|
||||
|
||||
.letter-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 40px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 语言切换按钮样式 */
|
||||
.lang-switch-container {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.lang-switch-container img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.lang-switch-container img:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
/* 头部导航 */
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 15px 20px;
|
||||
cursor: pointer;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.nav-tab:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.nav-tab.active {
|
||||
border-bottom-color: #333;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 信纸纹理效果 */
|
||||
.letter-container {
|
||||
background-image:
|
||||
linear-gradient(transparent 29px, #f0f0f0 30px);
|
||||
background-size: 100% 30px;
|
||||
}
|
||||
|
||||
/* 通用内容样式 */
|
||||
.content-section {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.content-section h2 {
|
||||
margin-bottom: 20px;
|
||||
color: #222;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.content-section h3 {
|
||||
margin: 25px 0 15px 0;
|
||||
color: #444;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.content-section p {
|
||||
margin-bottom: 15px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* 列表样式 */
|
||||
.content-section ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.content-section li {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.content-section li::before {
|
||||
content: "▹";
|
||||
color: #999;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* 联系方式 */
|
||||
.contact-info {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* 网站链接 */
|
||||
.website-links a {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.website-links a:hover {
|
||||
color: #333;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 工具和游戏网格 */
|
||||
.tools-grid,
|
||||
.games-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.tool-item,
|
||||
.game-item {
|
||||
padding: 15px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.tool-name,
|
||||
.game-name {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tool-desc,
|
||||
.game-desc {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 关于我页面特殊样式 */
|
||||
.about-me-content {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.about-me-content p:first-child {
|
||||
font-size: 18px;
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.letter-container {
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tools-grid,
|
||||
.games-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* 移动端调整语言按钮位置 */
|
||||
.lang-switch-container {
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 信纸底部页脚描述 */
|
||||
.letter-footer {
|
||||
text-align: center;
|
||||
margin-top: 60px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 底部版权信息 - 在信纸外部 */
|
||||
#footer-wrap {
|
||||
max-width: 800px;
|
||||
margin: 0 auto 20px auto;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
background: white;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2px;
|
||||
background-image:
|
||||
linear-gradient(transparent 29px, #f0f0f0 30px);
|
||||
background-size: 100% 30px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
#footer-wrap a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#footer-wrap a:hover {
|
||||
color: #333;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#footer-wrap img {
|
||||
width: 50px;
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* 今日诗词样式 */
|
||||
#jinrishici-sentence {
|
||||
position: absolute;
|
||||
top: 111px;
|
||||
right: 40px;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
text-align: right;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
/* 网站统计样式 */
|
||||
.webinfo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.webinfo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#jinrishici-sentence {
|
||||
position: static;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.webinfo {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
96
static/css/memos.css
Normal file
96
static/css/memos.css
Normal file
@@ -0,0 +1,96 @@
|
||||
/* --- 闲言碎语样式 --- */
|
||||
.memos-container {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.memo-item {
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.memo-date {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.memo-content {
|
||||
margin-bottom: 8px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.memo-tags {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.memo-tag {
|
||||
background-color: #e0e0e0;
|
||||
color: #666;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.memo-pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.memo-page-btn {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.memo-page-btn:hover:not(.disabled) {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.memo-page-btn.active {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.memo-page-btn.disabled {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.memo-loading,
|
||||
.memo-error {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.memo-attachments {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.memo-attachment-item {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.memo-attachment-image {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* --- 新增的闲言碎语样式 END --- */
|
||||
Reference in New Issue
Block a user