修改阴影样式

master
落雨楓 2 years ago
parent 4427bc0aee
commit 546a2095d0

@ -2,43 +2,6 @@
@text-size: 0.95em; @text-size: 0.95em;
.isekai-create-page { .isekai-create-page {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
.card-header {
padding: .75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid rgba(0,0,0,.125);
display: flex;
align-items: center;
&:first-child {
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}
.card-header-text {
font-size: 1.25em;
}
@media(max-width: 360px){
.card-header-text {
font-size: 1em;
}
}
}
.card-title {
margin: 1em 0 0.75em 1em;
}
.card-body { .card-body {
flex: 1 1 auto; flex: 1 1 auto;
padding: 0.25em; padding: 0.25em;

@ -1,4 +1,4 @@
<div class="isekai-create-page"> <div class="isekai-create-page isekai-card">
<div class="card-header"> <div class="card-header">
<span class="card-header-text"><?php echo wfMessage('isekai-createpage-create-page')->parse(); ?></span> <span class="card-header-text"><?php echo wfMessage('isekai-createpage-create-page')->parse(); ?></span>
</div> </div>

@ -2,43 +2,7 @@
@mobile-height: 60vh; @mobile-height: 60vh;
@text-size: 0.85rem; @text-size: 0.85rem;
.discover-card { .isekai-discover.isekai-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
.card-header {
height: 2.25rem;
padding: .75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid rgba(0,0,0,.125);
display: flex;
align-items: center;
&:first-child {
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}
.card-header-text {
font-size: 1.25rem;
}
.card-header-buttons {
margin-left: auto;
}
}
.card-title {
margin: 1rem 0 0.75rem 1rem;
}
.card-body { .card-body {
flex: 1 1 auto; flex: 1 1 auto;
padding: 0.25rem; padding: 0.25rem;

@ -1,4 +1,4 @@
<div class="isekai-discover discover-card discover-card-<?=wfMessage('isekai-discover-langcode')->parse()?>"> <div class="isekai-discover isekai-card discover-card-<?=wfMessage('isekai-discover-langcode')->parse()?>">
<div class="card-header"> <div class="card-header">
<span class="card-header-text" data-msg="isekai-discover-randompage"><?=wfMessage('isekai-discover-randompage')->parse()?></span> <span class="card-header-text" data-msg="isekai-discover-randompage"><?=wfMessage('isekai-discover-randompage')->parse()?></span>
<span class="card-header-buttons"></span> <span class="card-header-buttons"></span>
@ -8,6 +8,6 @@
<div class="loading"> <div class="loading">
<div class="spinner"></div> <div class="spinner"></div>
</div> </div>
<div class="card-content" style="display: none;"></div> <div class="card-content isekai-thin-scrollbar" style="display: none;"></div>
</div> </div>
</div> </div>

@ -5,6 +5,7 @@
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
-webkit-appearance: none;
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
width: 100%; width: 100%;
@ -25,6 +26,8 @@
cursor: pointer; cursor: pointer;
color: black; color: black;
font-size: 1rem; font-size: 1rem;
list-style: none;
-webkit-appearance: none;
&::before { &::before {
content: ''; content: '';
@ -40,8 +43,9 @@
transition: transform 250ms ease; transition: transform 250ms ease;
} }
&::marker,
&::-webkit-details-marker { &::-webkit-details-marker {
transform: rotate(90deg); display: none;
} }
} }

@ -1,3 +1,40 @@
@isekai-card-border-radius: 10px;
.isekai-thin-scrollbar {
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-thumb {
border-radius: 0;
background: #cdcdcd;
&:hover {
background: #a6a6a6;
}
&:active {
background: #606060;
}
}
&::-webkit-scrollbar-track {
border-radius: 0;
background: transparent;
&:hover {
background: #f0f0f0;
}
}
}
.isekai-thin-scrollbar-overlap {
}
.isekai-card { .isekai-card {
position: relative; position: relative;
display: flex; display: flex;
@ -6,33 +43,42 @@
word-wrap: break-word; word-wrap: break-word;
background-color: #fff; background-color: #fff;
background-clip: border-box; background-clip: border-box;
border: 1px solid rgba(0,0,0,.125); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 -1px 4px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(53,72,91,.07);
border-radius: .25rem; border-radius: @isekai-card-border-radius;
margin-bottom: .5rem;
overflow: hidden;
.card-header { .card-header {
padding: .75rem 1.25rem; padding: 0.75rem 1.25rem;
margin-bottom: 0; margin-bottom: 0;
background-color: rgba(0,0,0,.03); background-color: #f7f7f7;
border-bottom: 1px solid rgba(0,0,0,.125); color: black;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
&:first-child { border-top-left-radius: @isekai-card-border-radius;
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0; border-top-right-radius: @isekai-card-border-radius;
}
box-shadow: 0 2px 4px 0px rgba(0,0,0,0.1);
.card-header-text { .card-header-text {
font-size: 1.25rem; font-size: 1.25rem;
} }
@media(max-width: 360px){
.card-header-text {
font-size: 1em;
}
}
.card-header-extra { .card-header-extra {
margin-left: auto; margin-left: auto;
} }
} }
.card-title { .card-title {
margin: 1rem 0 0.75rem 1rem; margin: 0.75rem 0 0.75rem 1rem;
} }
.card-body { .card-body {
@ -51,3 +97,26 @@
} }
} }
} }
.isekai-well {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 -1px 4px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(53,72,91,.07);
border-radius: 5px;
margin-bottom: .5rem;
background-color: #fcfcfc;
padding: 0.5em 1em;
}
.skin-citizen-dark, .skin-timeless-dark {
.isekai-well {
background-color: #090909;
}
.isekai-card {
background-color: #000;
.card-header {
background-color: #090909;
color: white;
}
}
}

@ -7,6 +7,8 @@ module.exports = {
whitespace: 'condense' whitespace: 'condense'
}, },
setup() { setup() {
const bbsUrl = 'https://bbs.isekai.cn';
const mounted = Vue.ref(false); const mounted = Vue.ref(false);
const loading = Vue.ref(true); const loading = Vue.ref(true);
const feedList = Vue.ref([]); const feedList = Vue.ref([]);
@ -15,19 +17,38 @@ module.exports = {
let recentData = { let recentData = {
recentNew: null, recentNew: null,
recentEdit: null, recentEdit: null,
recentThread: null,
}; };
let requiredData = ['recentNew', 'recentEdit'];
let externalData = [];
const onLoaded = () => { const onLoaded = () => {
if (Array.isArray(recentData.recentNew) && Array.isArray(recentData.recentEdit)) { if (!requiredData.every((key) => Array.isArray(recentData[key]))) {
return false;
}
if (!externalData.every((key) => Array.isArray(recentData[key]))) {
return false;
}
// //
let recentList = [ let recentList = [];
...recentData.recentNew, requiredData.forEach((key) => {
...recentData.recentEdit recentList.push(...recentData[key]);
]; });
externalData.forEach((key) => {
recentList.push(...recentData[key]);
});
recentList.sort((a, b) => b.orderWeight - a.orderWeight); recentList.sort((a, b) => b.orderWeight - a.orderWeight);
// pageid // pageid
let pageIdList = []; let pageIdList = [];
recentList = recentList.filter((item) => { recentList = recentList.filter((item) => {
if (item.external) { //
return true;
}
if (pageIdList.includes(item.pageid)) { if (pageIdList.includes(item.pageid)) {
return false; return false;
} else { } else {
@ -51,7 +72,12 @@ module.exports = {
if (data.query && data.query.pages) { if (data.query && data.query.pages) {
const pageInfoList = data.query.pages; const pageInfoList = data.query.pages;
recentList = recentList.map((info) => { recentList = recentList.map((info) => {
if (info.pageid in pageInfoList) { if (info.external) {
return {
pageid: -1,
...info,
};
} else if (info.pageid in pageInfoList) {
const pageInfo = pageInfoList[info.pageid]; const pageInfo = pageInfoList[info.pageid];
return { return {
pageid: info.pageid, pageid: info.pageid,
@ -73,11 +99,9 @@ module.exports = {
loading.value = false; loading.value = false;
} }
}); });
}
}; };
Vue.onMounted(() => { const loadData = () => {
mounted.value = true;
api.get({ api.get({
action: 'query', action: 'query',
list: 'recentchanges', list: 'recentchanges',
@ -121,6 +145,46 @@ module.exports = {
onLoaded(); onLoaded();
} }
}); });
if (bbsUrl) {
externalData.push('recentThread');
let formatter = document.createElement('div');
fetch('/api/bbs/recent').then((res) => {
if (res.ok) {
return res.json();
} else {
throw new Error('Cannot load bbs threads: HTTP ' + res.status + ' ' + res.statusText);
}
}).then((data) => {
recentData.recentThread = [];
if (data && Array.isArray(data.topics)) {
data.topics.forEach((topicData) => {
let data = {
external: true,
siteName: '异世界红茶馆',
title: topicData.title,
orderWeight: new Date(topicData.timestamp).getTime(),
url: bbsUrl + '/topic/' + topicData.slug,
}
if (topicData.teaser) {
data.url += '/' + topicData.teaser.index.toString();
// HTML
formatter.innerHTML = topicData.teaser.content
data.description = formatter.innerText;
}
recentData.recentThread.push(data);
});
}
onLoaded();
}).catch(console.error);
} else {
recentData.recentThread = [];
}
}
Vue.onMounted(() => {
mounted.value = true;
loadData();
}); });
return { return {
@ -133,7 +197,7 @@ module.exports = {
</script> </script>
<template> <template>
<div class="isekai-feed-list" :class="{ mounted: mounted }"> <div class="isekai-feed-list isekai-thin-scrollbar" :class="{ mounted: mounted }">
<div v-if="loading" class="loading"> <div v-if="loading" class="loading">
<div class="spinner"> <div class="spinner">
<div class="oo-ui-widget oo-ui-widget-enabled oo-ui-progressBarWidget-indeterminate oo-ui-progressBarWidget" <div class="oo-ui-widget oo-ui-widget-enabled oo-ui-progressBarWidget-indeterminate oo-ui-progressBarWidget"
@ -146,7 +210,10 @@ module.exports = {
<a class="isekai-list-item" v-for="(feedItem, index) in feedList" :key="index" :href="feedItem.url" <a class="isekai-list-item" v-for="(feedItem, index) in feedList" :key="index" :href="feedItem.url"
target="_blank"> target="_blank">
<div class="isekai-list-item-content"> <div class="isekai-list-item-content">
<div class="isekai-list-item-title">{{ feedItem.title }}</div> <div class="isekai-list-item-title">
<div>{{ feedItem.title }}</div>
<div v-if="feedItem.siteName" class="tag">{{ feedItem.siteName }}</div>
</div>
<div class="isekai-list-item-text">{{ feedItem.description }}</div> <div class="isekai-list-item-text">{{ feedItem.description }}</div>
</div> </div>
<div class="isekai-list-item-icon"> <div class="isekai-list-item-icon">

@ -1,14 +1,14 @@
@feed-list-height: 24rem; @feed-list-height: 23.8rem;
@feed-list-height-mobile: 70vh; @feed-list-height-mobile: 70vh;
.isekai-feed-list-card > .card-header { .isekai-feed-list-card > .card-header {
height: 2.25rem; height: 2.2rem;
} }
.isekai-feed-list { .isekai-feed-list {
margin: 0; margin: 0;
height: @feed-list-height; height: @feed-list-height;
overflow-y: auto; overflow-y: overlay;
display: none; display: none;
&.mounted { &.mounted {
@ -85,6 +85,20 @@
} }
} }
.isekai-list-item-title {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 1.5rem;
.tag {
opacity: 0.6;
font-size: 0.8rem;
padding: 2px 8px;
background-color: rgba(0, 0, 0, 0.1);
}
}
.isekai-list-item-content { .isekai-list-item-content {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex-positive: 1; -ms-flex-positive: 1;
@ -111,3 +125,27 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
} }
.skin-citizen-dark, .skin-timeless-dark {
.isekai-list {
a {
color: white;
text-decoration: none;
&:hover {
color: white;
text-decoration: none;
}
&:visited {
color: white;
text-decoration: none;
&:hover {
color: white;
text-decoration: none;
}
}
}
}
}
Loading…
Cancel
Save