forked from Alex/Pterodactyl-Panel
Assorted UI tweaking
This commit is contained in:
Dane Everitt
parent
a28a9887c1
commit
89d29cf46b
@ -78,20 +78,20 @@ export default Vue.component('server', {
|
||||
</div>
|
||||
<div v-else class="container">
|
||||
<div class="my-6 flex flex-no-shrink rounded animate fadein">
|
||||
<div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs">
|
||||
<div class="sidebar flex-no-shrink w-1/3 max-w-xs">
|
||||
<div class="mr-6">
|
||||
<div class="p-6 text-center bg-white border rounded">
|
||||
<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"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 sidenav mr-6 bg-white border rounded">
|
||||
<div class="mt-6 sidenav mr-6">
|
||||
<router-link :to="{ name: 'server', params: { id: $route.params.id } }">
|
||||
<icon name="terminal" class="h-4"></icon> Console
|
||||
Console
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'server-files' }">
|
||||
<icon name="folder" class="h-4"></icon> Files
|
||||
File Manager
|
||||
</router-link>
|
||||
<!--<router-link :to="{ name: 'server-subusers' }">-->
|
||||
<!--<icon name="users" class="h-4"></icon> Subusers-->
|
||||
@ -100,7 +100,7 @@ export default Vue.component('server', {
|
||||
<!--<icon name="calendar" class="h-4"></icon> Schedules-->
|
||||
<!--</router-link>-->
|
||||
<router-link :to="{ name: 'server-databases' }">
|
||||
<icon name="database" class="h-4"></icon> Databases
|
||||
Databases
|
||||
</router-link>
|
||||
<!--<router-link :to="{ name: 'server-allocations' }">-->
|
||||
<!--<icon name="globe" class="h-4"></icon> Allocations-->
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
@include('layouts.scripts')
|
||||
</head>
|
||||
<body class="{{ $css['body'] ?? 'bg-grey-lighter' }}">
|
||||
<body class="{{ $css['body'] ?? 'bg-grey-lightest' }}">
|
||||
@section('content')
|
||||
@yield('above-container')
|
||||
<div id="pterodactyl" class="flex flex-col">
|
||||
|
||||
96
tailwind.js
96
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': [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user