StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Convert color schema, begin migrating old classes (finishes grey & red)

Browse source
This commit is contained in:
Dane Everitt 2019-02-09 14:32:18 -08:00
parent 6c7a5d5bb9
commit 32b43cff9a
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
35 changed files with 186 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

2
resources/assets/styles/components/animations.css
View file

@ -35,7 +35,7 @@
@apply .bg-red;
}
100% {
@apply .bg-red-dark;
@apply .bg-red-600;
}
}

10
resources/assets/styles/components/buttons.css
View file

@ -23,23 +23,23 @@
&.btn-red {
&:not(.btn-secondary) {
@apply .bg-red .border-red-dark .border .text-white;
@apply .bg-red-500 .border-red-600 .border .text-white;
}
&:hover:enabled {
@apply .bg-red-dark .border-red-darker;
@apply .bg-red-600 .border-red-800;
}
}
&.btn-secondary {
@apply .border .border-grey-light .text-grey-dark;
@apply .border .border-neutral-400 .text-neutral-600;
&:hover:enabled {
@apply .border-grey .text-grey-darker;
@apply .borderneutral-500s.text-neutral-800;
}
&.btn-red:hover:enabled {
@apply .bg-red-dark .border-red-darker .text-white;
@apply .bg-red-600 .border-red-800 .text-white;
}
}

14
resources/assets/styles/components/filemanager.css
View file

@ -1,6 +1,6 @@
.filemanager {
& .header {
@apply .flex .text-sm .pb-4 .font-bold .border-b .border-grey-light .mb-3;
@apply .flex .text-sm .pb-4 .font-bold .border-b .border-neutral-400 .mb-3;
& > div {
@apply .pr-4;
@ -19,7 +19,7 @@
}
&.active-selection, &.clickable:hover {
@apply .bg-grey-lightest .text-grey-darkest .shadow;
@apply .bg-neutral-50 .text-neutral-900 .shadow;
}
& > .icon {
@ -31,10 +31,10 @@
}
.context-menu {
@apply .absolute .bg-white .py-2 .border .rounded .text-grey-darker .text-sm .cursor-pointer;
@apply .absolute .bg-white .py-2 .border .rounded .text-neutral-800 .text-sm .cursor-pointer;
& > div:not(:last-of-type) {
@apply .border-b .border-grey-lightest .pb-2 .mb-2;
@apply .border-b .border-neutral-50 .pb-2 .mb-2;
}
& .context-row {
@ -53,11 +53,11 @@
}
&:hover {
@apply .bg-grey-lightest .border-t .border-b .border-grey-lighter;
@apply .bg-neutral-50 .border-t .border-b .border-neutral-100;
}
&.danger:hover {
@apply .bg-red-lightest .border-t .border-b .border-red-lighter;
@apply .bg-red-50 .border-t .border-b .border-red-100;
}
}
@ -65,7 +65,7 @@
}
.filemanager-breadcrumbs {
@apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-grey-darker .shadow-md;
@apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-neutral-800 .shadow-md;
& a {
@apply .no-underline .text-blue;

16
resources/assets/styles/components/forms.css
View file

@ -21,7 +21,7 @@ input[type=number] {
}
.input-open > .input {
@apply .appearance-none .block .w-full .text-grey-darker .border-b-2 .border-grey-light .py-3 .mb-3;
@apply .appearance-none .block .w-full .text-neutral-800 .border-b-2 .border-neutral-400 .py-3 .mb-3;
&:focus {
@apply .border-blue-light;
@ -30,7 +30,7 @@ input[type=number] {
}
&:focus + label, &:valid + label, &.has-content + label {
@apply .text-grey-darker .px-0 .cursor-pointer;
@apply .text-neutral-800 .px-0 .cursor-pointer;
transform:translateY(-26px)
}
@ -40,7 +40,7 @@ input[type=number] {
}
.input-open > label {
@apply .block .uppercase .tracking-wide .text-grey .text-xs .mb-2 .absolute;
@apply .block .uppercase .tracking-wide .textneutral-500s.text-xs .mb-2 .absolute;
top: 14px;
transition: transform 200ms ease-out;
}
@ -49,7 +49,7 @@ input[type=number] {
* Styling for other forms throughout the Panel.
*/
.input:not(.open-label) {
@apply .appearance-none .p-3 .rounded .border .text-grey-darker .w-full;
@apply .appearance-none .p-3 .rounded .border .text-neutral-800 .w-full;
transition: all 100ms linear;
&:focus {
@ -61,18 +61,18 @@ input[type=number] {
}
&.error {
@apply .text-red-dark .border-red;
@apply .text-red-600 .border-red;
}
}
.input-label {
@apply .block .uppercase .tracking-wide .text-grey-darkest .text-xs .font-bold .mb-2;
@apply .block .uppercase .tracking-wide .text-neutral-900 .text-xs .font-bold .mb-2;
}
.input-help {
@apply .text-xs .text-grey .pt-2;
@apply .text-xs .textneutral-500s.pt-2;
&.error {
@apply .text-red-dark;
@apply .text-red-600;
}
}

12
resources/assets/styles/components/miscellaneous.css
View file

@ -11,7 +11,7 @@ code {
* Indicators for server online status.
*/
.indicator {
@apply .bg-grey-darker .border .border-grey;
@apply .bg-neutral-800 .border .border-grey;
border-radius: 50%;
width: 16px;
height: 16px;
@ -89,16 +89,16 @@ code {
}
& a, & a:visited {
@apply .no-underline .text-grey-darkest;
@apply .no-underline .text-neutral-900;
}
& > .content {
@apply .border .border-grey-light .bg-white .no-underline .block .text-black .p-4;
border-top: 4px solid config('colors.grey-light') !important;
@apply .border .border-neutral-400 .bg-white .no-underline .block .text-black .p-4;
border-top: 4px solid config('colors.neutral-400') !important;
}
& > .footer {
@apply .border .border-grey-light .border-t-0 .bg-grey-lightest;
@apply .border .border-neutral-400 .border-t-0 .bg-neutral-50;
}
}
@ -110,7 +110,7 @@ code {
@apply .w-full .my-4;
& > input[type="text"] {
@apply .w-full .p-3 .rounded .border .text-grey-darker;
@apply .w-full .p-3 .rounded .border .text-neutral-800;
transition: border 150ms ease-in;
&:focus {

36
resources/assets/styles/components/navigation.css
View file

@ -19,7 +19,7 @@
@apply .mr-2;
& > .search-input {
@apply .text-sm .p-2 .ml-8 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest .w-96;
@apply .text-sm .p-2 .ml-8 .rounded .border .border-blue-darker .bg-neutral-50 .text-neutral-900 .w-96;
opacity: 0.9;
transition: ease-in-out opacity 150ms;
@ -35,13 +35,13 @@
}
& .search-results {
@apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
@apply .absolute .bg-neutral-50 .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
& a {
@apply .block .no-underline .p-2 .rounded;
&:hover {
@apply .bg-grey-lighter;
@apply .bg-neutral-100;
}
}
}
@ -51,7 +51,7 @@
@apply .flex .h-full .items-center;
& > a {
@apply .block .flex .self-stretch .items-center .no-underline .text-grey-lighter .font-light .text-sm .px-5;
@apply .block .flex .self-stretch .items-center .no-underline .text-neutral-100 .font-light .text-sm .px-5;
&:hover {
@apply .bg-blue-dark;
@ -61,16 +61,24 @@
}
.sidenav {
a {
@apply .block .no-underline .text-grey-darker .py-2;
transition: color 75ms ease-in;
ul {
@apply .list-reset;
&:hover {
@apply .text-grey;
}
& li {
@apply .block;
&.router-link-exact-active {
@apply .font-medium;
& > a {
transition: border-left-color 250ms linear, color 250ms linear;
@apply .block .px-4 .py-3 .border-l-3 .border-neutral-100 .no-underline .text-neutral-400 .font-medium;
&:hover, &.router-link-exact-active {
@apply .text-neutral-800;
}
&.router-link-exact-active {
@apply .border-blue .cursor-default;
}
}
}
}
}
@ -79,10 +87,10 @@
@apply .py-2;
a {
@apply .block .py-3 .px-6 .text-grey-darkest .no-underline .border .border-transparent;
@apply .block .py-3 .px-6 .text-neutral-900 .no-underline .border .border-transparent;
&:hover, &.router-link-exact-active {
@apply .border-grey-light .bg-grey-lightest;
@apply .border-neutral-400 .bg-neutral-50;
border-left: 1px solid transparent;
border-right: 1px solid transparent;

2
resources/assets/styles/components/notifications.css
View file

@ -13,7 +13,7 @@
}
&.error {
@apply .bg-red-dark .border-red-darker .text-red-lightest;
@apply .bg-red-600 .border-red-800 .text-red-50;
& > .title {
@apply .bg-red;

2
resources/assets/styles/components/spinners.css
View file

@ -7,7 +7,7 @@
}
&:after {
@apply .border-2 .border-grey-light .absolute .block .h-4 .w-4 .rounded-full;
@apply .border-2 .border-neutral-400 .absolute .block .h-4 .w-4 .rounded-full;
animation: spinners--spin 500ms infinite linear;
border-top-color: transparent !important;
border-right-color: transparent !important;