H萌娘

「Widget:主题板块导航」與「Widget:网站维护时间线」：頁面間的差異

微件 討論
(頁面間的差異)

Widget:网站维护时间线 (檢視原始碼)

於 2021年8月13日 (五) 19:36 的修訂

增加 2,495 位元組 、​ 2021年8月13日 (星期五)
無編輯摘要
imported>Irukaza
無編輯摘要
 
imported>=海豚=
無編輯摘要
 
行 1： 行 1：
<noinclude><pre>
<style>
/*
* {
Wiki2021 Interface
  margin: 0;
Contributors: P.T.Đ/Irukaza
Year: 2021
*/
</pre></noinclude><includeonly>
<style type="text/css">
/* default layout */
.main-body {
display: flex;
flex-flow: wrap column;
}
}
 
.timeline {
/** fix bug zooming **/
  height: 100%;
.main-body > div {
  position: relative;
width: 97%;
}
.timeline canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 46px;
}
.timeline figcaption {
  font-weight: 400;
   font-size: 24px;
  text-transform: uppercase;
  -webkit-text-stroke: .25px;
}
.timeline h2 {
  font-weight: 400;
   font-size: 30px;
  padding-bottom: 20px;
  color: #b2cde9!important;
  text-transform: uppercase;
  line-height: 1.2 !important;
}
.timeline h6 {
  color: #0090F5!important;
   font-size: 17px;
   font-weight: 400;
}
.timeline p,
.timeline ol {
  font-weight: 400;
  padding: 3px 0 20px 0;
  color: #575757!important;
  text-align: justify;
  width: 70%;
}
.timeline ol {
  list-style: disc;
  margin-top: -20px;
  padding-left: 40px;
}
.timeline figure {
  float: right;
  width: 100%;
}
}
 
.timeline article {
.main-box {
  position: relative;
   margin-bottom: 1.5rem;
  width: 38%;
   min-height: 90%;
  overflow: hidden;
}
}
 
.timeline article:first-of-type {
/* responsive layout */
  float: left;
@media (min-width: 992px) {
  text-align: right;
.main-body {
flex-direction: row;
   margin: 0 -0.5rem;
}
.main-body__left,
.main-body__right {
flex: 1;
   margin: 0 0 0.5rem 0;
}
}
}
 
.timeline article:first-of-type p,
/* tweaks WikimediaUI */
.timeline article:first-of-type figure {
.mw-headline-number {
  float: right;
   display: none;
}
}
 
.timeline article:last-of-type {
.main-header__right .mw-ui-quiet {
  float: right;
padding: 6px 8px;
}
}
 
.timeline article:last-of-type h2 {
.main-header__right .mw-ui-quiet:hover,
  color: #c6e0aa!important;
.main-header__right .mw-ui-quiet:focus,
.main-box__title a:hover,
.main-box__title a:focus,
.main-box-dropdown__content > ul > li > a:hover,
.main-box-dropdown__content > ul > li > a:focus {
color: #0645ad;
}
}
 
.timeline article:last-of-type h6,
/* utils */
.timeline article:last-of-type a {
.u-display-inline-block {
  color: #40aa00!important;
display: inline-block;
}
}
 
.timeline article:last-of-type a:hover {
.u-font-size-larger {
  color: #95D40D!important;
font-size: 1.35em;
}
}
</style>
</head>
<body>
   <section id="timeline">


.u-text-align-center {
   <div class="timeline">
text-align: center;
     <canvas id="cvs3"></canvas>
}
     <article>
       <h2>新增功能</h2>     
       <figure>
         <figcaption>Web Development</figcaption>
         <h6>With modern technologies</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
       <figure>
         <figcaption>Search Engine Op.</figcaption>
         <h6>With Free & Paid Plugin</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
       <figure>
         <figcaption>Graphics Design</figcaption>
         <h6>using ps and all</h6>
         <p>          
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
     </article>


.u-plain-list > ul,
     <article>
.u-plain-list > ul > li {
       <h2>修复BUG</h2>
   margin: 0;
       <figure>
   padding: 0;
         <figcaption>Graphic & WEB</figcaption>
   list-style: none;
         <h6>Learn Today</h6>
}
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
       </figure>
       <figure>
         <figcaption>Mobile Friendly</figcaption>
         <h6>with touch screen</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
       <figure>
         <figcaption>Retina Ready Display</figcaption>
         <h6>Supported all devices</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, molestiae, perferendis. Iusto nam libero doloribus veritatis magnam sequi error, obcaecati, porro atque quo unde iure voluptate officiis eos nostrum, sint. Corporis ipsam necessitatibus repudiandae, beatae odio perferendis provident consequuntur inventore natus deleniti asperiores animi ducimus assumenda possimus eos, cum sunt.
         </p>
       </figure>
       <figure>
         <figcaption>Retina Ready Display</figcaption>
         <h6>Supported all devices</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, molestiae, perferendis. Iusto nam libero doloribus veritatis magnam sequi error, obcaecati, porro atque quo unde iure voluptate officiis eos nostrum, sint. Corporis ipsam necessitatibus repudiandae, beatae odio perferendis provident consequuntur inventore natus deleniti asperiores animi ducimus assumenda possimus eos, cum sunt.
         </p>
       </figure>
             <figure>
         <figcaption>Retina Ready Display</figcaption>
         <h6>Supported all devices</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, molestiae, perferendis. Iusto nam libero doloribus veritatis magnam sequi error, obcaecati, porro atque quo unde iure voluptate officiis eos nostrum, sint. Corporis ipsam necessitatibus repudiandae, beatae odio perferendis provident consequuntur inventore natus deleniti asperiores animi ducimus assumenda possimus eos, cum sunt.
         </p>
       </figure>
     </article>
     <br style="clear:both" />
   </div>


.u-horizontal-list > ul {
</section>
display: inline;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
letter-spacing: -1em;
<script>
}
   function Timeline(cvs) {


.u-horizontal-list > ul > li {
   var self = this,
display: inline;
     paused = true,
   letter-spacing: normal;
     rafid = 0,
}
     mouse = { x: 0, y: 0 },
     canvas = cvs,
     ctx = null;


.u-horizontal-list > ul li::after {
    self.lines = [];
    padding: 0 0.35em;
   content: "·";
   font-weight: bold;
}


.u-horizontal-list > ul li:last-child::after {
   self.isOK = false;
    padding: 0;
   self.options = {
    content: "";
     speed: 0.1,
}
     density: 8,
     radius: 600,
    };
    self.targets = [
     [29, 32, 48, 68],
     [29, 33, 38]
   ];
   self.dotColors = [
     ['#13669b', 'rgba(19, 102, 155, 0.3)', 'rgba(19, 102, 155, 0.08)'],
     ['#7dd317', 'rgba(113, 222, 15, 0.3)', 'rgba(91, 164, 22, 0.12)'],
   ];


.u-plain-heading {
   self.isPaused = function () {
margin-top: 0;
     return paused;
padding-top: 0;
   };
border-bottom-color: transparent;
}


/* others */
   function InitDots() {
/** thumb in .main-box **/
     var tl = $('.timeline');
.main-box__body > .show-image {
     var top = tl.find('h2').outerHeight();
margin: 0.4em 0 0.4em 1em !important;
}


/* .content-improvement-box */
     self.lines[0].dots = [];
.content-improvement-box {
     var y = top;
display: flex;
     tl.find('article:first figure').each(function () {
   flex-flow: wrap column;
   margin: 0 -0.5rem;
}


/* .content-improvement-problems */
       self.lines[0].dots.push([$(this).outerWidth() + 20, y + 20]);
.content-improvement-problems,
.content-improvement-invitation {
   margin: 0 0.5rem;
}


.content-improvement-problems {
       y += $(this).outerHeight();
order: 2;
     });
display: flex;
   flex-wrap: wrap;
   margin: -0.5rem 0;
   padding-top: 1rem;
}


.content-improvement-item {
     self.lines[1].dots = [];
   flex: 1 2 auto;
     var y = top;
   padding: 0.55rem;
     tl.find('article:last figure').each(function () {
width: 100%;
}


/** .content-improvement-item color modifier **/
       self.lines[1].dots.push([canvas.width - $(this).outerWidth() - 20, y + 20]);
.content-improvement-item.-color-red > a {
   border-bottom: 5px solid #ea3b3b;
}


.content-improvement-item.-color-red > a:hover,
       y += $(this).outerHeight();
.content-improvement-item.-color-red > a:focus {
     });
    background-color: #ea3b3b;
    }
}


.content-improvement-item.-color-blue > a {
   function OnResize() {
   border-bottom: 5px solid #36c;
     canvas.width = canvas.offsetWidth;
}
     canvas.height = canvas.offsetHeight;


.content-improvement-item.-color-blue > a:hover,
     var wasPaused = paused;
.content-improvement-item.-color-blue > a:focus {
     self.toggle(false);
   background-color: #36c;
     // Init lines
}
     self.lines[0].reset(canvas.offsetWidth / 2 - 15);
     self.lines[1].reset(canvas.offsetWidth / 2 + 15);


.content-improvement-item.-color-yellow > a {
     InitDots();
   border-bottom: 5px solid #F2C94C;
}


.content-improvement-item.-color-yellow > a:hover,
     self.toggle(!wasPaused);
.content-improvement-item.-color-yellow > a:focus {
    }
    background-color: #F2C94C;
}


.content-improvement-item.-color-green > a {
   function init() {
   border-bottom: 5px solid #27ae60;
     var result = false;
}
     try {
       result = !!(canvas.getContext && (ctx = canvas.getContext('2d')));


.content-improvement-item.-color-green > a:hover,
       self.lines[0] = new Line(0, canvas.offsetHeight - 100, '#4789a3', self.options, mouse);
.content-improvement-item.-color-green > a:focus {
       self.lines[1] = new Line(0, canvas.offsetHeight - 100, '#a0d59c', self.options, mouse);
   background-color: #27ae60;
}


.content-improvement-item.-color-gray > a {
     } catch (e) {
   border-bottom: 5px solid #a2a9b1;
       return false;
}
     }


.content-improvement-item.-color-gray > a:hover,
     $(canvas).mousemove(function (e) {
.content-improvement-item.-color-gray > a:focus {
   background-color: #a2a9b1;
}


/** .content-improvement-item icon modifier **/
       if (e.offsetX) {
.content-improvement-item.-icon-editUndo > a::before {
         mouse.x = e.offsetX;
   background-image: url(//upload.wikimedia.org/wikipedia/commons/c/c5/OOjs_UI_icon_editUndo-ltr.svg);
         mouse.y = e.offsetY;
}
       }
       else if (e.layerX) {
         mouse.x = e.layerX;
         mouse.y = e.layerY;
       }
       else {
         mouse.x = e.pageX - $(canvas).offset().left;
         mouse.y = e.pageY - $(canvas).offset().top;
       }
     });


.content-improvement-item.-icon-tableMergeCells > a::before {
     $(window).resize(OnResize);
   background-image: url(//upload.wikimedia.org/wikipedia/commons/6/64/OOjs_UI_icon_table-merge-cells.svg);
}


.content-improvement-item.-icon-searchCaseSensitive > a::before {
     OnResize();
   background-image: url(//upload.wikimedia.org/wikipedia/commons/e/e5/OOjs_UI_icon_searchCaseSensitive.svg);
}


.content-improvement-item.-icon-alert > a::before {
     return result;
    background-image: url(//upload.wikimedia.org/wikipedia/commons/8/80/OOjs_UI_icon_alert.svg);
    }
}


.content-improvement-item.-icon-tag > a::before {
    function Line(y, height, color, options, mouse) {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/d/dd/OOjs_UI_icon_tag-ltr.svg);
     var self = this;
}


.content-improvement-item.-icon-language > a::before {
     self.color = color;
   background-image: url(//upload.wikimedia.org/wikipedia/commons/4/43/OOjs_UI_icon_language-ltr.svg);
     self.options = options;
}
     self.mouse = mouse;
     self.height = height;
     self.dots = [];
     self.y = y;


.content-improvement-item.-icon-link > a::before {
     self.points = [];
   background-image: url(//upload.wikimedia.org/wikipedia/commons/7/72/OOjs_UI_icon_link-ltr.svg);
}


.content-improvement-item.-icon-history > a::before {
     self.reset = function (x, f) {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/2/27/OOjs_UI_icon_history.svg);
       self.points = [];
}
       for (var y = self.y; y < self.height; y += self.options.density)
         self.points.push(new Point(x, y, self.color));
     }


.content-improvement-item.-icon-code > a::before {
     self.update = function () {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/c/cd/OOjs_UI_icon_code.svg);
       for (var i = 0; i < self.points.length; i++)
}
         self.points[i].update(self.mouse, self.options);
     }


.content-improvement-item.-icon-reference > a::before {
     function Point(x, y) {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/9/9c/OOjs_UI_icon_reference.svg);
       this.y = y;
}
       this.x = x;
       this.base = { x: x, y: y };


.content-improvement-item.-icon-balance-scale > a::before {
       this.update = function (mouse, options) {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/9/90/Font_Awesome_5_solid_balance-scale.svg);
         var dx = this.x - mouse.x,
}
           dy = this.y - mouse.y,
           alpha = Math.atan2(dx, dy),
           alpha = (alpha > 0 ? alpha : 2 * Math.PI + alpha),
           d = options.radius / Math.sqrt(dx * dx + dy * dy);


.content-improvement-item.-icon-help > a::before {
         this.y += Math.cos(alpha) * d + (this.base.y - this.y) * options.speed;
   background-image: url(//upload.wikimedia.org/wikipedia/commons/b/b2/OOjs_UI_icon_help-ltr.svg);
         this.x += Math.sin(alpha) * d + (this.base.x - this.x) * options.speed;
}
       }
     }
   }


.content-improvement-item.-icon-add > a::before {
   function drawCircle(p, r, color) {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/0/06/OOjs_UI_icon_add.svg);
     ctx.fillStyle = color;
}
     ctx.beginPath();
     ctx.arc(p.x, p.y, r, 0, 2 * Math.PI, true);
     ctx.closePath();
     ctx.fill();
   }


.content-improvement-item.-icon-halfBright > a::before {
   function drawLine(p1, p2) {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/a/a1/OOjs_UI_icon_halfBright.svg);
     ctx.beginPath();
}
     ctx.moveTo(p1.x, p1.y);
     ctx.lineTo(p2.x, p2.y);
     ctx.stroke();
     ctx.closePath();
   }


.content-improvement-item.-icon-articleSearch > a::before {
   function redraw() {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/8/86/OOjs_UI_icon_articleSearch-ltr.svg);
     ctx.clearRect(0, 0, canvas.width, canvas.height);
}


.content-improvement-item.-icon-eye > a::before {
     for (var i = 0; i < 2; i++) {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/c/cf/OOjs_UI_icon_eye.svg);
       var points = self.lines[i].points;
}


.content-improvement-item.-icon-block > a::before {
       ctx.beginPath();
   background-image: url(//upload.wikimedia.org/wikipedia/commons/a/a1/OOjs_UI_icon_block.svg);
       ctx.lineWidth = 2;
}
       ctx.strokeStyle = self.lines[i].color;
       ctx.moveTo(points[15].x, points[15].y);


/** .content-improvement-item > a **/
       for (var j = 15; j < points.length - 2; j++) {
.content-improvement-item > a {
         var point = points[j];
   box-sizing: border-box;
   position: relative;
   z-index: 0;
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   overflow: hidden;
   padding: 0.5rem 1rem 1rem;
   width: 100%;
   height: 100%;
   color: inherit;
   background: #f7f7f7;
   text-decoration: none;
   transition: color .1s ease-in-out, background .1s ease-in-out, box-shadow .1s ease-in-out, opacity .1s ease-in-out;
}


.content-improvement-item > a:hover,
         var xc = (points[j + 1].x + point.x) / 2;
.content-improvement-item > a:focus {
         var yc = (points[j + 1].y + point.y) / 2;
   color: #fff!important;
   box-shadow: 0 2px 5px #ccc;
}


.content-improvement-item > a:active {
   opacity: 0.7;
   box-shadow: 0 4px 7px #ccc;
}


.content-improvement-item > a::before {
         ctx.quadraticCurveTo(point.x, point.y, xc, yc);
   content: "";
       }
   position: absolute;
       ctx.stroke();
   z-index: -1;
       ctx.closePath();
   top: 50%;
   right: 0.75rem;
   transform: translateY(-50%);
   width: 100%;
   height: 90%;
   background-size: contain;
   background-position: right;
   background-repeat: no-repeat;
   opacity: 0.03;
   transition: opacity .1s ease-in-out;
}


.content-improvement-item > a:hover::before,
.content-improvement-item > a:focus::before {
   opacity: 0.08;
}


.content-improvement-item > a > span {
       // Dots
   display: block;
       ctx.lineWidth = 1.2;
   width: 100%;
       ctx.strokeStyle = self.dotColors[i][2];
}
       for (var j = 0; j < self.lines[i].dots.length; j++) {
         var dot = self.lines[i].dots[j],
           id = self.targets[i][j];
           dot2 = [
             (self.lines[i].points[id].x + self.lines[i].points[id + 1].x) / 2,
             (self.lines[i].points[id].y + self.lines[i].points[id + 1].y) / 2,
           ];


.content-improvement-item > a > span:nth-child(2) {
         var p1 = { x: dot[0], y: dot[1] };
white-space: nowrap;
         var p2 = { x: dot2[0], y: dot2[1] };
   overflow: hidden;
   text-overflow: ellipsis;
}


.content-improvement-item__number {
   font-weight: bold;
   font-size: 1.8em;
   padding-right: 0.25em;
}


/* .content-improvement-invitation */
         drawLine(p1, p2);
.content-improvement-invitation {
         drawCircle(p1, 4, self.dotColors[i][0]);
order: 1;
   padding: 1rem;
   background: #f7f7f7;
}


.content-improvement-invitation__icon {
         drawCircle(p2, 11, self.dotColors[i][1]);
   margin: 0 0 0.5em 0.75em;
         drawCircle(p2, 5.5, self.dotColors[i][0]);
   float: right;
       }
   width: 5rem;
     }
   height: 5rem;
    }
   background-image: url(//upload.wikimedia.org/wikipedia/commons/b/bd/Wikipedia-logo-v2-bw.svg);
   background-size: 5rem;
   background-position: center;
    background-repeat: no-repeat;
}


.content-improvement-invitation__title {
   function animate() {
   font-weight: bold;
     rafid = requestAnimationFrame(animate);
   font-size: 1.1em;
}


.content-improvement-invitation__content p:last-child {
     self.lines[0].update();
margin-bottom: 0;
     self.lines[1].update();
}


.content-improvement-invitation__button {
     redraw();
padding: 0.75rem 0 0.45rem;
   }
}


/* responsive */
   self.toggle = function (run) {
@media (min-width: 768px) {
     if (!self.isOK) return false;
/* .content-improvement-problems */
.content-improvement-item {
width: 40%;
}
}


@media (min-width: 992px) {
     if (run === undefined)
/* .content-improvement-box */
       self.toggle(!paused);
.content-improvement-box {
flex-direction: row;
}
/* .content-improvement-problems */
.content-improvement-problems {
flex: 2;
order: 2;
   padding-top: 0;
}


/* .content-improvement-invitation */
     else if (!!run && paused) {
.content-improvement-invitation {
       paused = false;
flex: 1;
       animate();
order: 2;
     }
}
     else if (!!!run) {
}
       paused = true;
       cancelAnimationFrame(rafid);
     }
     return true;
   }


@media (min-width: 1200px) {
/* .content-improvement-problems */
.content-improvement-item {
width: 30%;
}
}


/* local fixed */
    self.isOK = init();
body{
    background-image:none !important;
}
}
html>body.skin-minerva .main-box__title {
new Timeline($('#cvs3').get(0)).toggle(true);
   padding: 0 0.75em!important;
</script>
}
.mw-parser-output a.extiw {
   color: #222222;
}
#catlinks {
   display: none;
}
.firstHeading {
   display: none;
}
.comment-replybox {
   display: none;
}
#flowthread {
   display: none;
}
#siteSub {
   display: none!important;
}
</style>
匿名使用者
取自「https://hmoegirl.com/Special:移动版差异/59020...59352」