Add CRT style

css/crt.less

@@ -0,0 +1,232 @@
+@keyframes flicker {
+    0% {
+        opacity: 0.27861;
+    }
+    5% {
+        opacity: 0.34769;
+    }
+    10% {
+        opacity: 0.23604;
+    }
+    15% {
+        opacity: 0.90626;
+    }
+    20% {
+        opacity: 0.18128;
+    }
+    25% {
+        opacity: 0.83891;
+    }
+    30% {
+        opacity: 0.65583;
+    }
+    35% {
+        opacity: 0.67807;
+    }
+    40% {
+        opacity: 0.26559;
+    }
+    45% {
+        opacity: 0.84693;
+    }
+    50% {
+        opacity: 0.96019;
+    }
+    55% {
+        opacity: 0.08594;
+    }
+    60% {
+        opacity: 0.20313;
+    }
+    65% {
+        opacity: 0.71988;
+    }
+    70% {
+        opacity: 0.53455;
+    }
+    75% {
+        opacity: 0.37288;
+    }
+    80% {
+        opacity: 0.71428;
+    }
+    85% {
+        opacity: 0.70419;
+    }
+    90% {
+        opacity: 0.7003;
+    }
+    95% {
+        opacity: 0.36108;
+    }
+    100% {
+        opacity: 0.24387;
+    }
+}
+@keyframes textShadow {
+    0% {
+        text-shadow:
+            0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5),
+            -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    5% {
+        text-shadow:
+            2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5),
+            -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    10% {
+        text-shadow:
+            0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5),
+            -0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    15% {
+        text-shadow:
+            0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5),
+            -0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    20% {
+        text-shadow:
+            3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5),
+            -3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    25% {
+        text-shadow:
+            1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5),
+            -1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    30% {
+        text-shadow:
+            0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5),
+            -0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    35% {
+        text-shadow:
+            3.896914047650351px 0 1px rgba(0, 30, 255, 0.5),
+            -3.896914047650351px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    40% {
+        text-shadow:
+            3.870905614848819px 0 1px rgba(0, 30, 255, 0.5),
+            -3.870905614848819px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    45% {
+        text-shadow:
+            2.231056963361899px 0 1px rgba(0, 30, 255, 0.5),
+            -2.231056963361899px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    50% {
+        text-shadow:
+            0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5),
+            -0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    55% {
+        text-shadow:
+            2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5),
+            -2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    60% {
+        text-shadow:
+            2.202193051050636px 0 1px rgba(0, 30, 255, 0.5),
+            -2.202193051050636px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    65% {
+        text-shadow:
+            2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5),
+            -2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    70% {
+        text-shadow:
+            0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5),
+            -0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    75% {
+        text-shadow:
+            1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5),
+            -1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    80% {
+        text-shadow:
+            0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5),
+            -0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    85% {
+        text-shadow:
+            0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5),
+            -0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    90% {
+        text-shadow:
+            3.443339761481782px 0 1px rgba(0, 30, 255, 0.5),
+            -3.443339761481782px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    95% {
+        text-shadow:
+            2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5),
+            -2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+    100% {
+        text-shadow:
+            2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5),
+            -2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3),
+            0 0 3px;
+    }
+}
+.crt::after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(18, 16, 16, 0.1);
+    opacity: 0;
+    z-index: 2;
+    pointer-events: none;
+    animation: flicker 0.15s infinite;
+}
+.crt::before {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background:
+        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
+        linear-gradient(
+            90deg,
+            rgba(255, 0, 0, 0.06),
+            rgba(0, 255, 0, 0.02),
+            rgba(0, 0, 255, 0.06)
+        );
+    z-index: 2;
+    background-size:
+        100% 2px,
+        3px 100%;
+    pointer-events: none;
+}
+.crt {
+    animation: textShadow 1.6s infinite;
+}

main.php

@@ -8,90 +8,111 @@
  * @license  GPL 2 (http://www.gnu.org/licenses/gpl.html)
  */
 
-if (!defined('DOKU_INC')) die(); /* must be run from within DokuWiki */
+if (!defined("DOKU_INC")) {
+    die();
+} /* must be run from within DokuWiki */
 
 // Replace default section edit buttons with a compact pencil icon
 global $EVENT_HANDLER;
-$EVENT_HANDLER->register_hook('HTML_SECEDIT_BUTTON', 'BEFORE', null, '_luxtools_secedit_button');
+$EVENT_HANDLER->register_hook(
+    "HTML_SECEDIT_BUTTON",
+    "BEFORE",
+    null,
+    "_luxtools_secedit_button",
+);
 
-function _luxtools_secedit_button(\dokuwiki\Extension\Event $event, $param) {
+function _luxtools_secedit_button(\dokuwiki\Extension\Event $event, $param)
+{
     global $ID, $INFO;
     $data = $event->data;
 
-    if (!isset($data['name']) || $data['name'] === '') {
+    if (!isset($data["name"]) || $data["name"] === "") {
         $event->preventDefault();
-        $event->result = '';
+        $event->result = "";
         return;
     }
 
-    $name   = $data['name'];
+    $name = $data["name"];
-    $secid  = $data['secid'];
+    $secid = $data["secid"];
-    unset($data['name'], $data['secid']);
+    unset($data["name"], $data["secid"]);
 
     $params = array_merge(
-        ['do' => 'edit', 'rev' => $INFO['lastmod'], 'summary' => '[' . $name . '] '],
+        [
-        $data
+            "do" => "edit",
+            "rev" => $INFO["lastmod"],
+            "summary" => "[" . $name . "] ",
+        ],
+        $data,
     );
 
-    $html  = '<div class="secedit editbutton_' . hsc($data['target']) . ' editbutton_' . (int)$secid . '">';
+    $html =
-    $html .= html_btn('secedit', $ID, '', $params, 'post', $name);
+        '<div class="secedit editbutton_' .
-    $html .= '</div>';
+        hsc($data["target"]) .
+        " editbutton_" .
+        (int) $secid .
+        '">';
+    $html .= html_btn("secedit", $ID, "", $params, "post", $name);
+    $html .= "</div>";
 
     $event->preventDefault();
     $event->result = $html;
 }
 
-$hasSidebar = page_findnearest($conf['sidebar']);
+$hasSidebar = page_findnearest($conf["sidebar"]);
-$showSidebar = $hasSidebar && ($ACT == 'show');
+$showSidebar = $hasSidebar && $ACT == "show";
 ?><!DOCTYPE html>
-<html lang="<?php echo $conf['lang'] ?>" dir="<?php echo $lang['direction'] ?>" class="no-js">
+<html lang="<?php echo $conf["lang"]; ?>" dir="<?php echo $lang[
+    "direction"
+]; ?>" class="no-js">
 <head>
     <meta charset="utf-8" />
-    <title><?php tpl_pagetitle() ?></title>
+    <title><?php tpl_pagetitle(); ?></title>
-    <?php tpl_metaheaders() ?>
+    <?php tpl_metaheaders(); ?>
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <?php echo tpl_favicon(['favicon', 'mobile']) ?>
+    <?php echo tpl_favicon(["favicon", "mobile"]); ?>
-    <?php tpl_includeFile('meta.html') ?>
+    <?php tpl_includeFile("meta.html"); ?>
 </head>
 
 <body>
-    <div id="dokuwiki__site"><div id="dokuwiki__top" class="site <?php echo tpl_classes(); ?> <?php
+    <div id="dokuwiki__site"><div id="dokuwiki__top" class="site crt <?php echo tpl_classes(); ?> <?php echo $showSidebar
-        echo ($showSidebar) ? 'showSidebar' : ''; ?> <?php echo ($hasSidebar) ? 'hasSidebar' : ''; ?>">
+     ? "showSidebar"
+     : ""; ?> <?php echo $hasSidebar ? "hasSidebar" : ""; ?>">
 
-        <?php include(__DIR__ . '/tpl_header.php') ?>
+        <?php include __DIR__ . "/tpl_header.php"; ?>
 
         <div class="wrapper group">
 
             <?php if ($showSidebar): ?>
                 <!-- ********** ASIDE ********** -->
-                <nav id="dokuwiki__aside" aria-label="<?php echo $lang['sidebar']
+                <nav id="dokuwiki__aside" aria-label="<?php echo $lang[
-                ?>"><div class="pad aside include group">
+                    "sidebar"
-                    <h3 class="toggle"><?php echo $lang['sidebar'] ?></h3>
+                ]; ?>"><div class="pad aside include group">
+                    <h3 class="toggle"><?php echo $lang["sidebar"]; ?></h3>
                     <div class="content"><div class="group">
-                        <?php tpl_flush() ?>
+                        <?php tpl_flush(); ?>
-                        <?php tpl_includeFile('sidebarheader.html') ?>
+                        <?php tpl_includeFile("sidebarheader.html"); ?>
-                        <?php tpl_include_page($conf['sidebar'], true, true) ?>
+                        <?php tpl_include_page($conf["sidebar"], true, true); ?>
-                        <?php tpl_includeFile('sidebarfooter.html') ?>
+                        <?php tpl_includeFile("sidebarfooter.html"); ?>
                     </div></div>
                 </div></nav><!-- /aside -->
             <?php endif; ?>
 
             <!-- ********** CONTENT ********** -->
             <main id="dokuwiki__content"><div class="pad group">
-                <?php html_msgarea() ?>
+                <?php html_msgarea(); ?>
 
                 <div class="page group">
-                    <?php tpl_flush() ?>
+                    <?php tpl_flush(); ?>
-                    <?php tpl_includeFile('pageheader.html') ?>
+                    <?php tpl_includeFile("pageheader.html"); ?>
                     <!-- wikipage start -->
-                    <?php tpl_content() ?>
+                    <?php tpl_content(); ?>
                     <!-- wikipage stop -->
-                    <?php tpl_includeFile('pagefooter.html') ?>
+                    <?php tpl_includeFile("pagefooter.html"); ?>
                 </div>
 
-                <div class="docInfo"><?php tpl_pageinfo() ?></div>
+                <div class="docInfo"><?php tpl_pageinfo(); ?></div>
 
-                <?php tpl_flush() ?>
+                <?php tpl_flush(); ?>
 
                 <hr class="a11y" />
             </div></main><!-- /content -->
@@ -101,13 +122,17 @@ $showSidebar = $hasSidebar && ($ACT == 'show');
         <!-- PAGE ACTIONS (Status Bar) -->
         <?php
         $menuClass = \dokuwiki\Menu\PageMenu::class;
-        include(__DIR__ . '/tpl_pagetools.php');
+        include __DIR__ . "/tpl_pagetools.php";
         ?>
 
-        <?php include(__DIR__ . '/tpl_footer.php') ?>
+        <?php include __DIR__ . "/tpl_footer.php"; ?>
     </div></div><!-- /site -->
 
-    <div class="no"><?php tpl_indexerWebBug() /* provide DokuWiki housekeeping, required in all templates */ ?></div>
+    <div class="no"><?php tpl_indexerWebBug();
-    <div id="screen__mode" class="no"></div><?php /* helper to detect CSS media query in script.js */ ?>
+/* provide DokuWiki housekeeping, required in all templates */
+?></div>
+    <div id="screen__mode" class="no"></div><?php
+/* helper to detect CSS media query in script.js */
+?>
 </body>
 </html>

style.ini

@@ -37,6 +37,7 @@ css/design.less           = screen
 css/usertools.less        = screen
 css/pagetools.less        = screen
 css/content.less          = screen
+css/crt.less              = screen
 
 css/mobile.less           = all
 css/print.css             = print
@@ -88,5 +89,3 @@ __tablet_width__    = "800px"           ; @ini_tablet_width
 __phone_width__     = "480px"           ; @ini_phone_width
 
 __theme_color__     = "#008800"         ; @_ini_theme_color: theme_color of the web app
-
-