bepinbuilds/src/static/style/style.css

@tailwind base;
@tailwind components;

body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 
        "header header"
        "nav main";
    min-height: 100vh;
}

header {
    @apply bg-gray-800 text-gray-50 flex justify-between items-center select-none;
    grid-area: header;
    box-shadow: 0 -3px 10px 3px black;
    z-index: 1;
}

header > * {
    @apply p-3;
}

a.brand {
    @apply flex items-center;
}

a.brand:hover {
    @apply bg-gray-900;
}

a.brand span {
    @apply mx-2 font-sans text-sm text-gray-100;
}

a.brand img {
    @apply h-7 w-auto;
}

aside.menu {
    @apply bg-gray-700 text-white p-2 w-72 select-none;
    grid-area: nav;
    box-shadow: -3px 0 10px 2px black;
}

.menu .menu-view {
    @apply sticky top-0;
}

.menu .menu-title {
    @apply text-gray-200 uppercase text-xs font-sans py-2;
}

.menu .menu-list a {
    @apply py-1 px-2 rounded-sm text-white block;
}

.menu .menu-list a:hover {
    @apply text-gray-700 bg-white;
}

.menu .menu-list a.is-active {
    @apply bg-blue-500 text-white;
}

main {
    @apply py-8 mx-40;
    grid-area: main;
}

.content {
    @apply prose max-w-full;
}

.content.big {
    @apply prose-xl;
}

.artifacts-header {
    @apply text-4xl font-bold mt-20;
}

.artifacts-list {
    display: grid;
    grid-template-columns: max-content auto;
    gap: 0.5rem 0.5rem;
}

.artifacts-list .artifact-link {
    @apply text-white bg-blue-600 rounded-sm p-1 px-2 no-underline font-normal;
    height: min-content;
}

.artifacts-list .artifact-link:hover {
    @apply bg-blue-700;
}

.artifact-item {
    @apply bg-gray-200 my-3;
}

.artifact-item .artifact-contents {
    @apply p-4 hidden;
}

.artifact-item .artifact-contents.contents-visible {
    @apply block;
}

.artifact-details {
    @apply flex items-center bg-gray-300 select-none;
}

.artifact-details .icon-downup {
    @apply ml-auto mr-2 text-gray-500;
}

.artifact-details:hover {
    @apply cursor-pointer bg-gray-200;
}

.artifact-details .artifact-id {
    @apply p-4 bg-blue-500 font-bold text-white text-lg;
}

.artifact-details:hover .artifact-id {
    @apply bg-blue-400;
}

.artifact-details .hash-button {
    @apply mx-4 py-1 px-3 border-blue-600 rounded border font-mono text-blue-600;
}

.artifact-details .hash-button:hover {
    @apply bg-blue-600 text-white;
}

.artifact-details .build-date-text {
    @apply text-gray-600 text-lg;
}

@tailwind utilities;