efim/Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(14): styled 3 controls, with css vars

Browse Source 
for size, colors, position, this should be what i need i hope
This commit is contained in:
efim
2023-07-01 05:38:59 +00:00
parent 364d8a737a
commit de431a4bc0
3 changed files with 89 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
14-rock-paper-scissors/src/main/resources/public/output.css
View File

@@ -539,11 +539,6 @@ video {
right: 0px;
}
.inset-y-0 {
top: 0px;
bottom: 0px;
}
.bottom-0 {
bottom: 0px;
}
@@ -556,26 +551,18 @@ video {
left: 50%;
}
.left-28 {
left: 7rem;
}
.right-20 {
right: 5rem;
}
.top-20 {
top: 5rem;
}
.top-28 {
top: 7rem;
.left-\[var\(--left-offset\)\] {
left: var(--left-offset);
}
.top-1\/2 {
top: 50%;
}
.top-\[var\(--top-offset\)\] {
top: var(--top-offset);
}
.mr-3 {
margin-right: 0.75rem;
}
@@ -588,12 +575,8 @@ video {
display: flex;
}
.grid {
display: grid;
}
.h-32 {
height: 8rem;
.h-3\/4 {
height: 75%;
}
.h-\[100px\] {
@@ -608,30 +591,34 @@ video {
height: 70px;
}
.h-\[var\(--diameter\)\] {
height: var(--diameter);
}
.h-screen {
height: 100vh;
}
.h-28 {
height: 7rem;
}
.h-24 {
height: 6rem;
.w-1\/3 {
width: 33.333333%;
}
.w-10\/12 {
width: 83.333333%;
}
.w-32 {
width: 8rem;
.w-3\/4 {
width: 75%;
}
.w-\[80px\] {
width: 80px;
}
.w-\[var\(--diameter\)\] {
width: var(--diameter);
}
.w-full {
width: 100%;
}
@@ -640,14 +627,6 @@ video {
width: 100vw;
}
.w-28 {
width: 7rem;
}
.w-24 {
width: 6rem;
}
.grow {
flex-grow: 1;
}
@@ -670,10 +649,6 @@ video {
flex-direction: column;
}
.place-items-center {
place-items: center;
}
.items-center {
align-items: center;
}
@@ -712,21 +687,9 @@ video {
background-image: url('images/bg-triangle.svg');
}
.from-radial-gradient-top {
--tw-gradient-from: hsl(214, 47%, 23%) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(214 47% 23% / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-paper-brighter {
--tw-gradient-from: hsl(230, 89%, 65%) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(230 89% 65% / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-200 {
--tw-gradient-from: #e5e7eb var(--tw-gradient-from-position);
--tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position);
.from-\[var\(--bg-bright\)\] {
--tw-gradient-from: var(--bg-bright) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
@@ -736,22 +699,24 @@ video {
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-radial-gradient-bottom {
--tw-gradient-to: hsl(237, 49%, 15%) var(--tw-gradient-to-position);
.from-radial-gradient-top {
--tw-gradient-from: hsl(214, 47%, 23%) var(--tw-gradient-from-position);
--tw-gradient-to: hsl(214 47% 23% / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-paper-darker {
--tw-gradient-to: hsl(230, 89%, 62%) var(--tw-gradient-to-position);
}
.to-gray-50 {
--tw-gradient-to: #f9fafb var(--tw-gradient-to-position);
.to-\[var\(--bg-dark\)\] {
--tw-gradient-to: var(--bg-dark) var(--tw-gradient-to-position);
}
.to-gray-100 {
--tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position);
}
.to-radial-gradient-bottom {
--tw-gradient-to: hsl(237, 49%, 15%) var(--tw-gradient-to-position);
}
.bg-50\% {
background-size: 50%;
}