Tiny File Manager | style.css

Back Back Up Advanced Editor

/**
* Theme Definitions
*/
:root {
    --body-bg: #3f3f3f;
    --bg: #1f1f1f;
    --fg: #d4d4d4;
    --directory: #83a06c;
    --prompt: #83a06c;
    --cursor: var(--fg);
    --listItem: var(--fg);
    --listTitle: var(--fg);
    --link: var(--fg);
    --tree: var(--fg);
    --fontSize: 13px;
    --fontFamily: "Source Code Pro Light", monospace;
}
/*
  '#000000', // black
  '#cd0000', // red3
  '#00cd00', // green3
  '#cdcd00', // yellow3
  '#0000ee', // blue2
  '#cd00cd', // magenta3
  '#00cdcd', // cyan3
  '#e5e5e5', // gray90
*/
terminal.dark {
    --body-bg: #f3f3f3;
    --bg: #fefefe;
    --fg: #1e1e1e;
    --dir: #526e39;
    --prompt: #526e39;
    --cursor: var(--fg);
    --listItem: var(--fg);
    --listTitle: var(--fg);
    --link: var(--fg);
    --tree: var(--fg);
    --selection: #999;
    --cursor: var(--prompt);
    --dir: #ffcb8b;
    --path: #D86C74;
    --host: #CD9A61;
    --user: #CD9A61;
    --success: #25cc3e;
    --warn: #ffbf2f;
    --error: #ff6159;
    --info: #00d2ff;
    --at: #ccc;
    --cmd: #f4bf75;
    --parameter: #6a9fb5;
    --file: #5ed7ff;
}

terminal.light {
    --body-bg: #f3f3f3;
    --bg: #fefefe;
    --fg: #1e1e1e;
    --dir: #526e39;
    --prompt: #526e39;
    --cursor: var(--fg);
    --listItem: var(--fg);
    --listTitle: var(--fg);
    --link: var(--fg);
    --tree: var(--fg);
    --selection: #999;
    --cursor: var(--prompt);
    --dir: #ffcb8b;
    --path: #D86C74;
    --host: #CD9A61;
    --user: #CD9A61;
    --success: #25cc3e;
    --warn: #ffbf2f;
    --error: #ff6159;
    --info: #00d2ff;
    --at: #ccc;
    --cmd: #f4bf75;
    --parameter: #6a9fb5;
    --file: #5ed7ff;
}

terminal.laserwave {
    --body-bg: #1c1720;
    --bg: #27212e;
    --fg: #ffffff;
    --dir: #40b4c4;
    --prompt: #eb64b9;
    --cursor: var(--prompt);
    --listItem: var(--fg);
    --listTitle: var(--fg);
    --link: var(--fg);
    --tree: var(--fg);
    --selection: #999;
    --cursor: var(--prompt);
    --dir: #ffcb8b;
    --path: #aa759f;
    --host: #61d6d6;
    --user: #90a959;
    --success: #25cc3e;
    --warn: #ffbf2f;
    --error: #ff6159;
    --info: #00d2ff;
    --at: #ccc;
    --cmd: #f4bf75;
    --parameter: #6a9fb5;
    --file: #5ed7ff;
}

terminal.nord {
    --body-bg: #2e3440;
    --bg: #2E3440;
    --fg: #E5E9F0;
    --dir: #EBCB8B;
    --prompt: #E5E9F0;
    --cursor: #88c0d0;
    --listItem: var(--fg);
    --listTitle: var(--fg);
    --link: var(--fg);
    --tree: var(--fg);
    --selection: #999;
    --cursor: var(--prompt);
    --dir: #ffcb8b;
    --path: #EBCB8B;
    --host: #D08770;
    --user: #BF616A;
    --success: #25cc3e;
    --warn: #ffbf2f;
    --error: #ff6159;
    --info: #88C0D0;
    --at: #A3BE8C;
    --cmd: #f4bf75;
    --parameter: #6a9fb5;
    --file: #5ed7ff;
}

terminal.dracula {
    --body-bg: #191a20;
    --bg: #282936;
    --fg: #E9E9F4;
    --dir: #8be9fd;
    --prompt: #e97fc0;
    --cursor: #6272a4;
    --listItem: var(--fg);
    --listTitle: var(--fg);
    --link: var(--fg);
    --tree: var(--fg);
    --selection: #999;
    --cursor: var(--prompt);
    --dir: #ffcb8b;
    --path: #62D6E8;
    --host: #00F769;
    --user: #EBFF87;
    --success: #25cc3e;
    --warn: #ffbf2f;
    --error: #ff6159;
    --info: #00d2ff;
    --at: #ccc;
    --cmd: #f4bf75;
    --parameter: #6a9fb5;
    --file: #5ed7ff;
}

terminal.greyscale {
    --body-bg: #2a2a2a;
    --bg: #1d1d1d;
    --fg: #fff;
    --dir: #888;
    --prompt: #7a7a7a;
    --cursor: var(--prompt);
    --listItem: var(--fg);
    --listTitle: var(--fg);
    --link: var(--fg);
    --tree: var(--fg);
    --selection: #999;
    --cursor: var(--prompt);
    --dir: #ffcb8b;
    --path: #aa759f;
    --host: #61d6d6;
    --user: #90a959;
    --success: #25cc3e;
    --warn: #ffbf2f;
    --error: #ff6159;
    --info: #00d2ff;
    --at: #ccc;
    --cmd: #f4bf75;
    --parameter: #6a9fb5;
    --file: #5ed7ff;
}

terminal.nightowl {
    --body-bg: #00101d;
    --bg: #011627;
    --fg: #d6deeb;
    --listItem: var(--fg);
    --listTitle: var(--fg);
    --link: var(--fg);
    --tree: var(--fg);
    --prompt: #c792ea;
    --selection: #999;
    --cursor: var(--prompt);
    --dir: #ffcb8b;
    --path: #aa759f;
    --host: #61d6d6;
    --user: #90a959;
    --success: #25cc3e;
    --warn: #ffbf2f;
    --error: #ff6159;
    --info: #00d2ff;
    --at: #ccc;
    --cmd: #f4bf75;
    --parameter: #6a9fb5;
    --file: #5ed7ff;
}

terminal.onedark {
    --body-bg: #00101d;
    --bg: #282C34;
    --fg: #ABB2BF;
    --listItem: var(--fg);
    --listTitle: var(--fg);
    --link: var(--fg);
    --tree: var(--fg);
    --prompt: #528BFF;
    --selection: #ABB2BF;
    --cursor: var(--prompt);
    --dir: #D86C74;
    --path: var(--prompt);
    --host: #CD9A61;
    --user: #D86C74;
    --success: #98C379;
    --warn: #D19A66;
    --error: red;
    --info: #667689;
    --at: #ABB2BF;
    --cmd: #D86C74;
    --parameter: #ABB2BF;
    --file: #D86C74;
}

/**
* Terminal Default Styling
*/
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--body-bg);
    color: var(--fg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--fontFamily);
    font-size: var(--fontSize);
}

terminal {
    background-color: var(--bg);
    box-sizing: border-box;
    width: 700px;
    height: 450px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 1.5em;
    padding-right: 0.25em;
    margin: 0;
    line-height: 1.15;
    font-size: var(--fontSize);
}

::-webkit-scrollbar {
    width: 22px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background-color: var(--fg) ;
  border-radius: 10px;
  border: 8px solid var(--bg);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(100,100,100,0.4); 
}

terminal .container {
    box-sizing: border-box;
    width: 100%;
    height: 415px;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: thin;
    cursor: default;
    scrollbar-color: var(--fg) var(--bg);
}

terminal .container a {
    color: var(--path);
    text-decoration-line: underline;
    text-decoration-thickness: from-font;
    text-decoration-style: dotted;
}

terminal .container a:hover {
    color: var(--path);
    text-decoration: none;
}

/**
 * Prompt Styling
 */
.prompt {
    display: flex;
}

terminal ::selection {
    background: var(--selection);
    text-shadow: none !important;
}

terminal .container .cursor {
    color: var(--cursor);
}

terminal .container .path {
    color: var(--path);
}

terminal .container .host {
    color: var(--host);
}

terminal .container .user {
    color: var(--user);
}

terminal .container .success {
    color: var(--success);
}

terminal .container .warn {
    color: var(--warn);
}

terminal .container .error {
    color: var(--error);
}

terminal .container .info {
    color: var(--info);
}

terminal .container .at {
    color: var(--at);
}

terminal .container .cmd {
    color: var(--cmd);
}

terminal .container .parameter {
    color: var(--parameter);
}

terminal .container .dir {
    color: var(--dir);
}

terminal .container .file {
    color: var(--file);
}

terminal .container.blink::after {
    content: "|";
    animation: blink 1.25s steps(1) infinite;
}

@keyframes blink {
  50% {
    color: transparent;
  }
}

#scsaver main {
  display: flex;
}

#scsaver p {
  line-height: 1;
}

#scsaver span {
  display: block;
  width: 2vmax; 
  height: 2vmax; 
  font-size: 2vmax; 
  color: #9bff9b11;
  text-align: center;
  font-family: monospace;
}