Peyang Pterodactyl Theme - Awesome Pterodactyl theme made by UserStyle

0.README.md

Peyang Pterodactyl Theme

Awesome theme of Pterodactyl panel.

Screenshots

(Background image: https://pixabay.com/images/id-736885, Author: Bessi)

(Background image: https://search.find47.jp/ja/i/LeA39, Kyoto, Japan, CC-BY 4.0 Author: Suganu0405)

Features

• Background image
  Available variables:
  • background-image: URL of background image
  • background-size: Size of background image
  • background-pos-x, background-pos-y: Position of background image
  • background-opacity: Opacity of background image
• Transparent rect Available variables:
  • tw-bg-opacity: Opacity of rects (!important needed because this variable is made by Pterodactyl.)
  • header-bg-opacity: Opacity of rects
  • modal-bg-opacity: Opacity of modals
  • terminal-bg-color: Color of terminal background
  • terminal-input-bg-color: Color of terminal input textbox background
• Custom editor fonts
  • editor-font-family: Font family of editor
  • editor-font-size: Font size of editor

Tested-on

• Pterodactyl Panel 1.7.0

How to install

1. Install Stylus to your browser.

2. Jump to PeyangPterodactylTheme.user.css

3. Stylus will open automatically and press the button "Install".

4. Install will be started.

5. Press the button "Edit".

6. Jump to these line and edit it!

   • Line 9
     Replace <YOUR HOST HERE> to actual your Pterodactyl installation host.
   • Line 157 Replace <YOUR HOST HERE> to actual your Pterodactyl installation host.

---

Acknowledgments

Example background images

• https://pixabay.com/images/id-736885 - Silhouette of tree near body of water during beautiful sunset, Author: Bessi
• https://search.find47.jp/ja/i/LeA39 - 京都府 瑠璃光院(Kyoto-fu, Rurikoin(https://rurikoin.komyoji.com/lp/en/)), Author: Suganu0405, CC-BY 4.0

Built-in fonts

• https://www.jetbrains.com/lp/mono/ - JetBrains Mono

Built-in themes

• https://github.com/FarhadG/code-mirror-themes - Visual studio dark theme

1.PeyangPterodactylTheme.user.css

/* ==UserStyle==
@name           Peyang Pterodactyl Theme
@namespace      github.com/peyang-Celeron/
@version        1.0.0
@description    Improve Pterodactyl panel!
@author         Peyang
==/UserStyle== */

@-moz-document domain("<YOUR HOST HERE>") {
/* === Root === */
    * {
        --background-image: url("");
        --background-size: 2048px;
        --background-pos-x: center;
        --background-pos-y: center;
        --background-opacity: 0.5;

        --tw-bg-opacity: 0.75 !important;
        --header-bg-opacity: 0.9;
        --modal-bg-opacity: 0.8;

        --terminal-bg-color: rgba(0, 0, 0, 0.5);
        --terminal-input-bg-color: rgba(0, 0, 0, 0.7);
        --summary-and-control-bg-color: rgba(0, 0, 0, 0.5);

        --editor-font-family: "JetBrains Mono";
        --editor-font-size: 15px;
    }
    
    #app > div > div:nth-child(1),
    #app > div > div:nth-child(2) {
        --tw-bg-opacity: var(--header-bg-opacity) !important;
    }
    
    #modal-portal * {
        --tw-bg-opacity: var(--modal-bg-opacity) !important;
    }

    body {
        overflow-x: hidden;

        background-image: linear-gradient(
                rgba(0, 0, 0, var(--background-opacity)),
                rgba(0, 0, 0, var(--background-opacity))), 
            var(--background-image);
        background-attachment: fixed;
        
        background-size: var(--background-size);
        
        background-position-x: var(--background-pos-x);
        background-position-y: var(--background-pos-y);
        
    }
    
    #app {
        width: 100vw;
        height: -webkit-fill-available;
    }
    
    .xterm-viewport {
        opacity: 0.3;
        background-color: transparent !important;
    }
    
    
    ::-webkit-scrollbar {
        background: transparent !important;
    }
    
/* === Copy right === */
    section > div:nth-child(1) {
        margin-bottom: 20px;
    }
    
    section > div:nth-child(2) {
        margin-bottom: 10px;
    }
    
/* === Rect and terminal === */
    
    .gvsoy-0 {  /* Graph and (RUNNING STOPPED SHUTDOWNING) selector */
        background: transparent;
    }
    
    .gvsoy-4, .grusjm { /* Graph and (Start Reboot Stop) button selector */
        background-color: var(--summary-and-control-bg-color) !important;
    }
    
    .itaf37-4 { /* Terminal text box (has $ and input[aria-label="Console command input."]) selector */ 
        background-color: var(--terminal-input-bg-color);
    }
    
    
    .itaf37-3 { /* Parent of #terminal */
        background-color: var(--terminal-input-bg-color) !important;
    }
    
/* === Text editor === */    
    
    @font-face{
        font-family: 'JetBrains Mono';
        src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/otf/JetBrainsMono-Regular.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
    }
    
    .CodeMirror {
        background: rgba(0, 0, 0, 0.7) !important;
    }
    
    .CodeMirror-gutters {
        background: rgba(0, 0, 0, 0.4) !important;
    }
    
    .CodeMirror-linenumber {
        color: #8d8d8d !important;   
    }
    
    .CodeMirror-line {
        font-family: var(--editor-font-family) !important;
        font-size: var(--editor-font-size) !important;
    }
    
/* ==== Put your theme here! (!important needed) ==== */

/*
 * In this example, we are using Visual studio dark theme!
 * 
 * Thanks: https://github.com/FarhadG/code-mirror-themes
 *
 */
    
    .CodeMirror-activeline-background {
        background: #0F0F0F !important;
    }
    .CodeMirror-selected {
        background: #264F78 !important;
    }
    .cm-comment {
        color: #608B4E !important; 
        font-style: unset !important;
    }
    .cm-string {
        color: #D69D85 !important;
    }
    .cm-keyword, .cm-def, .cm-property {
        color: #569CD6 !important;
    }
    .cm-number {
        color: #B5CEA8 !important;
    }
    .cm-atom {
        color: #569CD6 !important;
    }
}

@-moz-document regexp("https?://<YOUR HOST HERE>/server/\\w+/(databases|schedules|backups|users)") {
/* === Databases, schedules, users === */
    
    section > div:nth-child(1) {
            background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border: solid 5px;
    border-radius: 10px;
    border-color: transparent;
    }
}

2.license.txt

        DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 
                    Version 2, December 2004 

 Copyright (C) 2022 Peyang

 Everyone is permitted to copy and distribute verbatim or modified 
 copies of this license document, and changing it is allowed as long 
 as the name is changed. 

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 

  0. You just DO WHAT THE FUCK YOU WANT TO.