From 89d29cf46b98af64715953d45172c6d9747e7ce0 Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Sun, 3 Feb 2019 17:27:19 -0800 Subject: [PATCH] Assorted UI tweaking --- .../scripts/components/server/Server.ts | 12 +-- .../styles/components/miscellaneous.css | 4 +- .../assets/styles/components/navigation.css | 16 ++++ .../pterodactyl/templates/wrapper.blade.php | 2 +- tailwind.js | 96 ++++++++----------- 5 files changed, 67 insertions(+), 63 deletions(-) diff --git a/resources/assets/scripts/components/server/Server.ts b/resources/assets/scripts/components/server/Server.ts index d5a9b4e43..9cfdcc0cc 100644 --- a/resources/assets/scripts/components/server/Server.ts +++ b/resources/assets/scripts/components/server/Server.ts @@ -78,20 +78,20 @@ export default Vue.component('server', {
-
+
-
+

{{server.name}}

{{server.node}}
-
+
- Console + Console - Files + File Manager @@ -100,7 +100,7 @@ export default Vue.component('server', { - Databases + Databases diff --git a/resources/assets/styles/components/miscellaneous.css b/resources/assets/styles/components/miscellaneous.css index 9b1ac8835..34795a6b4 100644 --- a/resources/assets/styles/components/miscellaneous.css +++ b/resources/assets/styles/components/miscellaneous.css @@ -46,7 +46,7 @@ code { * Styling for elements that contain the core page content. */ .content-box { - @apply .bg-white .p-6 .border .border-grey-light .rounded; + @apply .bg-white .p-6 .rounded .shadow-md; } /** @@ -82,6 +82,7 @@ code { .server-card { @apply .block .no-underline .shadow; + transition: all 100ms ease-in; & .identifier-icon { @apply .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center; @@ -110,6 +111,7 @@ code { & > input[type="text"] { @apply .w-full .p-3 .rounded .border .text-grey-darker; + transition: border 150ms ease-in; &:focus { @apply .border-blue-light; diff --git a/resources/assets/styles/components/navigation.css b/resources/assets/styles/components/navigation.css index d8ebc9be5..93214f74a 100644 --- a/resources/assets/styles/components/navigation.css +++ b/resources/assets/styles/components/navigation.css @@ -60,6 +60,21 @@ } } +.sidenav { + a { + @apply .block .no-underline .text-grey-darker .py-2; + transition: color 75ms ease-in; + + &:hover { + @apply .text-grey; + } + + &.router-link-exact-active { + @apply .font-medium; + } + } +} +/* .sidenav { @apply .py-2; @@ -78,3 +93,4 @@ } } } +*/ diff --git a/resources/themes/pterodactyl/templates/wrapper.blade.php b/resources/themes/pterodactyl/templates/wrapper.blade.php index b375b3ef1..503840932 100644 --- a/resources/themes/pterodactyl/templates/wrapper.blade.php +++ b/resources/themes/pterodactyl/templates/wrapper.blade.php @@ -32,7 +32,7 @@ @include('layouts.scripts') - + @section('content') @yield('above-container')
diff --git a/tailwind.js b/tailwind.js index 8bfd9017c..5757ce9e7 100644 --- a/tailwind.js +++ b/tailwind.js @@ -45,31 +45,33 @@ View the full documentation at https://tailwindcss.com. let colors = { 'transparent': 'transparent', - 'black': '#22292f', - 'grey-darkest': '#3d4852', - 'grey-darker': '#606f7b', - 'grey-dark': '#8795a1', - 'grey': '#b8c2cc', - 'grey-light': '#dae1e7', - 'grey-lighter': '#f1f5f8', - 'grey-lightest': '#f8fafc', + 'black': '#1F2933', 'white': '#ffffff', + 'basically-white': '#fafafb', - 'red-lightest': '#f9eded', - 'red-lighter': '#e7b6b6', - 'red-light': '#d58080', - 'red': '#c34949', - 'red-dark': '#b04242', - 'red-darker': '#752c2c', - 'red-darkest': '#3b1616', + 'grey-lightest': '#F5F7FA', + 'grey-lighter': '#E4E7EB', + 'grey-light': '#CBD2D9', + 'grey': '#9AA5B1', + 'grey-dark': '#52606D', + 'grey-darker': '#3E4C59', + 'grey-darkest': '#323F4B', - 'orange-lightest': '#fcf4eb', - 'orange-lighter': '#f4d4ae', - 'orange-light': '#ecb371', - 'orange': '#e49334', - 'orange-dark': '#cd842f', - 'orange-darker': '#89581f', - 'orange-darkest': '#442c10', + 'red-lightest': '#FFE3E3', + 'red-lighter': '#FFBDBD', + 'red-light': '#F86A6A', + 'red': '#CF1124', + 'red-dark': '#AB091E', + 'red-darker': '#8A041A', + 'red-darkest': '#610316', + + 'orange-lightest': '#FFE8D9', + 'orange-lighter': '#FFD0B5', + 'orange-light': '#F9703E', + 'orange': '#DE3A11', + 'orange-dark': '#C52707', + 'orange-darker': '#AD1D07', + 'orange-darkest': '#841003', 'yellow-lightest': '#fbfae9', 'yellow-lighter': '#ede9a7', @@ -87,37 +89,21 @@ let colors = { 'green-darker': '#34681f', 'green-darkest': '#1a3410', - 'teal-lightest': '#ecf7f5', - 'teal-lighter': '#b3ded7', - 'teal-light': '#7ac5ba', - 'teal': '#41ac9c', - 'teal-dark': '#3b9b8c', - 'teal-darker': '#27675e', - 'teal-darkest': '#14342f', + 'blue-lightest': '#E6F6FF', + 'blue-lighter': '#BAE3FF', + 'blue-light': '#2186EB', + 'blue': '#0552B5', + 'blue-dark': '#03449E', + 'blue-darker': '#01337D', + 'blue-darkest': '#002159', - 'blue-lightest': '#e7eef5', - 'blue-lighter': '#9fbad9', - 'blue-light': '#5886bc', - 'blue': '#10529f', - 'blue-dark': '#0e4a8f', - 'blue-darker': '#0a315f', - 'blue-darkest': '#051930', - - 'indigo-lightest': '#f0f1fa', - 'indigo-lighter': '#c1c7eb', - 'indigo-light': '#939edc', - 'indigo': '#6574cd', - 'indigo-dark': '#5b68b9', - 'indigo-darker': '#3d467b', - 'indigo-darkest': '#1e233e', - - 'purple-lightest': '#f6eaf5', - 'purple-lighter': '#dcaad8', - 'purple-light': '#c16bba', - 'purple': '#a72b9d', - 'purple-dark': '#96278d', - 'purple-darker': '#641a5e', - 'purple-darkest': '#320d2f', + 'cyan-lightest': '#E1FCF8', + 'cyan-lighter': '#C1FEF6', + 'cyan-light': '#62F4EB', + 'cyan': '#0FB5BA', + 'cyan-dark': '#099AA4', + 'cyan-darker': '#07818F', + 'cyan-darkest': '#05606E', }; module.exports = { @@ -188,11 +174,11 @@ module.exports = { fonts: { 'sans': [ - '"Source Sans Pro"', - 'system-ui', - 'BlinkMacSystemFont', '-apple-system', + 'BlinkMacSystemFont', '"Helvetica Neue"', + '"Roboto"', + 'system-ui', 'sans-serif', ], 'serif': [