Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Convert color schema, begin migrating old classes (finishes grey & red)

Browse source
This commit is contained in:
Dane Everitt 2019-02-09 14:32:18 -08:00
parent 6c7a5d5bb9
commit 32b43cff9a
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
35 changed files with 186 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/assets/index.html
View file

@ -10,7 +10,7 @@
<div id="pterodactyl"> <div id="pterodactyl">
<router-view></router-view> <router-view></router-view>
<div class="w-full m-auto mt-0 container"> <div class="w-full m-auto mt-0 container">
<p class="text-right text-grey-dark text-xs"> <p class="text-right text-neutral-600 text-xs">
</p> </p>
</div> </div>
</div> </div>

4
resources/assets/scripts/components/auth/ForgotPassword.ts
View file

@ -69,7 +69,7 @@ export default Vue.component('forgot-password', {
v-on:input="updateEmail($event)" v-on:input="updateEmail($event)"
/> />
<label for="grid-email" id="grid-email-label">{{ $t('strings.email') }}</label> <label for="grid-email" id="grid-email-label">{{ $t('strings.email') }}</label>
<p class="text-grey-darker text-xs">{{ $t('auth.forgot_password.label_help') }}</p> <p class="text-neutral-800 text-xs">{{ $t('auth.forgot_password.label_help') }}</p>
</div> </div>
</div> </div>
<div> <div>
@ -81,7 +81,7 @@ export default Vue.component('forgot-password', {
</button> </button>
</div> </div>
<div class="pt-6 text-center"> <div class="pt-6 text-center">
<router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark" <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600"
aria-label="Go to login" aria-label="Go to login"
:to="{ name: 'login' }" :to="{ name: 'login' }"
> >

2
resources/assets/scripts/components/auth/LoginForm.ts
View file

@ -102,7 +102,7 @@ export default Vue.component('login-form', {
</button> </button>
</div> </div>
<div class="pt-6 text-center"> <div class="pt-6 text-center">
<router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark" aria-label="Forgot password" <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600" aria-label="Forgot password"
:to="{ name: 'forgot-password' }"> :to="{ name: 'forgot-password' }">
{{ $t('auth.forgot_password.label') }} {{ $t('auth.forgot_password.label') }}
</router-link> </router-link>

4
resources/assets/scripts/components/auth/ResetPassword.ts
View file

@ -88,7 +88,7 @@ export default Vue.component('reset-password', {
v-model="password" v-model="password"
/> />
<label for="grid-password">{{ $t('strings.password') }}</label> <label for="grid-password">{{ $t('strings.password') }}</label>
<p class="text-grey-darker text-xs">{{ $t('auth.password_requirements') }}</p> <p class="text-neutral-800 text-xs">{{ $t('auth.password_requirements') }}</p>
</div> </div>
</div> </div>
<div class="flex flex-wrap -mx-3 mb-6"> <div class="flex flex-wrap -mx-3 mb-6">
@ -110,7 +110,7 @@ export default Vue.component('reset-password', {
</button> </button>
</div> </div>
<div class="pt-6 text-center"> <div class="pt-6 text-center">
<router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark" <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600"
:to="{ name: 'login' }" :to="{ name: 'login' }"
> >
{{ $t('auth.go_to_login') }} {{ $t('auth.go_to_login') }}

4
resources/assets/scripts/components/auth/TwoFactorForm.ts
View file

@ -60,7 +60,7 @@ export default Vue.component('two-factor-form', {
v-model="code" v-model="code"
/> />
<label for="grid-code">{{ $t('auth.two_factor.label') }}</label> <label for="grid-code">{{ $t('auth.two_factor.label') }}</label>
<p class="text-grey-darker text-xs">{{ $t('auth.two_factor.label_help') }}</p> <p class="text-neutral-800 text-xs">{{ $t('auth.two_factor.label_help') }}</p>
</div> </div>
</div> </div>
<div> <div>
@ -69,7 +69,7 @@ export default Vue.component('two-factor-form', {
</button> </button>
</div> </div>
<div class="pt-6 text-center"> <div class="pt-6 text-center">
<router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark" <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600"
:to="{ name: 'login' }" :to="{ name: 'login' }"
> >
Back to Login Back to Login

2
resources/assets/scripts/components/core/Modal.ts
View file

@ -34,7 +34,7 @@ export default Vue.component('modal', {
<div class="modal-container" @click.stop> <div class="modal-container" @click.stop>
<div v-on:click="close"> <div v-on:click="close">
<icon name="x" <icon name="x"
class="absolute pin-r pin-t m-2 text-grey cursor-pointer" class="absolute pin-r pin-t m-2 textneutral-500scursor-pointer"
aria-label="Close modal" aria-label="Close modal"
role="button" role="button"
/> />

6
resources/assets/scripts/components/core/Navigation.ts
View file

@ -101,7 +101,7 @@ export default Vue.component('navigation', {
<a href="#"> <a href="#">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex-1"> <div class="flex-1">
<span class="text-sm text-grey-darker">Loading...</span> <span class="text-sm text-neutral-800">Loading...</span>
</div> </div>
<div class="flex-none"> <div class="flex-none">
<span class="spinner spinner-relative"></span> <span class="spinner spinner-relative"></span>
@ -113,8 +113,8 @@ export default Vue.component('navigation', {
<router-link :to="{ name: 'server', params: { id: server.identifier }}" v-on:click.native="searchActive = false"> <router-link :to="{ name: 'server', params: { id: server.identifier }}" v-on:click.native="searchActive = false">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex-1"> <div class="flex-1">
<span class="font-bold text-grey-darkest">{{ server.name }}</span><br /> <span class="font-bold text-neutral-900">{{ server.name }}</span><br />
<span class="font-light text-grey-dark text-sm" v-if="server.description.length > 0">{{ server.description }}</span> <span class="font-light text-neutral-600 text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
</div> </div>
<div class="flex-none"> <div class="flex-none">
<span class="pillbox bg-indigo">{{ server.node }}</span> <span class="pillbox bg-indigo">{{ server.node }}</span>

4
resources/assets/scripts/components/dashboard/ServerBox.ts
View file

@ -171,12 +171,12 @@ export default Vue.component('server-box', {
{{ server.name }} {{ server.name }}
</h2> </h2>
</router-link> </router-link>
<div class="text-grey-darker font-normal text-sm"> <div class="text-neutral-800 font-normal text-sm">
<p v-if="server.description.length" class="pb-1">{{ server.description }}</p> <p v-if="server.description.length" class="pb-1">{{ server.description }}</p>
<div class="absolute pin-b pin-l p-4 w-full"> <div class="absolute pin-b pin-l p-4 w-full">
<span class="font-semibold text-indigo">{{ server.node }}</span> <span class="font-semibold text-indigo">{{ server.node }}</span>
<span class="float-right text-grey-dark font-light">{{ server.allocation.ip }}:{{ server.allocation.port }}</span> <span class="float-right text-neutral-600 font-light">{{ server.allocation.ip }}:{{ server.allocation.port }}</span>
</div> </div>
</div> </div>
</div> </div>

2
resources/assets/scripts/components/dashboard/account/ChangePassword.ts
View file

@ -53,7 +53,7 @@ export default Vue.component('change-password', {
<div id="change-password-container" :class> <div id="change-password-container" :class>
<form method="post" v-on:submit.prevent="submitForm"> <form method="post" v-on:submit.prevent="submitForm">
<div class="content-box"> <div class="content-box">
<h2 class="mb-6 text-grey-darkest font-medium">{{ $t('dashboard.account.password.title') }}</h2> <h2 class="mb-6 text-neutral-900 font-medium">{{ $t('dashboard.account.password.title') }}</h2>
<div class="mt-6"> <div class="mt-6">
<label for="grid-password-current" class="input-label">{{ $t('strings.password') }}</label> <label for="grid-password-current" class="input-label">{{ $t('strings.password') }}</label>
<input id="grid-password-current" name="current_password" type="password" class="input" required <input id="grid-password-current" name="current_password" type="password" class="input" required

6
resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.ts
View file

@ -128,7 +128,7 @@ export default Vue.component('two-factor-authentication', {
<span class="spinner spinner-xl text-blue"></span> <span class="spinner spinner-xl text-blue"></span>
</div> </div>
<div id="container-disable-two-factor" v-if="response.enabled" v-show="!spinner"> <div id="container-disable-two-factor" v-if="response.enabled" v-show="!spinner">
<h2 class="font-medium text-grey-darkest">{{ $t('dashboard.account.two_factor.disable.title') }}</h2> <h2 class="font-medium text-neutral-900">{{ $t('dashboard.account.two_factor.disable.title') }}</h2>
<div class="mt-6"> <div class="mt-6">
<label class="input-label" for="grid-two-factor-token-disable">{{ $t('dashboard.account.two_factor.disable.field') }}</label> <label class="input-label" for="grid-two-factor-token-disable">{{ $t('dashboard.account.two_factor.disable.field') }}</label>
<input id="grid-two-factor-token-disable" type="number" class="input" <input id="grid-two-factor-token-disable" type="number" class="input"
@ -151,14 +151,14 @@ export default Vue.component('two-factor-authentication', {
</div> </div>
</div> </div>
<div id="container-enable-two-factor" v-else v-show="!spinner"> <div id="container-enable-two-factor" v-else v-show="!spinner">
<h2 class="font-medium text-grey-darkest">{{ $t('dashboard.account.two_factor.setup.title') }}</h2> <h2 class="font-medium text-neutral-900">{{ $t('dashboard.account.two_factor.setup.title') }}</h2>
<div class="flex mt-6"> <div class="flex mt-6">
<div class="flex-none w-full sm:w-1/2 text-center"> <div class="flex-none w-full sm:w-1/2 text-center">
<div class="h-48"> <div class="h-48">
<img :src="response.qr_image" id="grid-qr-code" alt="Two-factor qr image" class="h-48"> <img :src="response.qr_image" id="grid-qr-code" alt="Two-factor qr image" class="h-48">
</div> </div>
<div> <div>
<p class="text-xs text-grey-darker mb-2">{{ $t('dashboard.account.two_factor.setup.help') }}</p> <p class="text-xs text-neutral-800 mb-2">{{ $t('dashboard.account.two_factor.setup.help') }}</p>
<p class="text-xs"><code>{{response.secret}}</code></p> <p class="text-xs"><code>{{response.secret}}</code></p>
</div> </div>
</div> </div>

2
resources/assets/scripts/components/dashboard/account/UpdateEmail.ts
View file

@ -51,7 +51,7 @@ export default Vue.component('update-email', {
<div id="update-email-container" :class> <div id="update-email-container" :class>
<form method="post" v-on:submit.prevent="submitForm"> <form method="post" v-on:submit.prevent="submitForm">
<div class="content-box"> <div class="content-box">
<h2 class="mb-6 text-grey-darkest font-medium">{{ $t('dashboard.account.email.title') }}</h2> <h2 class="mb-6 text-neutral-900 font-medium">{{ $t('dashboard.account.email.title') }}</h2>
<div> <div>
<label for="grid-email" class="input-label">{{ $t('strings.email_address') }}</label> <label for="grid-email" class="input-label">{{ $t('strings.email_address') }}</label>
<input id="grid-email" name="email" type="email" class="input" required <input id="grid-email" name="email" type="email" class="input" required

44
resources/assets/scripts/components/server/Server.ts
View file

@ -82,32 +82,28 @@ export default Vue.component('server', {
<div class="mr-6"> <div class="mr-6">
<div class="p-6 text-center bg-white rounded shadow"> <div class="p-6 text-center bg-white rounded shadow">
<h3 class="mb-2 text-blue font-medium">{{server.name}}</h3> <h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
<span class="text-grey-dark text-sm">{{server.node}}</span> <span class="text-neutral-600 text-sm">{{server.node}}</span>
<power-buttons class="mt-6 pt-6 text-center border-t border-grey-lighter"/> <power-buttons class="mt-6 pt-6 text-center border-t border-neutral-100"/>
</div> </div>
</div> </div>
<div class="mt-6 sidenav mr-6"> <div class="sidenav mt-6 mr-6">
<router-link :to="{ name: 'server', params: { id: $route.params.id } }"> <ul>
Console <li>
</router-link> <router-link :to="{ name: 'server', params: { id: $route.params.id } }">
<router-link :to="{ name: 'server-files' }"> Console
File Manager </router-link>
</router-link> </li>
<!--<router-link :to="{ name: 'server-subusers' }">--> <li>
<!--<icon name="users" class="h-4"></icon> Subusers--> <router-link :to="{ name: 'server-files' }">
<!--</router-link>--> File Manager
<!--<router-link :to="{ name: 'server-schedules' }">--> </router-link>
<!--<icon name="calendar" class="h-4"></icon> Schedules--> </li>
<!--</router-link>--> <li>
<router-link :to="{ name: 'server-databases' }"> <router-link :to="{ name: 'server-databases' }">
Databases Databases
</router-link> </router-link>
<!--<router-link :to="{ name: 'server-allocations' }">--> </li>
<!--<icon name="globe" class="h-4"></icon> Allocations--> </ul>
<!--</router-link>-->
<!--<router-link :to="{ name: 'server-settings' }">-->
<!--<icon name="settings" class="h-4"></icon> Settings-->
<!--</router-link>-->
</div> </div>
</div> </div>
<div class="h-full w-full"> <div class="h-full w-full">

4
resources/assets/scripts/components/server/components/PowerButtons.ts
View file

@ -28,7 +28,7 @@ export default Vue.component('power-buttons', {
v-on:click.prevent="sendPowerAction('start')" v-on:click.prevent="sendPowerAction('start')"
>Start</button> >Start</button>
<div v-else> <div v-else>
<button class="btn btn-red uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('stop')">Stop</button> <button class="btn btn-red-500 uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('stop')">Stop</button>
<button class="btn btn-secondary uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('restart')">Restart</button> <button class="btn btn-secondary uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('restart')">Restart</button>
<button class="btn btn-secondary uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('kill')">Kill</button> <button class="btn btn-secondary uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('kill')">Kill</button>
</div> </div>
@ -37,7 +37,7 @@ export default Vue.component('power-buttons', {
<div v-else> <div v-else>
<div class="text-center"> <div class="text-center">
<div class="spinner"></div> <div class="spinner"></div>
<div class="pt-2 text-xs text-grey-light">Connecting to node</div> <div class="pt-2 text-xs text-neutral-400">Connecting to node</div>
</div> </div>
</div> </div>
</div> </div>

6
resources/assets/scripts/components/server/components/ProgressBar.ts
View file

@ -13,7 +13,7 @@ export default Vue.component('progress-bar', {
} else if (this.percent >= 70 && this.percent < 90) { } else if (this.percent >= 70 && this.percent < 90) {
return "bg-yellow-dark"; return "bg-yellow-dark";
} else { } else {
return "bg-red-dark"; return "bg-red-600";
} }
}, },
borderColor: function () { borderColor: function () {
@ -22,7 +22,7 @@ export default Vue.component('progress-bar', {
} else if (this.percent >= 70 && this.percent < 90) { } else if (this.percent >= 70 && this.percent < 90) {
return "border-yellow-dark"; return "border-yellow-dark";
} else { } else {
return "border-red-dark"; return "border-red-600";
} }
} }
}, },
@ -30,7 +30,7 @@ export default Vue.component('progress-bar', {
template: ` template: `
<div> <div>
<div class="text-right mb-1" v-if="title.length > 0"> <div class="text-right mb-1" v-if="title.length > 0">
<span class="text-grey-dark text-xs uppercase">{{ title }}</span> <span class="text-neutral-600 text-xs uppercase">{{ title }}</span>
</div> </div>
<div class="w-full border rounded h-4" :class="borderColor"> <div class="w-full border rounded h-4" :class="borderColor">
<div class="h-full w-1/3 text-center" :style="{ width: percent + '%' }" :class="backgroundColor"> <div class="h-full w-1/3 text-center" :style="{ width: percent + '%' }" :class="backgroundColor">

2
resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<message-box class="alert error mb-6" :message="errorMessage" v-show="errorMessage.length"/> <message-box class="alert error mb-6" :message="errorMessage" v-show="errorMessage.length"/>
<h2 class="font-medium text-grey-darkest mb-6">Create a new database</h2> <h2 class="font-medium text-neutral-900 mb-6">Create a new database</h2>
<div class="mb-6"> <div class="mb-6">
<label class="input-label" for="grid-database-name">Database name</label> <label class="input-label" for="grid-database-name">Database name</label>
<input id="grid-database-name" type="text" class="input" name="database_name" required <input id="grid-database-name" type="text" class="input" name="database_name" required

12
resources/assets/scripts/components/server/components/database/DatabaseRow.vue
View file

@ -1,17 +1,17 @@
<template> <template>
<div class="content-box mb-6 hover:border-grey"> <div class="content-box mb-6 hover:borderneutral-500">
<div class="flex items-center text-grey-darker"> <div class="flex items-center text-neutral-800">
<database-icon class="flex-none text-green"></database-icon> <database-icon class="flex-none text-green"></database-icon>
<div class="flex-1 px-4"> <div class="flex-1 px-4">
<p class="uppercase text-xs text-grey pb-1 select-none">Database Name</p> <p class="uppercase text-xs textneutral-500spb-1 select-none">Database Name</p>
<p>{{database.name}}</p> <p>{{database.name}}</p>
</div> </div>
<div class="flex-1 px-4"> <div class="flex-1 px-4">
<p class="uppercase text-xs text-grey pb-1 select-none">Username</p> <p class="uppercase text-xs textneutral-500spb-1 select-none">Username</p>
<p>{{database.username}}</p> <p>{{database.username}}</p>
</div> </div>
<div class="flex-1 px-4"> <div class="flex-1 px-4">
<p class="uppercase text-xs text-grey pb-1 select-none">Password</p> <p class="uppercase text-xs textneutral-500spb-1 select-none">Password</p>
<p> <p>
<code class="text-sm cursor-pointer" v-on:click="revealPassword"> <code class="text-sm cursor-pointer" v-on:click="revealPassword">
<span class="select-none" v-if="!database.showPassword"> <span class="select-none" v-if="!database.showPassword">
@ -22,7 +22,7 @@
</p> </p>
</div> </div>
<div class="flex-1 px-4"> <div class="flex-1 px-4">
<p class="uppercase text-xs text-grey pb-1 select-none">Server</p> <p class="uppercase text-xs textneutral-500spb-1 select-none">Server</p>
<p><code class="text-sm">{{database.host.address}}:{{database.host.port}}</code></p> <p><code class="text-sm">{{database.host.address}}:{{database.host.port}}</code></p>
</div> </div>
<div class="flex-none px-4"> <div class="flex-none px-4">

4
resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<h2 class="font-medium text-grey-darkest mb-6">Delete this database?</h2> <h2 class="font-medium text-neutral-900 mb-6">Delete this database?</h2>
<p class="text-grey-darkest text-sm">This action <strong>cannot</strong> be undone. This will permanetly delete the <strong>{{database.name}}</strong> database and remove all associated data.</p> <p class="text-neutral-900 text-sm">This action <strong>cannot</strong> be undone. This will permanetly delete the <strong>{{database.name}}</strong> database and remove all associated data.</p>
<div class="mt-6"> <div class="mt-6">
<label class="input-label">Confirm database name</label> <label class="input-label">Confirm database name</label>
<input type="text" class="input" v-model="nameConfirmation"/> <input type="text" class="input" v-model="nameConfirmation"/>

4
resources/assets/scripts/components/server/components/filemanager/FileRow.ts
View file

@ -89,8 +89,8 @@ export default Vue.component('file-row', {
<icon name="link2" v-else/> <icon name="link2" v-else/>
</div> </div>
<div class="flex-1">{{file.name}}</div> <div class="flex-1">{{file.name}}</div>
<div class="flex-1 text-right text-grey-dark">{{readableSize(file.size)}}</div> <div class="flex-1 text-right text-neutral-600">{{readableSize(file.size)}}</div>
<div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div> <div class="flex-1 text-right text-neutral-600">{{formatDate(file.modified)}}</div>
<div class="flex-none w-1/6"></div> <div class="flex-none w-1/6"></div>
</div> </div>
<file-context-menu class="context-menu" v-show="contextMenuVisible" ref="contextMenu"/> <file-context-menu class="context-menu" v-show="contextMenuVisible" ref="contextMenu"/>

4
resources/assets/scripts/components/server/components/filemanager/FolderRow.ts
View file

@ -35,8 +35,8 @@ export default Vue.component('folder-row', {
<icon name="folder"/> <icon name="folder"/>
</div> </div>
<div class="flex-1">{{directory.name}}</div> <div class="flex-1">{{directory.name}}</div>
<div class="flex-1 text-right text-grey-dark"></div> <div class="flex-1 text-right text-neutral-600"></div>
<div class="flex-1 text-right text-grey-dark">{{formatDate(directory.modified)}}</div> <div class="flex-1 text-right text-neutral-600">{{formatDate(directory.modified)}}</div>
<div class="flex-none w-1/6"></div> <div class="flex-none w-1/6"></div>
</router-link> </router-link>
</div> </div>

4
resources/assets/scripts/components/server/subpages/Console.ts
View file

@ -162,12 +162,12 @@ export default Vue.component('server-console', {
<div class="animate fadein shadow-md"> <div class="animate fadein shadow-md">
<div class="text-xs font-mono"> <div class="text-xs font-mono">
<div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:64rem;"> <div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:64rem;">
<div class="mb-2 text-grey-light" ref="terminal" v-if="connected"></div> <div class="mb-2 text-neutral-400" ref="terminal" v-if="connected"></div>
<div v-else> <div v-else>
<div class="spinner spinner-xl mt-24"></div> <div class="spinner spinner-xl mt-24"></div>
</div> </div>
</div> </div>
<div class="rounded-b bg-grey-darkest text-white flex"> <div class="rounded-b bg-neutral-900 text-white flex">
<div class="flex-no-shrink p-2"> <div class="flex-no-shrink p-2">
<span class="font-bold">$</span> <span class="font-bold">$</span>
</div> </div>

4
resources/assets/scripts/components/server/subpages/Databases.ts
View file

@ -92,8 +92,8 @@ export default Vue.component('server-databases', {
<div class="animate fadein" v-else> <div class="animate fadein" v-else>
<div class="content-box mb-6" v-if="!databases.length"> <div class="content-box mb-6" v-if="!databases.length">
<div class="flex items-center"> <div class="flex items-center">
<icon name="database" class="flex-none text-grey-darker"></icon> <icon name="database" class="flex-none text-neutral-800"></icon>
<div class="flex-1 px-4 text-grey-darker"> <div class="flex-1 px-4 text-neutral-800">
<p>You have no databases.</p> <p>You have no databases.</p>
</div> </div>
</div> </div>

2
resources/assets/scripts/components/server/subpages/FileManager.ts
View file

@ -136,7 +136,7 @@ export default Vue.component('file-manager', {
<div class="alert error" v-text="errorMessage"></div> <div class="alert error" v-text="errorMessage"></div>
</div> </div>
<div v-else-if="!directories.length && !files.length"> <div v-else-if="!directories.length && !files.length">
<p class="text-grey text-sm text-center p-6 pb-4">This directory is empty.</p> <p class="textneutral-500stext-sm text-center p-6 pb-4">This directory is empty.</p>
</div> </div>
<div class="filemanager" v-else> <div class="filemanager" v-else>
<div class="header"> <div class="header">

2
resources/assets/styles/components/animations.css
View file

@ -35,7 +35,7 @@
@apply .bg-red; @apply .bg-red;
} }
100% { 100% {
@apply .bg-red-dark; @apply .bg-red-600;
} }
} }

10
resources/assets/styles/components/buttons.css
View file

@ -23,23 +23,23 @@
&.btn-red { &.btn-red {
&:not(.btn-secondary) { &:not(.btn-secondary) {
@apply .bg-red .border-red-dark .border .text-white; @apply .bg-red-500 .border-red-600 .border .text-white;
} }
&:hover:enabled { &:hover:enabled {
@apply .bg-red-dark .border-red-darker; @apply .bg-red-600 .border-red-800;
} }
} }
&.btn-secondary { &.btn-secondary {
@apply .border .border-grey-light .text-grey-dark; @apply .border .border-neutral-400 .text-neutral-600;
&:hover:enabled { &:hover:enabled {
@apply .border-grey .text-grey-darker; @apply .borderneutral-500s.text-neutral-800;
} }
&.btn-red:hover:enabled { &.btn-red:hover:enabled {
@apply .bg-red-dark .border-red-darker .text-white; @apply .bg-red-600 .border-red-800 .text-white;
} }
} }

14
resources/assets/styles/components/filemanager.css
View file

@ -1,6 +1,6 @@
.filemanager { .filemanager {
& .header { & .header {
@apply .flex .text-sm .pb-4 .font-bold .border-b .border-grey-light .mb-3; @apply .flex .text-sm .pb-4 .font-bold .border-b .border-neutral-400 .mb-3;
& > div { & > div {
@apply .pr-4; @apply .pr-4;
@ -19,7 +19,7 @@
} }
&.active-selection, &.clickable:hover { &.active-selection, &.clickable:hover {
@apply .bg-grey-lightest .text-grey-darkest .shadow; @apply .bg-neutral-50 .text-neutral-900 .shadow;
} }
& > .icon { & > .icon {
@ -31,10 +31,10 @@
} }
.context-menu { .context-menu {
@apply .absolute .bg-white .py-2 .border .rounded .text-grey-darker .text-sm .cursor-pointer; @apply .absolute .bg-white .py-2 .border .rounded .text-neutral-800 .text-sm .cursor-pointer;
& > div:not(:last-of-type) { & > div:not(:last-of-type) {
@apply .border-b .border-grey-lightest .pb-2 .mb-2; @apply .border-b .border-neutral-50 .pb-2 .mb-2;
} }
& .context-row { & .context-row {
@ -53,11 +53,11 @@
} }
&:hover { &:hover {
@apply .bg-grey-lightest .border-t .border-b .border-grey-lighter; @apply .bg-neutral-50 .border-t .border-b .border-neutral-100;
} }
&.danger:hover { &.danger:hover {
@apply .bg-red-lightest .border-t .border-b .border-red-lighter; @apply .bg-red-50 .border-t .border-b .border-red-100;
} }
} }
@ -65,7 +65,7 @@
} }
.filemanager-breadcrumbs { .filemanager-breadcrumbs {
@apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-grey-darker .shadow-md; @apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-neutral-800 .shadow-md;
& a { & a {
@apply .no-underline .text-blue; @apply .no-underline .text-blue;

16
resources/assets/styles/components/forms.css
View file

@ -21,7 +21,7 @@ input[type=number] {
} }
.input-open > .input { .input-open > .input {
@apply .appearance-none .block .w-full .text-grey-darker .border-b-2 .border-grey-light .py-3 .mb-3; @apply .appearance-none .block .w-full .text-neutral-800 .border-b-2 .border-neutral-400 .py-3 .mb-3;
&:focus { &:focus {
@apply .border-blue-light; @apply .border-blue-light;
@ -30,7 +30,7 @@ input[type=number] {
} }
&:focus + label, &:valid + label, &.has-content + label { &:focus + label, &:valid + label, &.has-content + label {
@apply .text-grey-darker .px-0 .cursor-pointer; @apply .text-neutral-800 .px-0 .cursor-pointer;
transform:translateY(-26px) transform:translateY(-26px)
} }
@ -40,7 +40,7 @@ input[type=number] {
} }
.input-open > label { .input-open > label {
@apply .block .uppercase .tracking-wide .text-grey .text-xs .mb-2 .absolute; @apply .block .uppercase .tracking-wide .textneutral-500s.text-xs .mb-2 .absolute;
top: 14px; top: 14px;
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
} }
@ -49,7 +49,7 @@ input[type=number] {
* Styling for other forms throughout the Panel. * Styling for other forms throughout the Panel.
*/ */
.input:not(.open-label) { .input:not(.open-label) {
@apply .appearance-none .p-3 .rounded .border .text-grey-darker .w-full; @apply .appearance-none .p-3 .rounded .border .text-neutral-800 .w-full;
transition: all 100ms linear; transition: all 100ms linear;
&:focus { &:focus {
@ -61,18 +61,18 @@ input[type=number] {
} }
&.error { &.error {
@apply .text-red-dark .border-red; @apply .text-red-600 .border-red;
} }
} }
.input-label { .input-label {
@apply .block .uppercase .tracking-wide .text-grey-darkest .text-xs .font-bold .mb-2; @apply .block .uppercase .tracking-wide .text-neutral-900 .text-xs .font-bold .mb-2;
} }
.input-help { .input-help {
@apply .text-xs .text-grey .pt-2; @apply .text-xs .textneutral-500s.pt-2;
&.error { &.error {
@apply .text-red-dark; @apply .text-red-600;
} }
} }

12
resources/assets/styles/components/miscellaneous.css
View file

@ -11,7 +11,7 @@ code {
* Indicators for server online status. * Indicators for server online status.
*/ */
.indicator { .indicator {
@apply .bg-grey-darker .border .border-grey; @apply .bg-neutral-800 .border .border-grey;
border-radius: 50%; border-radius: 50%;
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -89,16 +89,16 @@ code {
} }
& a, & a:visited { & a, & a:visited {
@apply .no-underline .text-grey-darkest; @apply .no-underline .text-neutral-900;
} }
& > .content { & > .content {
@apply .border .border-grey-light .bg-white .no-underline .block .text-black .p-4; @apply .border .border-neutral-400 .bg-white .no-underline .block .text-black .p-4;
border-top: 4px solid config('colors.grey-light') !important; border-top: 4px solid config('colors.neutral-400') !important;
} }
& > .footer { & > .footer {
@apply .border .border-grey-light .border-t-0 .bg-grey-lightest; @apply .border .border-neutral-400 .border-t-0 .bg-neutral-50;
} }
} }
@ -110,7 +110,7 @@ code {
@apply .w-full .my-4; @apply .w-full .my-4;
& > input[type="text"] { & > input[type="text"] {
@apply .w-full .p-3 .rounded .border .text-grey-darker; @apply .w-full .p-3 .rounded .border .text-neutral-800;
transition: border 150ms ease-in; transition: border 150ms ease-in;
&:focus { &:focus {

36
resources/assets/styles/components/navigation.css
View file

@ -19,7 +19,7 @@
@apply .mr-2; @apply .mr-2;
& > .search-input { & > .search-input {
@apply .text-sm .p-2 .ml-8 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest .w-96; @apply .text-sm .p-2 .ml-8 .rounded .border .border-blue-darker .bg-neutral-50 .text-neutral-900 .w-96;
opacity: 0.9; opacity: 0.9;
transition: ease-in-out opacity 150ms; transition: ease-in-out opacity 150ms;
@ -35,13 +35,13 @@
} }
& .search-results { & .search-results {
@apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96; @apply .absolute .bg-neutral-50 .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
& a { & a {
@apply .block .no-underline .p-2 .rounded; @apply .block .no-underline .p-2 .rounded;
&:hover { &:hover {
@apply .bg-grey-lighter; @apply .bg-neutral-100;
} }
} }
} }
@ -51,7 +51,7 @@
@apply .flex .h-full .items-center; @apply .flex .h-full .items-center;
& > a { & > a {
@apply .block .flex .self-stretch .items-center .no-underline .text-grey-lighter .font-light .text-sm .px-5; @apply .block .flex .self-stretch .items-center .no-underline .text-neutral-100 .font-light .text-sm .px-5;
&:hover { &:hover {
@apply .bg-blue-dark; @apply .bg-blue-dark;
@ -61,16 +61,24 @@
} }
.sidenav { .sidenav {
a { ul {
@apply .block .no-underline .text-grey-darker .py-2; @apply .list-reset;
transition: color 75ms ease-in;
&:hover { & li {
@apply .text-grey; @apply .block;
}
&.router-link-exact-active { & > a {
@apply .font-medium; transition: border-left-color 250ms linear, color 250ms linear;
@apply .block .px-4 .py-3 .border-l-3 .border-neutral-100 .no-underline .text-neutral-400 .font-medium;
&:hover, &.router-link-exact-active {
@apply .text-neutral-800;
}
&.router-link-exact-active {
@apply .border-blue .cursor-default;
}
}
} }
} }
} }
@ -79,10 +87,10 @@
@apply .py-2; @apply .py-2;
a { a {
@apply .block .py-3 .px-6 .text-grey-darkest .no-underline .border .border-transparent; @apply .block .py-3 .px-6 .text-neutral-900 .no-underline .border .border-transparent;
&:hover, &.router-link-exact-active { &:hover, &.router-link-exact-active {
@apply .border-grey-light .bg-grey-lightest; @apply .border-neutral-400 .bg-neutral-50;
border-left: 1px solid transparent; border-left: 1px solid transparent;
border-right: 1px solid transparent; border-right: 1px solid transparent;

2
resources/assets/styles/components/notifications.css
View file

@ -13,7 +13,7 @@
} }
&.error { &.error {
@apply .bg-red-dark .border-red-darker .text-red-lightest; @apply .bg-red-600 .border-red-800 .text-red-50;
& > .title { & > .title {
@apply .bg-red; @apply .bg-red;

2
resources/assets/styles/components/spinners.css
View file

@ -7,7 +7,7 @@
} }
&:after { &:after {
@apply .border-2 .border-grey-light .absolute .block .h-4 .w-4 .rounded-full; @apply .border-2 .border-neutral-400 .absolute .block .h-4 .w-4 .rounded-full;
animation: spinners--spin 500ms infinite linear; animation: spinners--spin 500ms infinite linear;
border-top-color: transparent !important; border-top-color: transparent !important;
border-right-color: transparent !important; border-right-color: transparent !important;

4
resources/themes/pterodactyl/admin/nodes/view/index.blade.php
View file

@ -98,7 +98,7 @@
<div class="row"> <div class="row">
@if($node->maintenance_mode) @if($node->maintenance_mode)
<div class="col-sm-12"> <div class="col-sm-12">
<div class="info-box bg-orange"> <div class="info-box bg-grey">
<span class="info-box-icon"><i class="ion ion-wrench"></i></span> <span class="info-box-icon"><i class="ion ion-wrench"></i></span>
<div class="info-box-content" style="padding: 23px 10px 0;"> <div class="info-box-content" style="padding: 23px 10px 0;">
<span class="info-box-text">This node is under</span> <span class="info-box-text">This node is under</span>
@ -169,4 +169,4 @@
}); });
})(); })();
</script> </script>
@endsection @endsection

4
resources/themes/pterodactyl/templates/auth/core.blade.php
View file

@ -1,5 +1,5 @@
@extends('templates/wrapper', [ @extends('templates/wrapper', [
'css' => ['body' => 'bg-grey-darkest'] 'css' => ['body' => 'bg-neutral-900']
]) ])
@section('container') @section('container')
@ -8,7 +8,7 @@
<img src="/assets/img/pterodactyl-flat.svg" class="max-w-xxs"> <img src="/assets/img/pterodactyl-flat.svg" class="max-w-xxs">
</div> </div>
<router-view></router-view> <router-view></router-view>
<p class="text-center text-grey text-xs"> <p class="text-center textneutral-500stext-xs">
{!! trans('strings.copyright', ['year' => date('Y')]) !!} {!! trans('strings.copyright', ['year' => date('Y')]) !!}
</p> </p>
</div> </div>

2
resources/themes/pterodactyl/templates/base/core.blade.php
View file

@ -56,7 +56,7 @@
@section('below-container') @section('below-container')
<div class="flex-grow"></div> <div class="flex-grow"></div>
<div class="w-full m-auto mt-0 container"> <div class="w-full m-auto mt-0 container">
<p class="text-center sm:text-right text-grey-dark text-xs"> <p class="text-center sm:text-right text-neutral-600 text-xs">
{!! trans('strings.copyright', ['year' => date('Y')]) !!} {!! trans('strings.copyright', ['year' => date('Y')]) !!}
</p> </p>
</div> </div>

2
resources/themes/pterodactyl/templates/wrapper.blade.php
View file

@ -32,7 +32,7 @@
@include('layouts.scripts') @include('layouts.scripts')
</head> </head>
<body class="{{ $css['body'] ?? 'bg-grey-lightest' }}"> <body class="{{ $css['body'] ?? 'bg-neutral-50' }}">
@section('content') @section('content')
@yield('above-container') @yield('above-container')
<div id="pterodactyl" class="flex flex-col"> <div id="pterodactyl" class="flex flex-col">

118
tailwind.js
View file

@ -49,61 +49,76 @@ let colors = {
'white': '#ffffff', 'white': '#ffffff',
'basically-white': '#fafafb', 'basically-white': '#fafafb',
'grey-lightest': '#F5F7FA', // The design's primary colors. Splashes of color that should appear the most
'grey-lighter': '#E4E7EB', // within the UI and determine the overall look of the site.
'grey-light': '#CBD2D9', 'primary-50': 'hsl(202, 100%, 95%)', // lightest
'grey': '#9AA5B1', 'primary-100': 'hsl(204, 100%, 86%)', // lighter
'grey-dark': '#52606D', 'primary-200': 'hsl(206, 93%, 73%)',
'grey-darker': '#3E4C59', 'primary-300': 'hsl(208, 88%, 62%)',
'grey-darkest': '#323F4B', 'primary-400': 'hsl(210, 83%, 53%)', // light
'primary-500': 'hsl(212, 92%, 43%)', // base
'primary-600': 'hsl(214, 95%, 36%)', // dark
'primary-700': 'hsl(215, 96%, 32%)',
'primary-800': 'hsl(216, 98%, 25%)', // darker
'primary-900': 'hsl(218, 100%, 17%)', //darkest
'red-lightest': '#FFE3E3', // Color used the most in the design and make up the majority of the UI.
'red-lighter': '#FFBDBD', 'neutral-50': 'hsl(216, 33%, 97%)',
'red-light': '#F86A6A', 'neutral-100': 'hsl(214, 15%, 91%)',
'red': '#CF1124', 'neutral-200': 'hsl(210, 16%, 82%)',
'red-dark': '#AB091E', 'neutral-300': 'hsl(211, 13%, 65%)',
'red-darker': '#8A041A', 'neutral-400': 'hsl(211, 10%, 53%)',
'red-darkest': '#610316', 'neutral-500': 'hsl(211, 12%, 43%)',
'neutral-600': 'hsl(209, 14%, 37%)',
'neutral-700': 'hsl(209, 18%, 30%)',
'neutral-800': 'hsl(209, 20%, 25%)',
'neutral-900': 'hsl(210, 24%, 16%)',
'orange-lightest': '#FFE8D9', // Supporting colors used to make an element stand out or re-inforce error
'orange-lighter': '#FFD0B5', // states or trends.
'orange-light': '#F9703E', 'red-50': 'hsl(360, 100%, 95%)',
'orange': '#DE3A11', 'red-100': 'hsl(360, 100%, 87%)',
'orange-dark': '#C52707', 'red-200': 'hsl(360, 100%, 80%)',
'orange-darker': '#AD1D07', 'red-300': 'hsl(360, 91%, 69%)',
'orange-darkest': '#841003', 'red-400': 'hsl(360, 83%, 62%)',
'red-500': 'hsl(356, 75%, 53%)',
'red-600': 'hsl(354, 85%, 44%)',
'red-700': 'hsl(352, 90%, 35%)',
'red-800': 'hsl(350, 94%, 28%)',
'red-900': 'hsl(348, 94%, 20%)',
'yellow-lightest': '#fbfae9', 'yellow-50': 'hsl(49, 100%, 96%)',
'yellow-lighter': '#ede9a7', 'yellow-100': 'hsl(48, 100%, 88%)',
'yellow-light': '#e0d965', 'yellow-200': 'hsl(48, 95%, 76%)',
'yellow': '#d2c823', 'yellow-300': 'hsl(48, 94%, 68%)',
'yellow-dark': '#bdb420', 'yellow-400': 'hsl(44, 92%, 63%)',
'yellow-darker': '#7e7815', 'yellow-500': 'hsl(42, 87%, 55%)',
'yellow-darkest': '#3f3c0b', 'yellow-600': 'hsl(36, 77%, 49%)',
'yellow-700': 'hsl(29, 80%, 44%)',
'yellow-800': 'hsl(22, 82%, 39%)',
'yellow-900': 'hsl(15, 86%, 30%)',
'green-lightest': '#eef7eb', 'cyan-50': 'hsl(171, 82%, 94%)',
'green-lighter': '#bbdeae', 'cyan-100': 'hsl(172, 97%, 88%)',
'green-light': '#89c671', 'cyan-200': 'hsl(174, 96%, 78%)',
'green': '#56ad34', 'cyan-300': 'hsl(176, 87%, 67%)',
'green-dark': '#4d9c2f', 'cyan-400': 'hsl(178, 78%, 57%)',
'green-darker': '#34681f', 'cyan-500': 'hsl(180, 77%, 47%)',
'green-darkest': '#1a3410', 'cyan-600': 'hsl(182, 85%, 39%)',
'cyan-700': 'hsl(184, 90%, 34%)',
'cyan-800': 'hsl(186, 91%, 29%)',
'cyan-900': 'hsl(188, 91%, 23%)',
'blue-lightest': '#E6F6FF', 'green-50': 'hsl(83, 100%, 96%)',
'blue-lighter': '#BAE3FF', 'green-100': 'hsl(83, 100%, 87%)',
'blue-light': '#2186EB', 'green-200': 'hsl(86, 100%, 76%)',
'blue': '#0967D2', 'green-300': 'hsl(88, 91%, 66%)',
'blue-dark': '#0552B5', 'green-400': 'hsl(90, 84%, 55%)',
'blue-darker': '#01337D', 'green-500': 'hsl(92, 86%, 45%)',
'blue-darkest': '#002159', 'green-600': 'hsl(92, 89%, 38%)',
'green-700': 'hsl(100, 89%, 31%)',
'cyan-lightest': '#E1FCF8', 'green-800': 'hsl(99, 91%, 25%)',
'cyan-lighter': '#C1FEF6', 'green-900': 'hsl(100, 93%, 17%)',
'cyan-light': '#62F4EB',
'cyan': '#0FB5BA',
'cyan-dark': '#099AA4',
'cyan-darker': '#07818F',
'cyan-darkest': '#05606E',
}; };
module.exports = { module.exports = {
@ -357,6 +372,7 @@ module.exports = {
default: '1px', default: '1px',
'0': '0', '0': '0',
'2': '2px', '2': '2px',
'3': '3px',
'4': '4px', '4': '4px',
'8': '8px', '8': '8px',
}, },
@ -378,7 +394,7 @@ module.exports = {
| |
*/ */
borderColors: global.Object.assign({default: colors['grey-light']}, colors), borderColors: global.Object.assign({default: colors['neutral-400']}, colors),
/* /*
|----------------------------------------------------------------------------- |-----------------------------------------------------------------------------