mirror of
https://github.com/pterodactyl/panel.git
synced 2024-11-23 09:32:29 +01:00
Begin fixing design to match new colors
This commit is contained in:
Dane Everitt
parent
dfa175326c
commit
a9fda52065
@ -98,10 +98,10 @@ export default Vue.component('navigation', {
|
||||
/>
|
||||
<div class="search-results select-none" :class="{ 'hidden': (servers.length === 0 && !loadingResults) || !searchActive || searchTerm.length < 3 }">
|
||||
<div v-if="loadingResults">
|
||||
<a href="#">
|
||||
<a href="#" class="no-hover cursor-default">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<span class="text-sm text-neutral-800">Loading...</span>
|
||||
<span class="text-sm text-neutral-500">Loading...</span>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<span class="spinner spinner-relative"></span>
|
||||
@ -114,10 +114,10 @@ export default Vue.component('navigation', {
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<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>
|
||||
<span class="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>
|
||||
<span class="pillbox bg-neutral-900">{{ server.node }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -1,54 +1,5 @@
|
||||
@extends('templates/wrapper')
|
||||
|
||||
{{--
|
||||
=======
|
||||
@section('above-container')
|
||||
<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>
|
||||
<div class="flex-grow"></div>
|
||||
<nav class="nav text-lg">
|
||||
<router-link to="/"><font-awesome-icon class="mr-2" fixed-with icon="server"></font-awesome-icon>Servers</router-link>
|
||||
<a href="#"><font-awesome-icon class="mr-2" fixed-with icon="cogs"></font-awesome-icon>Admin</a>
|
||||
<a href="#"><font-awesome-icon class="mr-2" fixed-with icon="user"></font-awesome-icon>schrej</a>
|
||||
<a href="/auth/logout"><font-awesome-icon fixed-with icon="sign-out-alt"></font-awesome-icon></a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="h-16 mb-6"></div>
|
||||
{{--<div class="nav">
|
||||
<div class="logo">
|
||||
Pterodactyl
|
||||
</div>
|
||||
<div class="menu">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link to="/">
|
||||
<span>Your Servers</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span>Admin</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span>dane</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ route('auth.logout') }}">
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
--}}
|
||||
|
||||
@section('container')
|
||||
<router-view></router-view>
|
||||
@endsection
|
||||
@ -56,7 +7,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-neutral-600 text-xs">
|
||||
<p class="text-center sm:text-right text-neutral-300 text-xs">
|
||||
{!! trans('strings.copyright', ['year' => date('Y')]) !!}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user