misc_pterodactyl-panel/resources/assets/styles/components/miscellaneous.css
2019-02-09 17:07:11 -08:00

120 lines
2.6 KiB
CSS

code {
@apply .font-mono .px-2 .py-1;
background-color: #eef1f6;
color: #596981;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, .1);
display: inline-block;
}
/**
* Indicators for server online status.
*/
.indicator {
@apply .bg-neutral-800 .border .border-primary-500;
border-radius: 50%;
width: 16px;
height: 16px;
&.online {
@apply .bg-green-600 .border-green-500;
animation: onlineblink 2s infinite alternate;
}
&.offline {
@apply .bg-green-600 .border-red-500;
animation: offlineblink 2s infinite alternate;
}
}
/**
* Usage indicator labels for the server listing.
*/
.usage {
@apply .flex-1 .text-center .relative;
& > .indicator-title {
@apply .text-xs .uppercase .font-hairline .bg-white .absolute .text-primary-500;
margin-top:-9px;
padding: 0 8px;
left: 50%;
transform: translate(-50%, 0);
}
}
/**
* Styling for elements that contain the core page content.
*/
.content-box {
@apply .bg-white .p-6 .rounded .shadow .border .border-neutral-100;
}
/**
* Flex boxes for server listing on user dashboard.
*/
.server-card-container {
@apply .mb-4 .w-full;
@screen md {
@apply .w-1/2 .pr-4;
&:nth-of-type(2n) {
@apply .pr-0;
}
}
@screen lg {
@apply .w-1/3 .pr-4;
&:nth-of-type(2n) {
@apply .pr-4;
}
&:nth-of-type(3n) {
@apply .pr-0;
}
}
& > div {
@apply .flex .flex-col .h-full;
transition: box-shadow 150ms ease-in;
&:hover {
@apply .shadow-md;
}
}
& > div > .server-card {
@apply .flex .flex-1 .flex-col .p-4 .border .border-t-4 .border-neutral-100 .bg-white;
transition: all 100ms ease-in;
& .identifier-icon {
@apply .select-none .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center;
}
& a, & a:visited {
@apply .no-underline .text-neutral-800;
}
}
& > div > .footer {
@apply .border .border-neutral-100 .border-t-0 .bg-neutral-50 .shadow-inner;
}
}
.pillbox {
@apply .rounded-full .px-2 .py-1 .text-white .font-medium .leading-none .text-xs;
}
.server-search {
@apply .w-full .my-4;
& > input[type="text"] {
@apply .w-full .p-4 .rounded .border .border-neutral-200 .text-neutral-500;
transition: border 150ms ease-in;
&:focus {
@apply .border-primary-500;
}
}
}