From a9fda520653a37e35eb198e42d50ec82c949582e Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Sat, 9 Feb 2019 15:17:38 -0800 Subject: [PATCH] Begin fixing design to match new colors --- .../scripts/components/core/Navigation.ts | 8 +- .../assets/styles/components/buttons.css | 69 ---------------- resources/assets/styles/components/forms.css | 80 +++++++++++++++++-- .../assets/styles/components/navigation.css | 22 +++-- resources/assets/styles/main.css | 1 - .../pterodactyl/templates/base/core.blade.php | 51 +----------- 6 files changed, 90 insertions(+), 141 deletions(-) delete mode 100644 resources/assets/styles/components/buttons.css diff --git a/resources/assets/scripts/components/core/Navigation.ts b/resources/assets/scripts/components/core/Navigation.ts index c2fffc2cb..97628cb34 100644 --- a/resources/assets/scripts/components/core/Navigation.ts +++ b/resources/assets/scripts/components/core/Navigation.ts @@ -98,10 +98,10 @@ export default Vue.component('navigation', { />
- +
- Loading... + Loading...
@@ -114,10 +114,10 @@ export default Vue.component('navigation', {
{{ server.name }}
- {{ server.description }} + {{ server.description }}
- {{ server.node }} + {{ server.node }}
diff --git a/resources/assets/styles/components/buttons.css b/resources/assets/styles/components/buttons.css deleted file mode 100644 index edd3a4f08..000000000 --- a/resources/assets/styles/components/buttons.css +++ /dev/null @@ -1,69 +0,0 @@ -.btn { - @apply .rounded .p-2; - transition: all 100ms ease-in-out; - - /** - * Button Colors - */ - &.btn-primary { - @apply .bg-primary-500 .border-primary-600 .border .text-white; - - &:hover:enabled { - @apply .bg-primary-600 .border-primary-800; - } - } - - &.btn-green { - @apply .bg-green-500 .border-green-600 .border .text-white; - - &:hover:enabled { - @apply .bg-green-600 .border-green-800; - } - } - - &.btn-red { - &:not(.btn-secondary) { - @apply .bg-red-500 .border-red-600 .border .text-white; - } - - &:hover:enabled { - @apply .bg-red-600 .border-red-800; - } - } - - &.btn-secondary { - @apply .border .border-neutral-400 .text-neutral-600; - - &:hover:enabled { - @apply .border-neutral-500 .text-neutral-800; - } - - &.btn-red:hover:enabled { - @apply .bg-red-600 .border-red-800 .text-white; - } - } - - /** - * Button Sizes - */ - &.btn-jumbo { - @apply .p-4 .w-full .uppercase .tracking-wide .text-sm; - } - - &.btn-lg { - @apply .p-4 .uppercase .tracking-wide .text-sm; - } - - &.btn-sm { - @apply .px-6 .py-3 .uppercase .tracking-wide .text-sm; - } - - &.btn-xs { - @apply .py-2 .px-2 .uppercase .text-xs; - } - - &:disabled, &.disabled { - opacity: 0.55; - cursor: default; - } -} diff --git a/resources/assets/styles/components/forms.css b/resources/assets/styles/components/forms.css index 575ddc86e..81dcbd24f 100644 --- a/resources/assets/styles/components/forms.css +++ b/resources/assets/styles/components/forms.css @@ -21,7 +21,7 @@ input[type=number] { } .input-open > .input { - @apply .appearance-none .block .w-full .text-neutral-800 .border-b-2 .border-neutral-400 .py-3 .mb-3; + @apply .appearance-none .block .w-full .text-neutral-800 .border-b-2 .border-neutral-200 .py-3 .mb-3; &:focus { @apply .border-primary-400; @@ -49,8 +49,8 @@ input[type=number] { * Styling for other forms throughout the Panel. */ .input:not(.open-label) { - @apply .appearance-none .p-3 .rounded .border .text-neutral-800 .w-full; - transition: all 100ms linear; + @apply .appearance-none .p-3 .rounded .border .border-neutral-200 .text-neutral-800 .w-full; + transition: border 150ms linear; &:focus { @apply .border-primary-400; @@ -66,13 +66,83 @@ input[type=number] { } .input-label { - @apply .block .uppercase .tracking-wide .text-neutral-900 .text-xs .font-bold .mb-2; + @apply .block .uppercase .tracking-wide .text-neutral-800 .text-xs .font-bold .mb-2; } .input-help { - @apply .text-xs .text-neutral-500 .pt-2; + @apply .text-xs .text-neutral-400 .pt-2; &.error { @apply .text-red-600; } } + +.btn { + @apply .rounded .p-2; + transition: all 150ms linear; + + /** + * Button Colors + */ + &.btn-primary { + @apply .bg-primary-500 .border-primary-600 .border .text-white; + + &:hover:enabled { + @apply .bg-primary-600 .border-primary-800; + } + } + + &.btn-green { + @apply .bg-green-500 .border-green-600 .border .text-white; + + &:hover:enabled { + @apply .bg-green-600 .border-green-800; + } + } + + &.btn-red { + &:not(.btn-secondary) { + @apply .bg-red-500 .border-red-600 .border .text-white; + } + + &:hover:enabled { + @apply .bg-red-600 .border-red-800; + } + } + + &.btn-secondary { + @apply .border .border-neutral-400 .text-neutral-600; + + &:hover:enabled { + @apply .border-neutral-500 .text-neutral-800; + } + + &.btn-red:hover:enabled { + @apply .bg-red-600 .border-red-800 .text-white; + } + } + + /** + * Button Sizes + */ + &.btn-jumbo { + @apply .p-4 .w-full .uppercase .tracking-wide .text-sm; + } + + &.btn-lg { + @apply .p-4 .uppercase .tracking-wide .text-sm; + } + + &.btn-sm { + @apply .px-6 .py-3 .uppercase .tracking-wide .text-sm; + } + + &.btn-xs { + @apply .py-2 .px-2 .uppercase .text-xs; + } + + &:disabled, &.disabled { + opacity: 0.55; + cursor: default; + } +} diff --git a/resources/assets/styles/components/navigation.css b/resources/assets/styles/components/navigation.css index 908629e02..56909042f 100644 --- a/resources/assets/styles/components/navigation.css +++ b/resources/assets/styles/components/navigation.css @@ -1,5 +1,5 @@ .nav { - @apply .bg-primary-600 .border-b .border-t .border-primary-900; + @apply .bg-primary-600 .border-b .border-t .border-primary-700; height: 56px; & .logo { @@ -19,29 +19,26 @@ @apply .mr-2; & > .search-input { - @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; + @apply .text-sm .p-2 .ml-8 .rounded .border .border-primary-600 .bg-white .text-neutral-900 .w-96; + transition: border 150ms ease-in; &:focus { - @apply .border-primary-900; - opacity: 1; + @apply .border-primary-700; } &.has-search-results { @apply .border-b-0 .rounded-b-none; - opacity: 1 !important; } } & .search-results { - @apply .absolute .bg-neutral-50 .border .border-primary-900 .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96; + @apply .absolute .bg-white .border .border-primary-700 .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-neutral-100; + &:not(.no-hover):hover { + @apply .bg-neutral-50; } } } @@ -51,10 +48,11 @@ @apply .flex .h-full .items-center; & > a { - @apply .block .flex .self-stretch .items-center .no-underline .text-neutral-100 .font-light .text-sm .px-5; + transition: background-color 150ms linear; + @apply .block .flex .self-stretch .items-center .no-underline .text-white .font-light .text-sm .px-5; &:hover { - @apply .bg-primary-600; + @apply .bg-primary-700; } } } diff --git a/resources/assets/styles/main.css b/resources/assets/styles/main.css index 9b34b7e6a..01a28e8dc 100644 --- a/resources/assets/styles/main.css +++ b/resources/assets/styles/main.css @@ -11,7 +11,6 @@ */ @import "components/animations.css"; @import "components/authentication.css"; -@import "components/buttons.css"; @import "components/forms.css"; @import "components/miscellaneous.css"; @import "components/modal.css"; diff --git a/resources/themes/pterodactyl/templates/base/core.blade.php b/resources/themes/pterodactyl/templates/base/core.blade.php index ce38ac403..4687fa06e 100644 --- a/resources/themes/pterodactyl/templates/base/core.blade.php +++ b/resources/themes/pterodactyl/templates/base/core.blade.php @@ -1,54 +1,5 @@ @extends('templates/wrapper') -{{-- -======= -@section('above-container') -
-
- -
PTERODACTYL
-
- -
-
-
- {{--
- -
- -
-
-@endsection ---}} - @section('container') @endsection @@ -56,7 +7,7 @@ @section('below-container')
-

+

{!! trans('strings.copyright', ['year' => date('Y')]) !!}