Skip to content
This repository was archived by the owner on Apr 20, 2023. It is now read-only.

feat: react - project details component #55

Closed
cuteolaf wants to merge 1 commit into from
Closed

feat: react - project details component #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
236 changes: 121 additions & 115 deletions api/public/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,135 +1,141 @@
:root {
--theme-primary: #b2ff0b;
--theme-secondary: #411dc9;
--theme-secondary-hover: #512dd9;
--theme-secondary-dark: #020c67;
--theme-secondary-dark-hover: #121c7f;
--theme-error: #ff5a58;
--theme-error-hover: #ff7a78;
--theme-background: #1a1a19;
--theme-title-color: #fff;
--theme-ink-color: #ebeae2;
--theme-font-family: "Aeonik", sans-serif;

--theme-h1-size: 75px;
--theme-h1-weight: normal;



--theme-h2-size: 50px;
--theme-h2-weight: normal;

--dialog-title-color: var(--theme-title-color);
--dialog-content-color: #a9a9a9; /** FIXME: really? why not theme-ink-color? */
--dialog-scrim-background: rgba(0, 0, 0, 0.75);
--dialog-anchor-color: var(--theme-primary);
--dialog-strong-color: var(--dialog-title-color);
--dialog-box-shadow:
0px 0px 5px #444,
0px 11px 15px -7px rgba(50, 50, 50, 0.2),
0px 24px 38px 3px rgba(50, 50, 50, 0.14),
0px 9px 46px 8px rgba(50, 50, 50, 0.12);
--dialog-z-index: 1001;


/** material design variable */
--mdc-shape-small: 8px;
--mdc-theme-primary: var(--theme-primary);
--mdc-theme-secondary: var(--theme-secondary);
--mdc-theme-secondary-hover: var(--theme-secondary-hover);
--mdc-theme-error: var(--theme-error);
--mdc-theme-background: var(--theme-background);
--mdc-theme-surface: #0f0f0f;

--mdc-typography-font-family: var(--theme-font-family);

--mdc-text-field-fill-color: rgba(235, 234, 226, 0.11);
--mdc-text-field-disabled-fill-color: rgba(235, 234, 226, 0.23);
--mdc-text-field-label-ink-color: #aaa;
--mdc-text-field-disabled-ink-color: rgba(255, 255, 255, 0.25);
--mdc-text-field-ink-color: var(--theme-ink-color);

--mdc-select-fill-color: var(--mdc-text-field-fill-color);
--mdc-select-disabled-fill-color: var(--mdc-text-field-disabled-fill-color);
--mdc-select-disabled-ink-color: var(--mdc-text-field-disabled-ink-color);
--mdc-select-label-ink-color: var(--mdc-text-field-label-ink-color);
--mdc-select-ink-color: var(--mdc-text-field-ink-color);

--mdc-theme-text-primary-on-background: var(--mdc-text-field-ink-color);
--mdc-theme-text-secondary-on-background: var(--mdc-theme-secondary);
--mdc-theme-text-icon-on-background: var(--mdc-text-field-label-ink-color);

/* --mdc-dialog-content-ink-color: var(--mdc-text-field-ink-color);
--theme-primary: #b2ff0b;
--theme-secondary: #411dc9;
--theme-secondary-hover: #512dd9;
--theme-secondary-dark: #020c67;
--theme-secondary-dark-hover: #121c7f;
--theme-error: #ff5a58;
--theme-error-hover: #ff7a78;
--theme-background: #1a1a19;
--theme-title-color: #fff;
--theme-ink-color: #ebeae2;
--theme-grey-text: #a6a6a6;
--theme-font-family: "Aeonik", sans-serif;
--theme-black-text: #0f0f0f;

--theme-h1-size: 75px;
--theme-h1-weight: normal;

--theme-h2-size: 50px;
--theme-h2-weight: normal;

--dialog-title-color: var(--theme-title-color);
--dialog-content-color: #a9a9a9; /** FIXME: really? why not theme-ink-color? */
--dialog-scrim-background: rgba(0, 0, 0, 0.75);
--dialog-anchor-color: var(--theme-primary);
--dialog-strong-color: var(--dialog-title-color);
--dialog-box-shadow: 0px 0px 5px #444,
0px 11px 15px -7px rgba(50, 50, 50, 0.2),
0px 24px 38px 3px rgba(50, 50, 50, 0.14),
0px 9px 46px 8px rgba(50, 50, 50, 0.12);
--dialog-z-index: 1001;

/** material design variable */
--mdc-shape-small: 8px;
--mdc-theme-primary: var(--theme-primary);
--mdc-theme-secondary: var(--theme-secondary);
--mdc-theme-secondary-hover: var(--theme-secondary-hover);
--mdc-theme-error: var(--theme-error);
--mdc-theme-background: var(--theme-background);
--mdc-theme-surface: #0f0f0f;

--mdc-typography-font-family: var(--theme-font-family);

--mdc-text-field-fill-color: rgba(235, 234, 226, 0.11);
--mdc-text-field-disabled-fill-color: rgba(235, 234, 226, 0.23);
--mdc-text-field-label-ink-color: #aaa;
--mdc-text-field-disabled-ink-color: rgba(255, 255, 255, 0.25);
--mdc-text-field-ink-color: var(--theme-ink-color);

--mdc-select-fill-color: var(--mdc-text-field-fill-color);
--mdc-select-disabled-fill-color: var(--mdc-text-field-disabled-fill-color);
--mdc-select-disabled-ink-color: var(--mdc-text-field-disabled-ink-color);
--mdc-select-label-ink-color: var(--mdc-text-field-label-ink-color);
--mdc-select-ink-color: var(--mdc-text-field-ink-color);

--mdc-theme-text-primary-on-background: var(--mdc-text-field-ink-color);
--mdc-theme-text-secondary-on-background: var(--mdc-theme-secondary);
--mdc-theme-text-icon-on-background: var(--mdc-text-field-label-ink-color);

/* --mdc-dialog-content-ink-color: var(--mdc-text-field-ink-color);
--mdc-dialog-scrim-color: rgba(200, 200, 255, 0.5); */

--button-border-radius: 3px;
--button-padding: 20px;
--button-font-size: 12pt;
--primary-button-background-color: var(--theme-secondary);
--primary-button-background-hover-color: var(--theme-primary);
--secondary-button-background-color: #555;
--secondary-button-background-color: black; /* rgb(5, 12, 38); */
--secondary-button-background-hover-color: #656565;
--secondary-button-color: white;
--secondary-button-border: 1px solid var(--dialog-content-color);
--disabled-button-background-color: #676767;
--disabled-button-color: #b5b5b5;
--base-transition: all 200ms ease-in-out;


--hq-dialog-content-color: var(--dialog-content-color);
--hq-dialog-strong-color: var(--dialog-strong-color);
--hq-dialog-title-color: var(--dialog-title-color);
--hq-dialog-anchor-color: var(--dialog-anchor-color);
--hq-dialog-scrim-background: var(--dialog-scrim-background);
--hq-dialog-box-shadow: var(--dialog-box-shadow);
--hq-dialog-z-index: var(--dialog-z-index);
--hq-dialog-font-family: var(--theme-font-family);
--hq-button-font-size: var(--button-font-size);
--hq-button-padding: var(--button-padding);
--hq-button-border-radius: var(--button-border-radius);
--hq-primary-button-background-color: var(--primary-button-background-color);
--hq-primary-button-background-hover-color: var(--primary-button-background-hover-color);
--hq-secondary-button-background-color: var(--secondary-button-background-color);
--hq-secondary-button-background-hover-color: var(--secondary-button-background-hover-color);
--hq-secondary-button-color: var(--secondary-button-color);
--hq-secondary-button-border: var(--secondary-button-border);
--hq-disabled-button-background-color: var(--disabled-button-background-color);
--hq-disabled-button-color: var(--disabled-button-color);
--hq-base-transition: var(--base-transition);
--button-border-radius: 3px;
--button-padding: 20px;
--button-font-size: 12pt;
--primary-button-background-color: var(--theme-secondary);
--primary-button-background-hover-color: var(--theme-primary);
--secondary-button-background-color: #555;
--secondary-button-background-color: black; /* rgb(5, 12, 38); */
--secondary-button-background-hover-color: #656565;
--secondary-button-color: white;
--secondary-button-border: 1px solid var(--dialog-content-color);
--disabled-button-background-color: #676767;
--disabled-button-color: #b5b5b5;
--base-transition: all 200ms ease-in-out;

--hq-dialog-content-color: var(--dialog-content-color);
--hq-dialog-strong-color: var(--dialog-strong-color);
--hq-dialog-title-color: var(--dialog-title-color);
--hq-dialog-anchor-color: var(--dialog-anchor-color);
--hq-dialog-scrim-background: var(--dialog-scrim-background);
--hq-dialog-box-shadow: var(--dialog-box-shadow);
--hq-dialog-z-index: var(--dialog-z-index);
--hq-dialog-font-family: var(--theme-font-family);
--hq-button-font-size: var(--button-font-size);
--hq-button-padding: var(--button-padding);
--hq-button-border-radius: var(--button-border-radius);
--hq-primary-button-background-color: var(--primary-button-background-color);
--hq-primary-button-background-hover-color: var(
--primary-button-background-hover-color
);
--hq-secondary-button-background-color: var(
--secondary-button-background-color
);
--hq-secondary-button-background-hover-color: var(
--secondary-button-background-hover-color
);
--hq-secondary-button-color: var(--secondary-button-color);
--hq-secondary-button-border: var(--secondary-button-border);
--hq-disabled-button-background-color: var(
--disabled-button-background-color
);
--hq-disabled-button-color: var(--disabled-button-color);
--hq-base-transition: var(--base-transition);
}

body {
margin: 0;
padding: 0;

background-color: #000;
background-image: url("background.png");
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
margin: 0;
padding: 0;

background-color: #000;
background-image: url("background.png");
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
}

.primary-btn {
margin: 0;
margin: 0;
}

.primary-btn:disabled {
background-color: #676767;
color: #b5b5b5;
cursor: unset;
background-color: #676767;
color: #b5b5b5;
cursor: unset;
}

.primary-btn.fullwidth {
border-radius: 3px;
font-weight: normal;
border-radius: 3px;
font-weight: normal;
}

@font-face {
font-family: "Aeonik";
src: url("AeonikTRIAL-Regular.otf") format("opentype");
font-family: "Aeonik";
src: url("AeonikTRIAL-Regular.otf") format("opentype");
}

.mdc-dialog .mdc-dialog__title, .mdc-dialog__content {
color: var(--mdc-text-field-ink-color) !important;
}
.mdc-dialog .mdc-dialog__title,
.mdc-dialog__content {
color: var(--mdc-text-field-ink-color) !important;
}
Loading