Files
pages/assets/styles/injected.scss
venashial 4d64df37f5 Versatile auth URLs & many UI fixes (#199)
* Make project cards right-align their last element

Spaces out elements in a `.project-card` using `justify-content: space-between;`.

Fixes modrinth/knossos#170

* Automatically set URL for auth redirect

* Make login button use base url or current origin

Allows the login button to work in dev environment

* Remove Axios base URL trailing slash

* Update authUrl() on dashboard to match default

* Remove 'code' query from URL on page load
Allow non-exact paths to highlight mod & dashboard tabs

Fixes modrinth/knossos#200

* Make page 5 button visible on page 4 (pagination)

Fixes modrinth/knossos#184

* Color links on legal pages

Fixes modrinth/knossos#166

* Set max notifications to 5 and ignore duplicates

Fixes modrinth/knossos#175

* Add space above report button when no user desc

Fixes modrinth/knossos#143

* Better text spacing from edge of mobile screen

Fixes modrinth/knossos#179

* Fix slanted bars in modrinth/knossos#57

* Fix checkbox grid and role label

Fixes modrinth/knossos#191

* Move mod 'settings' button to the far right

Fixes modrinth/knossos#138

* Abbreviate minutes to min. when time is too long

Not a perfect solution imo, but works for now

Fixes modrinth/knossos#193

* Fix mobile header margins & add breakpoints

Fixes modrinth/knossos#203

* Clean up nuxt config
Silence babel warning & styleResources

* Upgrade sass-loader to 10.1.1 and remove warning

* Remove added horizontal footer padding

https://github.com/modrinth/knossos/pull/199#discussion_r629011624

* Improve mobile header fix

* Fix up minor inconsistencies in mod header

* Remove hard coded date

* Cleans up pagination to be more intuitive

* Fixes member invite input on moble

* Fix login button when searching mods

* Improved mobile mod search

Consistently sized pagination buttons

Breakpoint for sort buttons on smaller screens

* Consistent link style on text-only pages

* Better 4k support

* Slightly better mobile project-card support

Shuffles categories under mod icon when there is room

* Animate homepage typewriter effect backwards

* Tiny commit to align mod icons in mod headers

* Make processing status include 'Under Review'

This can be later updated once the backend has a separate status

* Create vercel.json

* Update domain auto detection

* Test vercel NODE_ENV

* Remove console.log for debugging hosting services

* Make mobile first + fix shrinked text circle size

* Optimize SVG

* Change media queries to be more mobile first

* Remove `|| window.location.origin`

* re-deploy vercel

* Change "Processing" message to "Under review"
2021-05-27 09:27:13 -07:00

94 lines
1.7 KiB
SCSS

%card {
background: var(--color-raised-bg);
border-radius: var(--size-rounded-card);
}
%card-spaced-b {
@extend %card;
margin-bottom: var(--spacing-card-md);
}
%row {
display: flex;
flex-direction: row;
}
%column {
display: flex;
flex-direction: column;
}
%transparent-clickable {
border-radius: var(--size-rounded-control);
color: var(--color-text);
background-color: transparent;
&:focus,
&:hover,
&.selected,
&.nuxt-link-exact-active,
&.active-path {
color: var(--color-transparent-button-text-hover);
background-color: var(--color-transparent-button-bg-hover);
}
&:active {
color: var(--color-transparent-button-text-active);
background-color: var(--color-transparent-button-bg-active);
}
}
%label {
color: var(--color-text);
font-weight: var(--font-weight-extrabold);
letter-spacing: 0.02rem;
margin: 0 0 0.25em;
text-transform: uppercase;
}
%small-label {
@extend %label;
color: var(--color-text);
font-size: var(--font-size-xs);
letter-spacing: 0.02rem;
}
%large-label {
@extend %label;
color: var(--color-text);
font-size: var(--font-size-sm);
margin-bottom: 0.5em;
}
%stat {
margin-top: 0.5rem;
margin-right: 1rem;
@extend %row;
@media screen and (min-width: 900px) {
margin-top: 0;
}
svg {
margin: auto 0.5rem auto 0;
height: 1.5rem;
width: 1.5rem;
color: var(--color-icon);
}
.info {
margin: auto 0;
white-space: nowrap;
h4 {
@extend %small-label;
}
.value {
font-size: var(--font-size-sm);
margin: 0;
color: var(--color-text-dark);
}
.capitalize {
text-transform: capitalize;
}
.ellipsis {
text-overflow: ellipsis;
}
}
}