1
0
mirror of https://github.com/muety/wakapi.git synced 2023-08-10 21:12:56 +03:00
wakapi/static/assets/css/app.css
Ferdinand Mütsch a27fe04919 feat: leaderboard aggregation functionality
feat: leaderboard ui design
2022-10-03 23:53:47 +02:00

144 lines
2.5 KiB
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
/* Base definition */
body {
font-family: 'Source Sans 3', 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
[v-cloak] {
display: none;
}
/* Additional classes */
.bg-gray-850 {
background-color: #242b3a;
}
.hover\:bg-gray-850:hover {
--bg-opacity: 1;
background-color: #242b3a;
}
.text-xxs {
font-size: 0.65rem;
}
.mt-14 {
margin-top: 3.5rem;
}
.text-7xl {
font-size: 4.5rem;
line-height: 1.1;
}
.text-8xl {
font-size: 5rem;
line-height: 1.1;
}
.imp\:cursor-not-allowed {
@apply cursor-not-allowed !important;
}
/* Custom classes */
.h1 {
@apply font-semibold text-3xl text-white m-0
}
.h1-subcaption {
@apply text-gray-600 text-sm;
}
.btn-default {
@apply py-2 px-4 font-semibold rounded bg-gray-800 hover:bg-gray-850 text-white text-sm;
}
.btn-disabled {
@apply py-2 px-4 font-semibold rounded bg-gray-800 text-gray-600 text-sm;
}
.btn-primary {
@apply py-2 px-4 font-semibold rounded bg-green-700 hover:bg-green-800 text-white text-sm;
}
.btn-danger {
@apply py-2 px-4 font-semibold rounded bg-red-600 hover:bg-red-700 text-white text-sm;
}
.btn-small {
@apply py-1 px-2;
}
.input-default {
@apply appearance-none bg-gray-850 focus:bg-gray-800 text-gray-300 outline-none rounded w-full py-2 px-4;
}
.select-default {
@apply input-default cursor-pointer;
}
.menu-item {
@apply flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer;
}
.submenu-item {
@apply hover:bg-gray-800 rounded p-1 text-right;
}
.chip {
@apply text-xs bg-gray-850 rounded rounded-full py-1 px-2 font-semibold inline-block mb-1;
}
.link {
@apply font-semibold text-gray-400 hover:text-gray-300;
}
.newsbox {
@apply px-4 py-2 border-2 border-red-700 bg-gray-850 rounded-md text-white border-green-700;
}
.newsbox-default {
@apply border-green-700;
}
.newsbox-warning {
@apply border-yellow-600;
}
.newsbox-danger {
@apply border-red-700;
}
.leaderboard-default {
@apply border-gray-700;
}
.leaderboard-self {
margin-left: -10px;
margin-right: -10px;
padding-left: calc(1rem + 10px);
padding-right: calc(1rem + 10px);
@apply border-green-700 bg-gray-800;
}
.leaderboard-gold {
border-color: #ffd700;
}
.leaderboard-silver {
border-color: #c0c0c0;
}
.leaderboard-bronze {
border-color: #cd7f32;
}
::-webkit-calendar-picker-indicator {
filter: invert(1);
cursor: pointer;
}