improvement: style un peu mieux
This commit is contained in:
Kazhnuz
parent
628f5ecc38
commit
132bf5f060
6 changed files with 67 additions and 171 deletions
|
|
@ -1,28 +0,0 @@
|
|||
function customTabs(hook, vm) {
|
||||
hook.doneEach(function() {
|
||||
// Invoked each time after the data is fully loaded, no arguments,
|
||||
$(".contentArea :first-child").addClass("active")
|
||||
$(".tab :first-child").addClass("active")
|
||||
$(".tablinks").click(function(){
|
||||
var idParent = "#" + $(this).parent().parent().attr("id")
|
||||
var targetString = idParent + " .contentArea ." + $(this).attr("data-target")
|
||||
|
||||
//On fait en sorte que seule la classe visée soit active
|
||||
$(idParent + " .contentArea .tabcontent").removeClass("active")
|
||||
$(targetString).addClass("active")
|
||||
|
||||
// On fait de meme pour le bouton
|
||||
$(idParent + " .tab button").removeClass("active")
|
||||
$(this).addClass("active")
|
||||
|
||||
console.log(idParent + " .contentArea .tabcontent")
|
||||
console.log(idParent + " .tab button")
|
||||
console.log(targetString)
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
window.$docsify.plugins = [].concat(
|
||||
customTabs,
|
||||
(window.$docsify.plugins || [])
|
||||
);
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
body {
|
||||
font-size:1em;
|
||||
}
|
||||
|
||||
.markdown-section {
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
/* Style the tab */
|
||||
.tab {
|
||||
overflow: hidden;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Style the buttons that are used to open the tab content */
|
||||
.tab button {
|
||||
background-color: inherit;
|
||||
float: left;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 14px 16px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Change background color of buttons on hover */
|
||||
.tab button:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
/* Create an active/current tablink class */
|
||||
.tab button.active {
|
||||
color:#FFF;
|
||||
background-color: #42B983;
|
||||
}
|
||||
|
||||
/* Style the tab content */
|
||||
.tabcontent {
|
||||
display: none;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.tabcontent.active {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.markdown-section .table-auto table {
|
||||
display:table;
|
||||
width:100%;
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
.markdown-section table {
|
||||
display:table;
|
||||
width:100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.markdown-section th {
|
||||
height:34px;
|
||||
}
|
||||
|
||||
.markdown-section tr:nth-child(2n) {
|
||||
background-color:#fff;
|
||||
}
|
||||
|
||||
.sidebar ul li a {
|
||||
padding:3px;
|
||||
padding-left:12px;
|
||||
margin-right:12px;
|
||||
border-radius:8px;
|
||||
}
|
||||
|
||||
.sidebar ul li a:hover {
|
||||
text-decoration: none;
|
||||
background-color:rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.sidebar ul li.active > a {
|
||||
border-right:0px solid;
|
||||
background-color:var(--theme-color,#42b983);
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.app-nav li {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.app-nav a {
|
||||
color: inherit;
|
||||
padding:8px;
|
||||
padding-left:12px;
|
||||
padding-right:12px;
|
||||
border-radius:8px;
|
||||
}
|
||||
|
||||
.app-nav a:hover {
|
||||
color: inherit;
|
||||
background-color:rgba(0,0,0,0.05);
|
||||
}
|
||||
|
|
@ -33,8 +33,8 @@ onBeforeUpdate(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<main id="content" class="pt-1">
|
||||
<article id="content" class="pt-1">
|
||||
<div v-html="htmlContent"></div>
|
||||
<slot></slot>
|
||||
</main>
|
||||
</article>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,4 +5,4 @@
|
|||
@import 'custom/global';
|
||||
//@import 'custom/previews';
|
||||
//@import 'custom/featured';
|
||||
//@import 'custom/article';
|
||||
@import 'custom/article';
|
||||
|
|
@ -4,18 +4,22 @@
|
|||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border:0;
|
||||
th, td {
|
||||
border:1px solid rgba(0,0,0,0.2);
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
th {
|
||||
vertical-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th, td {
|
||||
vertical-align:center;
|
||||
padding-top: 0.325em;
|
||||
padding-bottom: 0.325em;
|
||||
padding: 0.325em;
|
||||
}
|
||||
|
||||
th {
|
||||
|
|
|
|||
|
|
@ -1,37 +1,60 @@
|
|||
.article {
|
||||
img {
|
||||
max-width:100%;
|
||||
height:auto;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.thumbnail img {
|
||||
width:100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: $card-radius;
|
||||
object-fit: cover;
|
||||
}
|
||||
/* Style the tab */
|
||||
.tab {
|
||||
overflow: hidden;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
.author-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: $lineheight / 2;
|
||||
|
||||
img {
|
||||
border-radius: 9999px;
|
||||
width: $lineheight * 3;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
margin-right: $lineheight / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.article-category {
|
||||
.badge {
|
||||
display: inline-block;
|
||||
margin-bottom: $lineheight / 4;
|
||||
}
|
||||
}
|
||||
/* Style the buttons that are used to open the tab content */
|
||||
.tab button {
|
||||
background-color: inherit;
|
||||
float: left;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 14px 16px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Change background color of buttons on hover */
|
||||
.tab button:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
/* Create an active/current tablink class */
|
||||
.tab button.active {
|
||||
color: #FFF;
|
||||
background-color: #42B983;
|
||||
}
|
||||
|
||||
/* Style the tab content */
|
||||
.tabcontent {
|
||||
display: none;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.tabcontent.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
article .table-auto table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
article table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
article th {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
article tr:nth-child(2n) {
|
||||
background-color: #fff;
|
||||
}
|
||||
Loading…
Reference in a new issue