Blues
This commit is contained in:
Dane Everitt
parent
d6feaec202
commit
6e26f1929d
19 changed files with 30 additions and 30 deletions
|
|
@ -73,7 +73,7 @@ export default Vue.component('forgot-password', {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-blue btn-jumbo" type="submit" v-bind:disabled="submitDisabled">
|
||||
<button class="btn btn-primary btn-jumbo" type="submit" v-bind:disabled="submitDisabled">
|
||||
<span class="spinner white" v-bind:class="{ hidden: ! showSpinner }"> </span>
|
||||
<span v-bind:class="{ hidden: showSpinner }">
|
||||
{{ $t('auth.forgot_password.button') }}
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ export default Vue.component('login-form', {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button id="grid-login-button" class="btn btn-blue btn-jumbo" type="submit" aria-label="Log in"
|
||||
<button id="grid-login-button" class="btn btn-primary btn-jumbo" type="submit" aria-label="Log in"
|
||||
v-bind:disabled="showSpinner">
|
||||
<span class="spinner white" v-bind:class="{ hidden: ! showSpinner }"> </span>
|
||||
<span v-bind:class="{ hidden: showSpinner }">
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ export default Vue.component('reset-password', {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-blue btn-jumbo" type="submit" v-bind:class="{ disabled: showSpinner }">
|
||||
<button class="btn btn-primary btn-jumbo" type="submit" v-bind:class="{ disabled: showSpinner }">
|
||||
<span class="spinner white" v-bind:class="{ hidden: ! showSpinner }"> </span>
|
||||
<span v-bind:class="{ hidden: showSpinner }">
|
||||
{{ $t('auth.reset_password.button') }}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export default Vue.component('two-factor-form', {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-blue btn-jumbo" type="submit">
|
||||
<button class="btn btn-primary btn-jumbo" type="submit">
|
||||
{{ $t('auth.sign_in') }}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -185,7 +185,7 @@ export default Vue.component('server-box', {
|
|||
<div class="pillbox bg-green-500"><span class="select-none">MEM:</span> {{ memory }} Mb</div>
|
||||
</div>
|
||||
<div class="inline-block">
|
||||
<div class="pillbox bg-blue"><span class="select-none">CPU:</span> {{ cpu }} %</div>
|
||||
<div class="pillbox bg-primary-500"><span class="select-none">CPU:</span> {{ cpu }} %</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ export default Vue.component('change-password', {
|
|||
<p class="input-help error" v-show="errors.has('password_confirmation')">{{ errors.first('password_confirmation') }}</p>
|
||||
</div>
|
||||
<div class="mt-6 text-right">
|
||||
<button class="btn btn-blue btn-sm text-right" type="submit">{{ $t('strings.save') }}</button>
|
||||
<button class="btn btn-primary btn-sm text-right" type="submit">{{ $t('strings.save') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ export default Vue.component('two-factor-authentication', {
|
|||
template: `
|
||||
<div id="configure-two-factor">
|
||||
<div class="h-16 text-center" v-show="spinner">
|
||||
<span class="spinner spinner-xl text-blue"></span>
|
||||
<span class="spinner spinner-xl text-primary-500"></span>
|
||||
</div>
|
||||
<div id="container-disable-two-factor" v-if="response.enabled" v-show="!spinner">
|
||||
<h2 class="font-medium text-neutral-900">{{ $t('dashboard.account.two_factor.disable.title') }}</h2>
|
||||
|
|
@ -175,7 +175,7 @@ export default Vue.component('two-factor-authentication', {
|
|||
<p class="input-help error" v-show="errors.has('token')">{{ errors.first('token') }}</p>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<button class="btn btn-blue btn-jumbo" type="submit"
|
||||
<button class="btn btn-primary btn-jumbo" type="submit"
|
||||
:disabled="submitDisabled"
|
||||
v-on:click.prevent="enableTwoFactor"
|
||||
>{{ $t('strings.enable') }}</button>
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ export default Vue.component('update-email', {
|
|||
>
|
||||
</div>
|
||||
<div class="mt-6 text-right">
|
||||
<button class="btn btn-blue btn-sm text-right" type="submit">{{ $t('strings.save') }}</button>
|
||||
<button class="btn btn-primary btn-sm text-right" type="submit">{{ $t('strings.save') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ export default Vue.component('server', {
|
|||
<div class="sidebar flex-no-shrink w-1/3 max-w-xs">
|
||||
<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>
|
||||
<h3 class="mb-2 text-primary-500 font-medium">{{server.name}}</h3>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ export default Vue.component('server-databases', {
|
|||
<database-row v-for="database in databases" :database="database" :key="database.name"/>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-blue btn-lg" v-on:click="showCreateModal = true">Create new database</button>
|
||||
<button class="btn btn-primary btn-lg" v-on:click="showCreateModal = true">Create new database</button>
|
||||
</div>
|
||||
<modal :show="showCreateModal" v-on:close="showCreateModal = false">
|
||||
<create-database-modal
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
@keyframes offlineblink {
|
||||
0% {
|
||||
@apply .bg-red;
|
||||
@apply .bg-red-500;
|
||||
}
|
||||
100% {
|
||||
@apply .bg-red-600;
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
/**
|
||||
* Button Colors
|
||||
*/
|
||||
&.btn-blue {
|
||||
@apply .bg-blue .border-blue-dark .border .text-white;
|
||||
&.btn-primary {
|
||||
@apply .bg-primary-500 .border-primary-600 .border .text-white;
|
||||
|
||||
&:hover:enabled {
|
||||
@apply .bg-blue-dark .border-blue-darker;
|
||||
@apply .bg-primary-600 .border-primary-800;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
transition: color 50ms ease-in;
|
||||
|
||||
&:hover {
|
||||
@apply .text-blue-darker;
|
||||
@apply .text-primary-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ input[type=number] {
|
|||
@apply .appearance-none .block .w-full .text-neutral-800 .border-b-2 .border-neutral-400 .py-3 .mb-3;
|
||||
|
||||
&:focus {
|
||||
@apply .border-blue-light;
|
||||
@apply .border-primary-400;
|
||||
outline: 0;
|
||||
transition: border 500ms ease-out;
|
||||
}
|
||||
|
|
@ -53,7 +53,7 @@ input[type=number] {
|
|||
transition: all 100ms linear;
|
||||
|
||||
&:focus {
|
||||
@apply .border-blue-light;
|
||||
@apply .border-primary-400;
|
||||
}
|
||||
|
||||
&:required, &:invalid {
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ code {
|
|||
transition: border 150ms ease-in;
|
||||
|
||||
&:focus {
|
||||
@apply .border-blue-light;
|
||||
@apply .border-primary-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.nav {
|
||||
@apply .bg-blue-dark .border-b .border-t .border-blue-darkest;
|
||||
@apply .bg-primary-600 .border-b .border-t .border-primary-900;
|
||||
height: 56px;
|
||||
|
||||
& .logo {
|
||||
|
|
@ -19,12 +19,12 @@
|
|||
@apply .mr-2;
|
||||
|
||||
& > .search-input {
|
||||
@apply .text-sm .p-2 .ml-8 .rounded .border .border-blue-darker .bg-neutral-50 .text-neutral-900 .w-96;
|
||||
@apply .text-sm .p-2 .ml-8 .rounded .border .border-primary-800 .bg-neutral-50 .text-neutral-900 .w-96;
|
||||
opacity: 0.9;
|
||||
transition: ease-in-out opacity 150ms;
|
||||
|
||||
&:focus {
|
||||
@apply .border-blue-darkest;
|
||||
@apply .border-primary-900;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
}
|
||||
|
||||
& .search-results {
|
||||
@apply .absolute .bg-neutral-50 .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-primary-900 .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
|
||||
|
||||
& a {
|
||||
@apply .block .no-underline .p-2 .rounded;
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
@apply .block .flex .self-stretch .items-center .no-underline .text-neutral-100 .font-light .text-sm .px-5;
|
||||
|
||||
&:hover {
|
||||
@apply .bg-blue-dark;
|
||||
@apply .bg-primary-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
}
|
||||
|
||||
&.router-link-exact-active {
|
||||
@apply .border-blue .cursor-default;
|
||||
@apply .border-primary-500 .cursor-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,15 +16,15 @@
|
|||
@apply .bg-red-600 .border-red-800 .text-red-50;
|
||||
|
||||
& > .title {
|
||||
@apply .bg-red;
|
||||
@apply .bg-red-500;
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
@apply .bg-blue-dark .border-blue-darker .text-blue-lightest;
|
||||
@apply .bg-primary-600 .border-primary-800 .text-primary-50;
|
||||
|
||||
& > .title {
|
||||
@apply .bg-blue;
|
||||
@apply .bg-primary-500;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
* Spinner Colors
|
||||
*/
|
||||
&.blue:after, &.text-blue:after {
|
||||
@apply .border-blue;
|
||||
@apply .border-primary-500;
|
||||
}
|
||||
|
||||
&.white:after, &.text-white:after {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
{{--
|
||||
=======
|
||||
@section('above-container')
|
||||
<header class="bg-blue text-white text-xl rounded-b fixed pin-t w-full z-40 shadow-md">
|
||||
<header class="bg-primary-500 text-white text-xl rounded-b fixed pin-t w-full z-40 shadow-md">
|
||||
<div class="container h-16 mx-auto flex">
|
||||
<img class="h-12 mt-2 mr-3" src="/assets/img/pterodactyl-flat.svg">
|
||||
<div class="py-6">PTERODACTYL</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue