Wikidot Plugins

ASCII TREE

X

It is a plugin that allows you to list linearly.

• Plugins
  • ASCII TREE
  • FILE SYSTEM
    • How to use?
      • My file
    • Commands
    • LICENCE
  • C

---

News

• ASCII TREE (34)

  ---

  ASCII TREE (34) - 15/11/2020

  • Added a text decoration for h1, h2, h3, h4, h5, h6, h6 and h7 elements.
  • Removed the margin that h1, h2, h3, h4, h5, h6, h6 and h7 elements have.

README

Don't forget, this [[include]] command just upload this plugin for use.
If you want to use it every page on your wiki: then add this [[include]] command to your (nav-top) navigation bar.

After set your plugin, you can use it like the example command at the bottom of this window. Enjoy!

[[include :maximum-tension:wd-plugin:001 
color=|
fs=|
more=
]]

[[ul class="mt-ascii"]]

Example
* A
* B
‎ ‎* B1
‎ ‎* B2
‎ ‎ ‎* B2-1
* C

[[/ul]]

Commands

"color": Set the text of color on your tree.

"fs": Set the size of text on your tree.

"more": More CSS customization for your tree.

Full CSS code

If you want to do full customization, here the code:

.mt-ascii {
font-family: monospace;
font-size: {$fs};
color: {$color};
line-height: 1.1;
-webkit-text-size-adjust: none;
{$more}
}
.mt-ascii h1, .mt-ascii h2, .mt-ascii h3, .mt-ascii h4, .mt-ascii h5, .mt-ascii h6, .mt-ascii h7 {
margin: 0;
text-decoration: underline !important;
}
ul.mt-ascii, ul.mt-ascii ul {
margin-left: 0;
padding-left: 0;
list-style: none;
}
ul.mt-ascii li {
margin: 0;
padding: 0;
}
ul.mt-ascii > li::before {
content: "";
}
ul.mt-ascii > li > ul > li::before {
content: "├──\00a0";
}
ul.mt-ascii > li > ul > li:last-child::before {
content: "└──\00a0";
}
ul.mt-ascii > li > ul > li > ul > li::before {
content: "│\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li > ul > li:last-child::before {
content: "│\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li:last-child > ul > li::before {
content: "\00a0\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li:last-child > ul > li:last-child::before {
content: "\00a0\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li > ul > li > ul > li::before {
content: "│\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li > ul > li > ul > li:last-child::before {
content: "│\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li > ul > li:last-child > ul > li::before {
content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li > ul > li:last-child > ul > li:last-child::before {
content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li:last-child > ul > li > ul > li::before {
content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li:last-child > ul > li > ul > li:last-child::before {
content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li:last-child > ul > li:last-child > ul > li::before {
content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li:last-child > ul > li:last-child > ul > li:last-child::before {
content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li > ul > li > ul > li > ul > li::before {
content: "│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li > ul > li > ul > li > ul > li:last-child::before {
content: "│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li > ul > li > ul > li:last-child > ul > li::before {
content: "│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li > ul > li > ul > li:last-child > ul > li:last-child::before {
content: "│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li > ul > li:last-child > ul > li > ul > li::before {
content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li > ul > li:last-child > ul > li > ul > li:last-child::before {
content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li > ul > li:last-child > ul > li:last-child > ul > li::before {
content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li > ul > li:last-child > ul > li:last-child > ul > li:last-child::before {
content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li:last-child > ul > li > ul > li > ul > li::before {
content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li:last-child > ul > li > ul > li > ul > li:last-child::before {
content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li:last-child > ul > li > ul > li:last-child > ul > li::before {
content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li:last-child > ul > li > ul > li:last-child > ul > li:last-child::before {
content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li:last-child > ul > li:last-child > ul > li > ul > li::before {
content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li:last-child > ul > li:last-child > ul > li > ul > li:last-child::before {
content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li::before {
content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child::before {
content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li > ul > li > ul > li > ul > li > ul > li::before {
content: "│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li > ul > li > ul > li > ul > li > ul > li:last-child::before {
content: "│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li > ul > li > ul > li > ul > li:last-child > ul > li::before {
content: "│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li > ul > li > ul > li > ul > li:last-child > ul > li:last-child::before {
content: "│\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li > ul > li > ul > li:last-child > ul > li > ul > li::before {
content: "│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li > ul > li > ul > li:last-child > ul > li > ul > li:last-child::before {
content: "│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li > ul > li > ul > li:last-child > ul > li:last-child > ul > li::before {
content: "│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li > ul > li > ul > li:last-child > ul > li:last-child > ul > li:last-child::before {
content: "│\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li > ul > li:last-child > ul > li > ul > li > ul > li::before {
content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li > ul > li:last-child > ul > li > ul > li > ul > li:last-child::before {
content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li > ul > li:last-child > ul > li > ul > li:last-child > ul > li::before {
content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"
}
ul.mt-ascii > li > ul > li > ul > li:last-child > ul > li > ul > li:last-child > ul > li:last-child::before {
content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0";
}
ul.mt-ascii > li > ul > li > ul > li:last-child > ul > li:last-child > ul > li > ul > li::before {
content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"
}

LICENCE

You can do and change whatever you want inside of the code.

Just don't tell anyone to you did this yourself. Thanks*

By: Teoman Deniz

FILE SYSTEM

X

Test mt-file

You looks like oppened this file.
Nice!

---

News

• FILE SYSTEM (54)

  ---

  FILE SYSTEM (54) - 07/01/2021

  • README folder updated
  • Some important bugs fixed.

  FILE SYSTEM (53) - 14/12/2020

  • Mobile optimization update.

  FILE SYSTEM (52) - 18/11/2020

  • New animations added.

  FILE SYSTEM (51) - 14/11/2020

  • Animations added.
    • Hover filter updated.
    • Some opening animation added.
  • Some calculation bugs are fixed.
  • Display changed.

README

Don't forget, this [[include]] command just upload this plugin for use.
If you want to use it every page on your wiki: then add this [[include]] command to your (nav-top) navigation bar.

[[include :maximum-tension:wd-plugin:002
color=|
bg=|
padding=|
window-shadow=|
window-border=|
 
file-color=|
file-bg=|
file-name-color=|
file-name-hover-color=|
file-name-bg=|
file-name-hover-bg=|
 
X-button-color=|
X-button-bg=|
 
collapsible-block-more=|
window-more=|
X-button-more=
]]

After set your plugin, you can use it like the example command at the bottom of this window. Enjoy!

And put your collapsible command inside of the div element.

[[div class="mt-file"]]
[[collapsible show="My file" hide="X"]]

…

[[/collapsible]]
[[/div]]

Commands

"color": Set the text color of your window.

"bg": Set background of your window.

"window-shadow": Set the shadow of your window.

"window-border": Set the border line of your window.

"padding": Set the padding of your window.

"file-color": File's line colors.

"file-bg": File's main color.

"file-name-color": Set the file's name text color.
_{(file-name-hover-color): for set the hover color}

"file-name-bg": Set the file's name background.
_{(file-name-hover-bg): for set the hover bg}

"X-button-color": Close button text color.
_{[NON: The main text color]}

"X-button-bg": Close button background.
_{[NON: Color red]}

"collapsible-block-more": More CSS customization of (.collapsible-block).

"window-more": More css customization for window.

"X-button-more": More CSS customization for close button.

Source Code

If you want to do full customization, here the code:

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
div.mt-file .collapsible-block a.mt-file {
float: none;
}
div.mt-file .collapsible-block, div.mt-file a.mt-file {
float: left;
margin-right: 1ch;
margin-bottom: 2ch;
{$collapsible-block-more}
}
div.mt-file .collapsible-block-unfolded {
color: {$color} !important;
background-color: {$bg} !important;
padding: {$padding};
border: {$window-border};
position: fixed;
top: 50%;
left: 50%;
z-index: 100;
-webkit-transform: translateX(-50%) translateY(-50%) !important;
transform: translateX(-50%) translateY(-50%) !important;
margin: auto;
margin-bottom: 2ch;
width: calc(100% + -15ch);
height: calc(100% + -15ch);
box-shadow: {$window-shadow};
min-height: 55ch;
overflow: hidden;
animation-name: MT_ani_001;
animation-duration: .3s;
animation-fill-mode: both;
{$window-more}
}
div.mt-file .collapsible-block-folded, div.mt-file .collapsible-block-unfolded-link {
text-align: center;
}
div.mt-file .collapsible-block-folded a, a.mt-file {
letter-spacing: 0px !important;
text-decoration: none !important;
font-size: 15px !important;
word-spacing: 2.4px !important;
font-family: 'VT323', monospace !important;
clip-path: polygon(-2200em 0, 0 120px, 2200em 116px, 81px 35px, 70.5px 35px, 70.5px 23px, 61.5px 23px, 61.5px 13px, 52.5px 13px, 52.5px 8px, 54px 8px, 44px 8px, 44px 0px);
color: {$file-name-color};
background: {$file-name-bg};
transition: all 0.1s linear;
line-height: 16px !important;
}
div.collapsible-block-folded a:hover:before, a.mt-file:hover:before {
letter-spacing: 0px !important;
text-decoration: none !important;
font-size: 16px !important;
color: {$file-name-hover-color};
background-color: {$file-name-hover-bg};
}
div.mt-file .collapsible-block-folded a::before, a.mt-file::before {
content: '█▀▀▀▀▄ ‎ \a█┌─┬┐ ▀▄\a█├─┴┴─┐█\a█│ ‎ ‎ ‎ ‎│█\a█└────┘█\a█▄▄▄▄▄▄█\a';
color: {$file-color};
white-space: pre;
line-height: 15.9px;
background-color: {$file-bg};
font-size: 16px !important;
transition: all 0.1s linear;
}
div.mt-file .collapsible-block-unfolded-link a {
color: {$color};
background: red;
color: {$X-button-color} !important;
background: {$X-button-bg} !important;
padding: 0 1ch;
position: absolute;
top: 0ch;
right: 0ch;
{$X-button-more}
}
div.mt-file .collapsible-block-content {
overflow: auto;
word-break: break-all;
width: 100%;
height: 100%;
}
div.mt-file {
display: block;
margin: 3ch auto;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 767px) {
div.mt-file .collapsible-block-unfolded {
width: calc(100% + -10ch);
}
div.mt-file .collapsible-block-folded a, a.mt-file {
font-size: 13px !important;
line-height: 15.9px !important;
clip-path: none !important;
text-decoration: none !important;
word-spacing: 5px !important;
vertical-align: middle !important;
}
div.mt-file .collapsible-block-folded a::before, a.mt-file::before {
white-space: pre;
line-height: 15.9px;
}
}
@keyframes MT_ani_001 {
0% {
opacity: 0;
-webkit-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
-webkit-transform: translateX(-50%) translateY(-50%) scale3d(0,0,0);
transform: translateX(-50%) translateY(-50%) scale3d(0,0,0);
}
30% {
opacity: 1;
-webkit-animation-timing-function: cubic-bezier(0.455,0.03,0.515,0.955);
animation-timing-function: cubic-bezier(0.455,0.03,0.515,0.955);
-webkit-transform: translateX(-50%) translateY(-50%) scale3d(0.4,0.4,1);
transform: translateX(-50%) translateY(-50%) scale3d(0.4,0.4,1);
}
60% {
-webkit-animation-timing-function: cubic-bezier(0.455,0.03,0.515,0.955);
animation-timing-function: cubic-bezier(0.455,0.03,0.515,0.955);
-webkit-transform: translateX(-50%) translateY(-50%) scale3d(0.4,1,1);
transform: translateX(-50%) translateY(-50%) scale3d(0.4,1,1);
}
99% {
transform: translateX(-50%) translateY(-50%) scale3d(1,1,1);
}
100% {
-webkit-animation-timing-function: cubic-bezier(0.55,0.085,0.68,0.53);
animation-timing-function: cubic-bezier(0.55,0.085,0.68,0.53);
-webkit-transform: translateX(-50%) translateY(-50%) scale3d(1,1,1);
transform: translateX(-50%) translateY(-50%);
}
}

LICENCE

You can do and change whatever you want inside of the code.

Just don't tell anyone to you did this yourself. Thanks*

By: Teoman Deniz

EXTRA COLLAPSIBLE

X

This plugin for make a collapsible inside of collapsible.

README

[[include :maximum-tension:wd-plugin:003 
id=|
open-text=|
close-text=
]]
 
[[collapsible show="Test" hide="Close"]]
 
. . .
 
[[/collapsible]]
 
[[/div]]

[[include :maximum-tension:wd-plugin:003
id=my-extra-collapsible|
open-text=Click here for open!|
close-text=Close here for close!
]]

[[collapsible show="This is another collapsible!" hide="Close"]]

Write in there what you want!

[[/collapsible]]

[[/div]]

Commands

"id": ID of your collapside.

"open-text": Open message of collapsible.

"close-text": Close message of collapsible.

Full code

If you want to do full customization, here the code:

#u-{$id}-collapsible {
text-align: left;
display: none;
}
#u-{$id}-collapsible:target {
display: block;
}
#u-{$id}-open-button-collapsible {
text-align: left;
display: block;
}
#u-{$id}-close-button-collapsible {
text-align: left;
display: none;
}
#u-{$id}-collapsible:target #u-{$id}-open-button-collapsible {
display: none;
}
#u-{$id}-collapsible:target #u-{$id}-close-button-collapsible {
display: block;
}
[[=]]
[[a href="#u-{$id}-collapsible" id="{$id}-open-button-collapsible"]] {$open-text} [[/a]]
[[/=]]
[[div id="{$id}-collapsible"]]
[[a href="#" id="{$id}-close-button-collapsible"]] {$close-text} [[/a]]

LICENCE

You can do and change whatever you want inside of the code.

Just don't tell anyone to you did this yourself. Thanks*

By: Teoman Deniz

DIGITAL TEXT ANIMATION

X

This plugin, for add animated texts.

Have Fun!

---

README

Don't forget, this [[include]] command just upload this plugin for use.
If you want to use it every page on your wiki: then add this [[include]] command to your (nav-top) navigation bar.

[[include :maximum-tension:wd-plugin:004 
color=
]]

After set your plugin, you can use it like the example command at the bottom of this window. Enjoy!

[[div class="MT-ani-text"]]
[[span class="c1"]] TEXT [[/span]]

[[span class="c2"]] TEXT [[/span]]

[[span class="c3"]] TEXT [[/span]]
[[/div]]

This is [[span class="c1"]]

This is [[span class="c2"]]

This is [[span class="c3"]]

Warning: Please don't forgot [[div class="MT-ani-text"]]

Thx!

Commands

"color": For set your text color.

Full code

If you want to do full customization, here the code:

---

wd-plugin:004 (Download)

LICENCE

You can do and change whatever you want inside of the code.

Just don't tell anyone to you did this yourself. Thanks*

By: Teoman Deniz

SPIN ANIMATION

X

---

News

• FLIP ANIMATION (02)

  ---

  FLIP ANIMATION (02) - 24/12/2020

  • Added the plugin.

README

[[include :maximum-tension:wd-plugin:005]]
 
SOMETHING
 
[[/div]]

[[=]]
[[include :maximum-tension:wd-plugin:005]]
[[image http://maximum-tension.wdfiles.com/local--files/home/MT.png]]
[[/div]]
[[/=]]

LICENCE

You can use where you want it.

You can't copy the source code or change it and don't tell anyone to you did this yourself. Thanks*

By: Teoman Deniz

MP3 PLAYER

X

The L12.mp3

---

News

• MP3 PLAYER (6)

  ---

  MP3 PLAYER (6) - 28/02/2021

  • Now opening with animation - Sera Erma

  MP3 PLAYER (5) - 07/01/2021

  • Module published

README

First: you need to create a module page for this plugin. Like: /mp3-module-page

In there: you can setup your module like this:

[[include :maximum-tension:wd-plugin:006
color=|
bg=|
captipn_bg=|
stick_color=|
pin_color=|
border=|
 
cursor_default=|
cursor_pointer=|
 
mp3={$mp3}|
caption={$caption}|
width={$width}|
align={$align}
]]

(Note that: do not touch the last 4 variables but you can chagne your variable names if you want so)

After set your module, you can use it like the example command at the bottom of this window. Enjoy!

[[include :your-wiki:mp3-module-page
mp3=my_example_sound_file.mp3|
caption=My music!
]]

Commands

"color": Set the text color of module.

---

"bg": Set the sound box's background color.

---

"caption_bg": Set the caption's background color.

---

"stick_color": Set the stick color of the sound box.

---

"pin_color": Set the pin color of the sound box.

---

"border": Set the border of your module. (if you want)

---

"cursor_default": Set the default cursor image. (if you want)

---

"cursor_pointer": Set the pointing cursor image. (if you want)

---

"mp3={$mp3}": The url of your mp3 file. (Only request MP3 files)

---

"caption={$caption}": Set the title of your sound / music.

---

"width={$width}": Set your width of module.

---

"align={$align}": Set the align of the module. (center - left - right)

LICENCE

It is completely illegal to get the source code for this module.

It is perfectly legal to use this module anywhere.

Please don't tell anyone to you did this yourself. Thanks*

By: Teoman Deniz

FILE ORGANIZATION

X

File name	File type	Size
test	ASCII text	3 Bytes	Info
test.bat	ASCII text	3 Bytes	Info
test.css	No description	3 Bytes	Info
test.dll	ASCII text	5 Bytes	Info
test.exe	ASCII text	3 Bytes	Info
test.gif	ASCII text	3 Bytes	Info
test.html	ASCII text	3 Bytes	Info
test.js	No description	5 Bytes	Info
test.mp3	ASCII text	3 Bytes	Info
test.mp4	ASCII text	3 Bytes	Info
test.php	ASCII text	3 Bytes	Info
test.png	ASCII text	3 Bytes	Info
test.txt	ASCII text	3 Bytes	Info
test.zip	ASCII text	3 Bytes	Info

Manage attachments

---

News

• FILE SYSTEM (20210401)

  ---

  FILE SYSTEM (20210401) - 01/04/2021

  • We finally published our module.

README

You can use it where you want. Use this command at the page, and you can now have a good file system.

[[include :maximum-tension:wd-plugin:007]]

Source Code

If you want to do full customization, here the code:

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
table.page-files, table.page-files > * {
-ms-interpolation-mode: nearest-neighbor;
image-rendering: crisp-edges;
image-rendering: pixelated;
font-family: 'VT323', monospace !important;
font-size: 16px;
text-decoration: none !important;
word-spacing: 2.4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
table.page-files {
color: white !important;
background-color: #1a1d1e !important;
padding: 3ch;
position: relative;
display: block;
margin: auto;
width: fit-content;
box-shadow: inset 0 0 0 1ch #1a1d1e, inset 0 0 0 1.5ch #555, 10px 10px 0 #000;
}
table.page-files:before {
content: "FILES";
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-3ch);
transform: translateX(-50%) translateY(-3ch);
background-color: #555;
color: #FFF;
padding: 0 0.75rem;
}
table.page-files th {
background-color: #0e0e0e;
}
table.page-files a {
}
table.page-files a:hover {
color: white !important;
background-color: black !important;
}
table.page-files td {
padding: 0px 5px;
}
table.page-files tr td:nth-child(1) a {
background-image: url(http://maximum-tension.wdfiles.com/local--files/wd-plugin:007/file.png);
background-repeat: no-repeat;
padding-left: 3ch;
}
table.page-files tr td:nth-child(1) a[href$=".php"] {
background-image: url(http://maximum-tension.wdfiles.com/local--files/wd-plugin:007/php.png);
}
table.page-files tr td:nth-child(1) a[href$=".txt"] {
background-image: url(http://maximum-tension.wdfiles.com/local--files/wd-plugin:007/txt.png);
}
table.page-files tr td:nth-child(1) a[href$=".bat"], table.page-files tr td:nth-child(1) a[href$=".cmd"] {
background-image: url(http://maximum-tension.wdfiles.com/local--files/wd-plugin:007/bat.png);
}
table.page-files tr td:nth-child(1) a[href$=".png"], table.page-files tr td:nth-child(1) a[href$=".jpg"], table.page-files tr td:nth-child(1) a[href$=".jpeg"], table.page-files tr td:nth-child(1) a[href$=".bmp"] {
background-image: url(http://maximum-tension.wdfiles.com/local--files/wd-plugin:007/png.png);
}
table.page-files tr td:nth-child(1) a[href$=".html"],table.page-files tr td:nth-child(1) a[href$=".hta"], table.page-files tr td:nth-child(1) a[href$=".htm"] {
background-image: url(http://maximum-tension.wdfiles.com/local--files/wd-plugin:007/html.png);
}
table.page-files tr td:nth-child(1) a[href$=".css"] {
background-image: url(http://maximum-tension.wdfiles.com/local--files/wd-plugin:007/css.png);
}
table.page-files tr td:nth-child(1) a[href$=".zip"], table.page-files tr td:nth-child(1) a[href$=".7z"], table.page-files tr td:nth-child(1) a[href$=".rar"] {
background-image: url(http://maximum-tension.wdfiles.com/local--files/wd-plugin:007/zip.png);
}
table.page-files tr td:nth-child(1) a[href$=".exe"] {
background-image: url(http://maximum-tension.wdfiles.com/local--files/wd-plugin:007/exe.png);
}
table.page-files tr td:nth-child(1) a[href$=".mp3"], table.page-files tr td:nth-child(1) a[href$=".wav"] {
background-image: url(http://maximum-tension.wdfiles.com/local--files/wd-plugin:007/mp3.png);
}
table.page-files tr td:nth-child(1) a[href$=".mp4"] {
background-image: url(http://maximum-tension.wdfiles.com/local--files/wd-plugin:007/mp4.png);
}
table.page-files tr td:nth-child(1) a[href$=".gif"] {
background-image: url(http://maximum-tension.wdfiles.com/local--files/wd-plugin:007/gif.png);
}
table.page-files tr td:nth-child(1) a[href$=".js"], table.page-files tr td:nth-child(1) a[href$=".json"], table.page-files tr td:nth-child(1) a[href$=".xml"], table.page-files tr td:nth-child(1) a[href$=".vbs"] {
background-image: url(http://maximum-tension.wdfiles.com/local--files/wd-plugin:007/js.png);
}
table.page-files tr td:nth-child(1) a[href$=".dll"], table.page-files tr td:nth-child(1) a[href$=".dat"], table.page-files tr td:nth-child(1) a[href$=".sys"] {
background-image: url(http://maximum-tension.wdfiles.com/local--files/wd-plugin:007/dll.png);
}

LICENCE

You can do and change whatever you want inside of the code.

Just don't tell anyone to you did this yourself. Thanks*

By: Teoman Deniz