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; } } }