StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Start working on a better design for the server boxes on the dashboard

Browse source
This commit is contained in:
Dane Everitt 2018-09-05 22:55:59 -07:00
parent 5c25edfdd4
commit 395a2860e7
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
4 changed files with 67 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

4
resources/assets/styles/components/animations.css
View file

@ -4,6 +4,10 @@
}
}
.animated-fade-in {
animation: fadein 500ms;
}
.fade-enter-active {
animation: fadein 500ms;
}

37
resources/assets/styles/components/miscellaneous.css
View file

@ -52,27 +52,48 @@ code {
/**
* Flex boxes for server listing on user dashboard.
*/
.server-box {
@apply .block .pb-4 .no-underline;
.server-card {
@apply .block .no-underline .shadow;
@screen smx {
@apply .w-full;
}
@screen md {
@apply .w-1/3 .pr-4;
@apply .w-1/3 .mr-4;
&:nth-of-type(3n) {
padding-right: 0;
@apply .mr-0;
}
}
& > .content {
@apply .border .border-grey-light .bg-white .rounded .p-4 .justify-between .leading-normal .no-underline .block .text-black;
& .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;
}
&:visited {
@apply .text-black;
& .pillbox {
@apply .rounded-full .px-2 .py-1 .text-white .font-medium .leading-none .text-xs;
}
& a, & a:visited {
@apply .no-underline .text-grey-darkest;
}
& > .content {
@apply .border .border-grey-light .bg-white .no-underline .block .text-black .p-4;
border-top: 4px solid config('colors.grey-light') !important;
&.is-online {
border-top-color: config('colors.green') !important;
}
&.is-offline {
border-top-color: config('colors.red') !important;
}
}
& > .footer {
@apply .border .border-grey-light .border-t-0 .bg-grey-lightest;
}
}