eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Add TailwindCSS (#1252)

Browse Source 
* Setup TailwindCSS

* Fully setup configuration

* Refactor some tailwind variables
This commit is contained in:
Evan Song
2024-07-06 20:57:32 -07:00
committed by GitHub
parent 0f2ddb452c
commit abec2e48d4
176 changed files with 7905 additions and 7433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/frontend/src/assets/styles/components.scss
View File

@@ -456,7 +456,7 @@
}
&:disabled,
&[disabled='true'] {
&[disabled="true"] {
cursor: not-allowed;
filter: grayscale(50%);
opacity: 0.5;
@@ -502,7 +502,7 @@ tr.button-transparent {
}
&:disabled > *,
&[disabled='true'] > * {
&[disabled="true"] > * {
cursor: not-allowed;
filter: grayscale(50%);
opacity: 0.5;
@@ -511,7 +511,10 @@ tr.button-transparent {
}
.button-within {
transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
transition:
opacity 0.5s ease-in-out,
filter 0.2s ease-in-out,
transform 0.05s ease-in-out,
outline 0.2s ease-in-out;
&:focus-visible:not(&.disabled),
@@ -530,7 +533,7 @@ tr.button-transparent {
box-shadow: none;
&disabled,
&[disabled='true'] {
&[disabled="true"] {
cursor: not-allowed;
box-shadow: none;
}
@@ -544,7 +547,9 @@ tr.button-transparent {
color: var(--text-color);
background-color: var(--background-color);
box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
box-shadow:
var(--shadow-inset-sm),
0 0 0 0 transparent;
border-radius: var(--size-rounded-sm);
}
@@ -560,7 +565,10 @@ tr.button-transparent {
cursor: pointer;
width: fit-content;
height: fit-content;
transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, scale 0.05s ease-in-out,
transition:
opacity 0.5s ease-in-out,
filter 0.2s ease-in-out,
scale 0.05s ease-in-out,
outline 0.2s ease-in-out;
text-decoration: none;
@@ -603,7 +611,9 @@ tr.button-transparent {
border-radius: var(--size-rounded-sm);
color: var(--text-color);
background-color: var(--background-color);
box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
box-shadow:
var(--shadow-inset-sm),
0 0 0 0 transparent;
svg {
min-width: 1.25rem;
@@ -826,7 +836,7 @@ tr.button-transparent {
background: var(--color-button-bg);
&:after {
content: '';
content: "";
position: absolute;
top: 7px;
left: 7px;
@@ -1065,7 +1075,9 @@ button {
background: var(--color-button-bg);
width: fit-content;
border-radius: var(--size-rounded-sm);
box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
box-shadow:
var(--shadow-inset-sm),
0 0 0 0 transparent;
transition: box-shadow 0.1s ease-in-out;
overflow: hidden;
max-width: 100%;
@@ -1099,7 +1111,9 @@ button {
&:focus,
&:focus-visible,
&:focus-within {
box-shadow: inset 0 0 0 transparent, 0 0 0 0.25rem var(--color-brand-shadow);
box-shadow:
inset 0 0 0 transparent,
0 0 0 0.25rem var(--color-brand-shadow);
color: var(--color-button-text-active);
}
}
@@ -1436,15 +1450,15 @@ svg.inline-svg {
height: var(--_size, var(--icon-16)) !important;
border: 1px solid var(--color-button-border);
&[data-size='32'] {
&[data-size="32"] {
--_size: var(--icon-32);
}
&[data-shape='circle'] {
&[data-shape="circle"] {
border-radius: var(--radius-max) !important;
}
&[data-shape='square'] {
&[data-shape="square"] {
border-radius: calc(2.25 * (var(--_size) / 16)) !important;
}
}

33
apps/frontend/src/assets/styles/global.scss
View File

@@ -214,8 +214,8 @@ html {
--shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
--landing-maze-bg: url('https://cdn.modrinth.com/landing-new/landing-light.webp');
--landing-maze-gradient-bg: url('https://cdn.modrinth.com/landing-new/landing-lower-light.webp');
--landing-maze-bg: url("https://cdn.modrinth.com/landing-new/landing-light.webp");
--landing-maze-gradient-bg: url("https://cdn.modrinth.com/landing-new/landing-lower-light.webp");
--landing-maze-outer-bg: linear-gradient(180deg, #f0f0f0 0%, #ffffff 100%);
--landing-color-heading: #000;
@@ -341,9 +341,9 @@ html {
--shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
--landing-maze-bg: url('https://cdn.modrinth.com/landing-new/landing.webp');
--landing-maze-bg: url("https://cdn.modrinth.com/landing-new/landing.webp");
--landing-maze-gradient-bg: linear-gradient(0deg, #31375f 0%, rgba(8, 14, 55, 0) 100%),
url('https://cdn.modrinth.com/landing-new/landing-lower.webp');
url("https://cdn.modrinth.com/landing-new/landing-lower.webp");
--landing-maze-outer-bg: linear-gradient(180deg, #06060d 0%, #000000 100%);
--landing-color-heading: #fff;
@@ -537,18 +537,22 @@ textarea {
font-weight: var(--font-weight-medium);
border: none;
outline: 2px solid transparent;
box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
box-shadow:
var(--shadow-inset-sm),
0 0 0 0 transparent;
transition: box-shadow 0.1s ease-in-out;
min-height: 40px;
&:focus,
&:focus-visible {
box-shadow: inset 0 0 0 transparent, 0 0 0 0.25rem var(--color-brand-shadow);
box-shadow:
inset 0 0 0 transparent,
0 0 0 0.25rem var(--color-brand-shadow);
color: var(--color-button-text-active);
}
&:disabled,
&[disabled='true'] {
&[disabled="true"] {
opacity: 0.6;
pointer-events: none;
cursor: not-allowed;
@@ -565,7 +569,7 @@ textarea {
}
button,
input[type='button'] {
input[type="button"] {
cursor: pointer;
border: none;
outline: 2px solid transparent;
@@ -581,13 +585,13 @@ kbd {
font-size: 0.85em !important;
}
@import '~/assets/styles/layout.scss';
@import '~/assets/styles/utils.scss';
@import '~/assets/styles/components.scss';
@import "~/assets/styles/layout.scss";
@import "~/assets/styles/utils.scss";
@import "~/assets/styles/components.scss";
button:focus-visible,
a:focus-visible,
[tabindex='0']:focus-visible {
[tabindex="0"]:focus-visible {
outline: 0.25rem solid #ea80ff;
border-radius: 0.25rem;
}
@@ -602,7 +606,10 @@ input {
}
.button-animation {
transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
transition:
opacity 0.5s ease-in-out,
filter 0.2s ease-in-out,
transform 0.05s ease-in-out,
outline-width 0.2s ease-in-out;
}

26
apps/frontend/src/assets/styles/layout.scss
View File

@@ -42,9 +42,9 @@
padding: 0 0.75rem;
grid-template:
'sidebar'
'content'
'info'
"sidebar"
"content"
"info"
/ 100%;
@media screen and (max-width: 1024px) {
@@ -81,25 +81,25 @@
column-gap: 0.75rem;
grid-template:
'sidebar content' auto
'info content' auto
'dummy content' 1fr
"sidebar content" auto
"info content" auto
"dummy content" 1fr
/ 20rem 1fr;
&.alt-layout {
grid-template:
'content sidebar' auto
'content info' auto
'content dummy' 1fr
"content sidebar" auto
"content info" auto
"content dummy" 1fr
/ 1fr 20rem;
}
&.no-sidebar {
grid-template:
'header header' auto
'content content' auto
'info info' auto
'dummy dummy' 1fr
"header header" auto
"content content" auto
"info info" auto
"dummy dummy" 1fr
/ 1fr 1fr;
.normal-page__content {

9
apps/frontend/src/assets/styles/tailwind.css Normal file
View File

@@ -0,0 +1,9 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
h1,
h2,
h3 {
@apply font-bold;
}