css changes

main
Laurent 8 months ago
parent 82d5b4ca87
commit 3f6e23421f
  1. 246
      subscriptions/static/subscriptions/css/output.css
  2. 2
      subscriptions/templates/subscriptions/base.html
  3. 2
      subscriptions/templates/subscriptions/monthly_summary.html

@ -16,6 +16,7 @@
--color-green-200: oklch(0.925 0.084 155.995);
--color-green-600: oklch(0.627 0.194 149.214);
--color-green-800: oklch(0.448 0.119 151.328);
--color-emerald-500: oklch(0.696 0.17 162.48);
--color-blue-50: oklch(0.97 0.014 254.604);
--color-blue-100: oklch(0.932 0.032 255.585);
--color-blue-200: oklch(0.882 0.059 254.128);
@ -54,6 +55,11 @@
--font-weight-bold: 700;
--tracking-wider: 0.05em;
--radius-lg: 0.5rem;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
--default-font-feature-settings: var(--font-sans--font-feature-settings);
--default-font-variation-settings: var(
@ -210,9 +216,33 @@
}
}
@layer utilities {
.\@container {
container-type: inline-size;
}
.collapse {
visibility: collapse;
}
.visible {
visibility: visible;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
.relative {
position: relative;
}
.static {
position: static;
}
.sticky {
position: sticky;
}
.isolate {
isolation: isolate;
}
.container {
width: 100%;
@media (width >= 40rem) {
@ -252,18 +282,54 @@
.block {
display: block;
}
.contents {
display: contents;
}
.flex {
display: flex;
}
.flow-root {
display: flow-root;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.inline {
display: inline;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.table-caption {
display: table-caption;
}
.table-cell {
display: table-cell;
}
.table-column {
display: table-column;
}
.table-column-group {
display: table-column-group;
}
.table-footer-group {
display: table-footer-group;
}
.table-header-group {
display: table-header-group;
}
.table-row {
display: table-row;
}
.table-row-group {
display: table-row-group;
}
.h-5 {
height: calc(var(--spacing) * 5);
}
@ -282,9 +348,30 @@
.min-w-full {
min-width: 100%;
}
.flex-shrink {
flex-shrink: 1;
}
.shrink {
flex-shrink: 1;
}
.flex-grow {
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.transform {
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
}
.resize {
resize: both;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
@ -315,6 +402,12 @@
border-color: var(--color-gray-200);
}
}
.self-end {
align-self: flex-end;
}
.self-start {
align-self: flex-start;
}
.overflow-hidden {
overflow: hidden;
}
@ -366,11 +459,8 @@
.bg-blue-100 {
background-color: var(--color-blue-100);
}
.bg-blue-500 {
background-color: var(--color-blue-500);
}
.bg-blue-600 {
background-color: var(--color-blue-600);
.bg-emerald-500 {
background-color: var(--color-emerald-500);
}
.bg-gray-50 {
background-color: var(--color-gray-50);
@ -441,6 +531,9 @@
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
.text-left {
text-align: left;
}
@ -488,6 +581,9 @@
--tw-tracking: var(--tracking-wider);
letter-spacing: var(--tracking-wider);
}
.break-all {
word-break: break-all;
}
.whitespace-nowrap {
white-space: nowrap;
}
@ -527,16 +623,86 @@
.text-white {
color: var(--color-white);
}
.capitalize {
text-transform: capitalize;
}
.lowercase {
text-transform: lowercase;
}
.uppercase {
text-transform: uppercase;
}
.italic {
font-style: italic;
}
.line-through {
text-decoration-line: line-through;
}
.overline {
text-decoration-line: overline;
}
.underline {
text-decoration-line: underline;
}
.shadow {
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.drop-shadow {
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.invert {
--tw-invert: invert(100%);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.sepia {
--tw-sepia: sepia(100%);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.filter {
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.backdrop-filter {
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.ease-in {
--tw-ease: var(--ease-in);
transition-timing-function: var(--ease-in);
}
.ease-in-out {
--tw-ease: var(--ease-in-out);
transition-timing-function: var(--ease-in-out);
}
.ease-out {
--tw-ease: var(--ease-out);
transition-timing-function: var(--ease-out);
}
.\[keywords\:node-addon-api\] {
keywords: node-addon-api;
}
.hover\:bg-gray-50 {
&:hover {
@media (hover: hover) {
@ -578,6 +744,31 @@
}
}
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
initial-value: rotateX(0);
}
@property --tw-rotate-y {
syntax: "*";
inherits: false;
initial-value: rotateY(0);
}
@property --tw-rotate-z {
syntax: "*";
inherits: false;
initial-value: rotateZ(0);
}
@property --tw-skew-x {
syntax: "*";
inherits: false;
initial-value: skewX(0);
}
@property --tw-skew-y {
syntax: "*";
inherits: false;
initial-value: skewY(0);
}
@property --tw-space-x-reverse {
syntax: "*";
inherits: false;
@ -660,6 +851,11 @@
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-outline-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-blur {
syntax: "*";
inherits: false;
@ -700,3 +896,43 @@
syntax: "*";
inherits: false;
}
@property --tw-backdrop-blur {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-brightness {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-contrast {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-grayscale {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-hue-rotate {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-invert {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-opacity {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-saturate {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-sepia {
syntax: "*";
inherits: false;
}
@property --tw-ease {
syntax: "*";
inherits: false;
}

@ -11,7 +11,7 @@
</head>
<body class="bg-gray-100 min-h-screen">
<header class="bg-blue-600 text-white shadow-md">
<header class="bg-emerald-500 text-white shadow-md">
<div class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<a href="/" class="text-2xl font-bold">Poker Analytics</a>

@ -10,7 +10,7 @@
{% if monthly_offers %}
{% for month_data in monthly_offers %}
<div class="bg-white rounded-lg shadow-md mb-6 overflow-hidden">
<div class="bg-blue-500 text-white px-6 py-3">
<div class="bg-emerald-500 text-white px-6 py-3">
<h3 class="text-xl font-semibold">{{ month_data.month|date:"F Y" }}</h3>
</div>
<div class="p-4">

Loading…
Cancel
Save