修改阴影样式

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

@ -2,43 +2,6 @@
@text-size: 0.95em;
.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 {
flex: 1 1 auto;
padding: 0.25em;

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

@ -2,43 +2,7 @@
@mobile-height: 60vh;
@text-size: 0.85rem;
.discover-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;
}
.isekai-discover.isekai-card {
.card-body {
flex: 1 1 auto;
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">
<span class="card-header-text" data-msg="isekai-discover-randompage"><?=wfMessage('isekai-discover-randompage')->parse()?></span>
<span class="card-header-buttons"></span>
@ -8,6 +8,6 @@
<div class="loading">
<div class="spinner"></div>
</div>
<div class="card-content" style="display: none;"></div>
<div class="card-content isekai-thin-scrollbar" style="display: none;"></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);
border-radius: 5px;
overflow: hidden;
-webkit-appearance: none;
@media screen and (max-width: 767px) {
width: 100%;
@ -25,6 +26,8 @@
cursor: pointer;
color: black;
font-size: 1rem;
list-style: none;
-webkit-appearance: none;
&::before {
content: '';
@ -39,9 +42,10 @@
will-change: transform;
transition: transform 250ms ease;
}
&::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 {
position: relative;
display: flex;
@ -6,33 +43,42 @@
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
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: @isekai-card-border-radius;
margin-bottom: .5rem;
overflow: hidden;
.card-header {
padding: .75rem 1.25rem;
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid rgba(0,0,0,.125);
background-color: #f7f7f7;
color: black;
display: flex;
align-items: center;
justify-content: space-between;
border-top-left-radius: @isekai-card-border-radius;
border-top-right-radius: @isekai-card-border-radius;
&:first-child {
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}
box-shadow: 0 2px 4px 0px rgba(0,0,0,0.1);
.card-header-text {
font-size: 1.25rem;
}
@media(max-width: 360px){
.card-header-text {
font-size: 1em;
}
}
.card-header-extra {
margin-left: auto;
}
}
.card-title {
margin: 1rem 0 0.75rem 1rem;
margin: 0.75rem 0 0.75rem 1rem;
}
.card-body {
@ -45,9 +91,32 @@
padding: 0;
}
@media(max-width: 360px){
@media(max-width: 360px) {
.card-header-text {
font-size: 1rem;
}
}
}
.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'
},
setup() {
const bbsUrl = 'https://bbs.isekai.cn';
const mounted = Vue.ref(false);
const loading = Vue.ref(true);
const feedList = Vue.ref([]);
@ -15,69 +17,91 @@ module.exports = {
let recentData = {
recentNew: null,
recentEdit: null,
recentThread: null,
};
let requiredData = ['recentNew', 'recentEdit'];
let externalData = [];
const onLoaded = () => {
if (Array.isArray(recentData.recentNew) && Array.isArray(recentData.recentEdit)) {
//
let recentList = [
...recentData.recentNew,
...recentData.recentEdit
];
recentList.sort((a, b) => b.orderWeight - a.orderWeight);
// pageid
let pageIdList = [];
recentList = recentList.filter((item) => {
if (pageIdList.includes(item.pageid)) {
return false;
} else {
pageIdList.push(item.pageid);
return true;
}
});
if (!requiredData.every((key) => Array.isArray(recentData[key]))) {
return false;
}
if (!externalData.every((key) => Array.isArray(recentData[key]))) {
return false;
}
//
api.get({
"action": "query",
"prop": "extracts|info",
"pageids": pageIdList.join('|'),
"redirects": 1,
"converttitles": 1,
"exchars": 100,
"exintro": 1,
"explaintext": 1,
"inprop": "url"
}).done((data) => {
if (data.query && data.query.pages) {
const pageInfoList = data.query.pages;
recentList = recentList.map((info) => {
if (info.pageid in pageInfoList) {
const pageInfo = pageInfoList[info.pageid];
return {
pageid: info.pageid,
title: pageInfo.title,
description: pageInfo.extract,
url: pageInfo.fullurl
}
} else {
return {
pageid: info.pageid,
title: info.title,
description: '',
url: mw.util.getUrl(info.title)
}
//
let recentList = [];
requiredData.forEach((key) => {
recentList.push(...recentData[key]);
});
externalData.forEach((key) => {
recentList.push(...recentData[key]);
});
recentList.sort((a, b) => b.orderWeight - a.orderWeight);
// pageid
let pageIdList = [];
recentList = recentList.filter((item) => {
if (item.external) { //
return true;
}
if (pageIdList.includes(item.pageid)) {
return false;
} else {
pageIdList.push(item.pageid);
return true;
}
});
//
api.get({
"action": "query",
"prop": "extracts|info",
"pageids": pageIdList.join('|'),
"redirects": 1,
"converttitles": 1,
"exchars": 100,
"exintro": 1,
"explaintext": 1,
"inprop": "url"
}).done((data) => {
if (data.query && data.query.pages) {
const pageInfoList = data.query.pages;
recentList = recentList.map((info) => {
if (info.external) {
return {
pageid: -1,
...info,
};
} else if (info.pageid in pageInfoList) {
const pageInfo = pageInfoList[info.pageid];
return {
pageid: info.pageid,
title: pageInfo.title,
description: pageInfo.extract,
url: pageInfo.fullurl
}
});
// data
feedList.value = recentList;
loading.value = false;
}
});
}
} else {
return {
pageid: info.pageid,
title: info.title,
description: '',
url: mw.util.getUrl(info.title)
}
}
});
// data
feedList.value = recentList;
loading.value = false;
}
});
};
Vue.onMounted(() => {
mounted.value = true;
const loadData = () => {
api.get({
action: 'query',
list: 'recentchanges',
@ -121,6 +145,46 @@ module.exports = {
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 {
@ -133,7 +197,7 @@ module.exports = {
</script>
<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 class="spinner">
<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"
target="_blank">
<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>
<div class="isekai-list-item-icon">

@ -1,14 +1,14 @@
@feed-list-height: 24rem;
@feed-list-height: 23.8rem;
@feed-list-height-mobile: 70vh;
.isekai-feed-list-card > .card-header {
height: 2.25rem;
height: 2.2rem;
}
.isekai-feed-list {
margin: 0;
height: @feed-list-height;
overflow-y: auto;
overflow-y: overlay;
display: none;
&.mounted {
@ -84,6 +84,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 {
-webkit-box-flex: 1;
@ -110,4 +124,28 @@
text-overflow: ellipsis;
-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