intervle - resources/css/app.css
@import 'tailwindcss';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
@theme {
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
}
:root {
--font-size-standard: 20px;
--page-width: 1000px;
--event-container-width: 740px;
--border-radius-standard: 4px;
--background-standard: #e0e0e0;
--background-backdrop: #bebebe;
--text-primary: #000000;
--text-secondary: #4b4b4b;
--background-card-control-idle: #eeeeee;
--background-card-control-idle: linear-gradient(0deg, rgb(203, 203, 203) 0%, rgb(187, 187, 187) 50%, rgb(213, 213, 213) 51%, rgb(222, 222, 222) 100%);
--background-card-control-hover: #f8f8f8;
--background-card-control-click: #c2c2c2;
--background-event-card-idle: #DDDDDD;
--background-event-card-idle: linear-gradient(0deg,rgba(221, 221, 221, 1) 0%, rgba(220, 220, 220, 1) 50%, rgba(230, 230, 230, 1) 51%, rgba(250, 250, 250, 1) 100%);
--background-event-card-correct: #acecae;
--background-event-card-incorrect: #ecacae;
--border-event-card-idle: 1px solid #969696;
--border-event-card-hover: 1px solid #797979;
--border-event-card-click: 1px solid #575757;
--border-event-card-correct: 1px solid #509d54;
--border-event-card-incorrect: 1px solid #a64f51;
--box-shadow-standard: 2px 2px 4px rgba(0, 0, 0, 0.5);
--box-shadow-shimmer: inset 0 0 2px 1px rgb(255, 255, 255);
}
html {
font-size: var(--font-size-standard);
background: var(--background-backdrop);
color: var(--text-primary);
}
body {
background: var(--background-standard);
max-width: var(--page-width);
box-shadow: var(--box-shadow-standard);
text-align: center;
margin: 64px auto;
border-radius: var(--border-radius-standard);
}
header {
padding: 12px;
}
hr {
border-color: var(--text-secondary);
width: 90%;
margin: auto;
}
button, select {
margin: 16px;
padding: 4px 32px;
background: var(--background-event-card-idle);
outline: var(--border-event-card-idle);
border-radius: var(--border-radius-standard);
box-shadow: var(--box-shadow-standard);
}
button:hover {
background: var(--background-card-control-hover);
box-shadow: var(--box-shadow-standard), var(--box-shadow-shimmer);
}
button:active {
background: var(--background-card-control-click);
box-shadow: inset var(--box-shadow-standard);
}
.hidden {
transition: 0.2s ease;
display: none;
opacity: 0;
}