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">
<router-view></router-view>
<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>
</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)"
/>
<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>
@ -81,7 +81,7 @@ export default Vue.component('forgot-password', {
</button>
</div>
<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"
:to="{ name: 'login' }"
>

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

@ -102,7 +102,7 @@ export default Vue.component('login-form', {
</button>
</div>
<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' }">
{{ $t('auth.forgot_password.label') }}
</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"
/>
<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 class="flex flex-wrap -mx-3 mb-6">
@ -110,7 +110,7 @@ export default Vue.component('reset-password', {
</button>
</div>
<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' }"
>
{{ $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"
/>
<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>
@ -69,7 +69,7 @@ export default Vue.component('two-factor-form', {
</button>
</div>
<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' }"
>
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 v-on:click="close">
<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"
role="button"
/>

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

@ -101,7 +101,7 @@ export default Vue.component('navigation', {
<a href="#">
<div class="flex items-center">
<div class="flex-1">
<span class="text-sm text-grey-darker">Loading...</span>
<span class="text-sm text-neutral-800">Loading...</span>
</div>
<div class="flex-none">
<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">
<div class="flex items-center">
<div class="flex-1">
<span class="font-bold text-grey-darkest">{{ 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-bold text-neutral-900">{{ server.name }}</span><br />
<span class="font-light text-neutral-600 text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
</div>
<div class="flex-none">
<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 }}
</h2>
</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>
<div class="absolute pin-b pin-l p-4 w-full">
<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>

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>
<form method="post" v-on:submit.prevent="submitForm">
<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">
<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

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>
</div>
<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">
<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"
@ -151,14 +151,14 @@ export default Vue.component('two-factor-authentication', {
</div>
</div>
<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-none w-full sm:w-1/2 text-center">
<div class="h-48">
<img :src="response.qr_image" id="grid-qr-code" alt="Two-factor qr image" class="h-48">
</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>
</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>
<form method="post" v-on:submit.prevent="submitForm">
<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>
<label for="grid-email" class="input-label">{{ $t('strings.email_address') }}</label>
<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="p-6 text-center bg-white rounded shadow">
<h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
<span class="text-grey-dark text-sm">{{server.node}}</span>
<power-buttons class="mt-6 pt-6 text-center border-t border-grey-lighter"/>
<span class="text-neutral-600 text-sm">{{server.node}}</span>
<power-buttons class="mt-6 pt-6 text-center border-t border-neutral-100"/>
</div>
</div>
<div class="mt-6 sidenav mr-6">
<router-link :to="{ name: 'server', params: { id: $route.params.id } }">
Console
</router-link>
<router-link :to="{ name: 'server-files' }">
File Manager
</router-link>
<!--<router-link :to="{ name: 'server-subusers' }">-->
<!--<icon name="users" class="h-4"></icon> Subusers-->
<!--</router-link>-->
<!--<router-link :to="{ name: 'server-schedules' }">-->
<!--<icon name="calendar" class="h-4"></icon> Schedules-->
<!--</router-link>-->
<router-link :to="{ name: 'server-databases' }">
Databases
</router-link>
<!--<router-link :to="{ name: 'server-allocations' }">-->
<!--<icon name="globe" class="h-4"></icon> Allocations-->
<!--</router-link>-->
<!--<router-link :to="{ name: 'server-settings' }">-->
<!--<icon name="settings" class="h-4"></icon> Settings-->
<!--</router-link>-->
<div class="sidenav mt-6 mr-6">
<ul>
<li>
<router-link :to="{ name: 'server', params: { id: $route.params.id } }">
Console
</router-link>
</li>
<li>
<router-link :to="{ name: 'server-files' }">
File Manager
</router-link>
</li>
<li>
<router-link :to="{ name: 'server-databases' }">
Databases
</router-link>
</li>
</ul>
</div>
</div>
<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')"
>Start</button>
<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('kill')">Kill</button>
</div>
@ -37,7 +37,7 @@ export default Vue.component('power-buttons', {
<div v-else>
<div class="text-center">
<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>

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) {
return "bg-yellow-dark";
} else {
return "bg-red-dark";
return "bg-red-600";
}
},
borderColor: function () {
@ -22,7 +22,7 @@ export default Vue.component('progress-bar', {
} else if (this.percent >= 70 && this.percent < 90) {
return "border-yellow-dark";
} else {
return "border-red-dark";
return "border-red-600";
}
}
},
@ -30,7 +30,7 @@ export default Vue.component('progress-bar', {
template: `
<div>
<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 class="w-full border rounded h-4" :class="borderColor">
<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>
<div>
<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">
<label class="input-label" for="grid-database-name">Database name</label>
<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>
<div class="content-box mb-6 hover:border-grey">
<div class="flex items-center text-grey-darker">
<div class="content-box mb-6 hover:borderneutral-500">
<div class="flex items-center text-neutral-800">
<database-icon class="flex-none text-green"></database-icon>
<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>
</div>
<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>
</div>
<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>
<code class="text-sm cursor-pointer" v-on:click="revealPassword">
<span class="select-none" v-if="!database.showPassword">
@ -22,7 +22,7 @@
</p>
</div>
<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>
</div>
<div class="flex-none px-4">

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

@ -1,7 +1,7 @@
<template>
<div>
<h2 class="font-medium text-grey-darkest 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>
<h2 class="font-medium text-neutral-900 mb-6">Delete this database?</h2>
<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">
<label class="input-label">Confirm database name</label>
<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/>
</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-grey-dark">{{formatDate(file.modified)}}</div>
<div class="flex-1 text-right text-neutral-600">{{readableSize(file.size)}}</div>
<div class="flex-1 text-right text-neutral-600">{{formatDate(file.modified)}}</div>
<div class="flex-none w-1/6"></div>
</div>
<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"/>
</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-grey-dark">{{formatDate(directory.modified)}}</div>
<div class="flex-1 text-right text-neutral-600"></div>
<div class="flex-1 text-right text-neutral-600">{{formatDate(directory.modified)}}</div>
<div class="flex-none w-1/6"></div>
</router-link>
</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="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="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 class="spinner spinner-xl mt-24"></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">
<span class="font-bold">$</span>
</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="content-box mb-6" v-if="!databases.length">
<div class="flex items-center">
<icon name="database" class="flex-none text-grey-darker"></icon>
<div class="flex-1 px-4 text-grey-darker">
<icon name="database" class="flex-none text-neutral-800"></icon>
<div class="flex-1 px-4 text-neutral-800">
<p>You have no databases.</p>
</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>
<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 class="filemanager" v-else>
<div class="header">

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

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

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

@ -23,23 +23,23 @@
&.btn-red {
&:not(.btn-secondary) {
@apply .bg-red .border-red-dark .border .text-white;
@apply .bg-red-500 .border-red-600 .border .text-white;
}
&:hover:enabled {
@apply .bg-red-dark .border-red-darker;
@apply .bg-red-600 .border-red-800;
}
}
&.btn-secondary {
@apply .border .border-grey-light .text-grey-dark;
@apply .border .border-neutral-400 .text-neutral-600;
&:hover:enabled {
@apply .border-grey .text-grey-darker;
@apply .borderneutral-500s.text-neutral-800;
}
&.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 {
& .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 {
@apply .pr-4;
@ -19,7 +19,7 @@
}
&.active-selection, &.clickable:hover {
@apply .bg-grey-lightest .text-grey-darkest .shadow;
@apply .bg-neutral-50 .text-neutral-900 .shadow;
}
& > .icon {
@ -31,10 +31,10 @@
}
.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) {
@apply .border-b .border-grey-lightest .pb-2 .mb-2;
@apply .border-b .border-neutral-50 .pb-2 .mb-2;
}
& .context-row {
@ -53,11 +53,11 @@
}
&: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 {
@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 {
@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 {
@apply .no-underline .text-blue;

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

@ -21,7 +21,7 @@ input[type=number] {
}
.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 {
@apply .border-blue-light;
@ -30,7 +30,7 @@ input[type=number] {
}
&: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)
}
@ -40,7 +40,7 @@ input[type=number] {
}
.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;
transition: transform 200ms ease-out;
}
@ -49,7 +49,7 @@ input[type=number] {
* Styling for other forms throughout the Panel.
*/
.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;
&:focus {
@ -61,18 +61,18 @@ input[type=number] {
}
&.error {
@apply .text-red-dark .border-red;
@apply .text-red-600 .border-red;
}
}
.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 {
@apply .text-xs .text-grey .pt-2;
@apply .text-xs .textneutral-500s.pt-2;
&.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.
*/
.indicator {
@apply .bg-grey-darker .border .border-grey;
@apply .bg-neutral-800 .border .border-grey;
border-radius: 50%;
width: 16px;
height: 16px;
@ -89,16 +89,16 @@ code {
}
& a, & a:visited {
@apply .no-underline .text-grey-darkest;
@apply .no-underline .text-neutral-900;
}
& > .content {
@apply .border .border-grey-light .bg-white .no-underline .block .text-black .p-4;
border-top: 4px solid config('colors.grey-light') !important;
@apply .border .border-neutral-400 .bg-white .no-underline .block .text-black .p-4;
border-top: 4px solid config('colors.neutral-400') !important;
}
& > .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;
& > 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;
&:focus {

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

@ -19,7 +19,7 @@
@apply .mr-2;
& > .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;
transition: ease-in-out opacity 150ms;
@ -35,13 +35,13 @@
}
& .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 {
@apply .block .no-underline .p-2 .rounded;
&:hover {
@apply .bg-grey-lighter;
@apply .bg-neutral-100;
}
}
}
@ -51,7 +51,7 @@
@apply .flex .h-full .items-center;
& > 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 {
@apply .bg-blue-dark;
@ -61,16 +61,24 @@
}
.sidenav {
a {
@apply .block .no-underline .text-grey-darker .py-2;
transition: color 75ms ease-in;
ul {
@apply .list-reset;
&:hover {
@apply .text-grey;
}
& li {
@apply .block;
&.router-link-exact-active {
@apply .font-medium;
& > a {
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;
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 {
@apply .border-grey-light .bg-grey-lightest;
@apply .border-neutral-400 .bg-neutral-50;
border-left: 1px solid transparent;
border-right: 1px solid transparent;

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

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

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

@ -7,7 +7,7 @@
}
&: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;
border-top-color: transparent !important;
border-right-color: transparent !important;

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

@ -98,7 +98,7 @@
<div class="row">
@if($node->maintenance_mode)
<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>
<div class="info-box-content" style="padding: 23px 10px 0;">
<span class="info-box-text">This node is under</span>

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

@ -1,5 +1,5 @@
@extends('templates/wrapper', [
'css' => ['body' => 'bg-grey-darkest']
'css' => ['body' => 'bg-neutral-900']
])
@section('container')
@ -8,7 +8,7 @@
<img src="/assets/img/pterodactyl-flat.svg" class="max-w-xxs">
</div>
<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')]) !!}
</p>
</div>

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

@ -56,7 +56,7 @@
@section('below-container')
<div class="flex-grow"></div>
<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')]) !!}
</p>
</div>

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

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

118
tailwind.js
View file

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