misc_pterodactyl-panel/resources/assets/styles/components/miscellaneous.css

103 lines
2.2 KiB
CSS
Raw Normal View History

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-grey-darker .border .border-grey;
border-radius: 50%;
width: 16px;
height: 16px;
&.online {
@apply .bg-green-dark .border-green;
animation: onlineblink 2s infinite alternate;
}
&.offline {
@apply .bg-green-dark .border-red;
animation: offlineblink 2s infinite alternate;
}
}
2018-05-27 05:09:29 +00:00
/**
* 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-grey;
margin-top:-9px;
padding: 0 8px;
left: 50%;
transform: translate(-50%, 0);
}
}
2018-06-16 23:43:52 +00:00
/**
* Styling for elements that contain the core page content.
*/
.content-box {
@apply .bg-white .p-6 .border .border-grey-light .rounded;
}
2018-05-27 05:09:29 +00:00
/**
* Flex boxes for server listing on user dashboard.
*/
.server-card {
@apply .block .no-underline .shadow;
2018-05-27 05:09:29 +00:00
@screen smx {
@apply .w-full;
2018-05-27 05:09:29 +00:00
}
@screen md {
@apply .w-1/3 .mr-4;
2018-05-27 05:09:29 +00:00
&:nth-of-type(3n) {
@apply .mr-0;
2018-05-27 05:09:29 +00:00
}
}
& .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;
}
& a, & a:visited {
@apply .no-underline .text-grey-darkest;
}
2018-05-27 05:09:29 +00:00
& > .content {
@apply .border .border-grey-light .bg-white .no-underline .block .text-black .p-4;
border-top: 4px solid config('colors.grey-light') !important;
2018-05-27 05:09:29 +00:00
}
& > .footer {
@apply .border .border-grey-light .border-t-0 .bg-grey-lightest;
}
2018-05-27 05:09:29 +00:00
}
2018-05-27 05:19:33 +00:00
2018-09-12 04:25:02 +00:00
.pillbox {
@apply .rounded-full .px-2 .py-1 .text-white .font-medium .leading-none .text-xs;
}
2018-05-27 05:19:33 +00:00
.server-search {
@apply .w-full .my-4;
& > input[type="text"] {
@apply .w-full .p-3 .rounded .border .text-grey-darker;
&:focus {
@apply .border-blue-light;
}
}
}