fix sidebar & mini event card colour + navbar overlay
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
Miniapple8888
parent
caa44e6316
commit
3a4581a8b9
|
|
@ -2,7 +2,7 @@
|
|||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding: calc(20rem / 16);
|
||||
color: var(--mini-event-card-text);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.darkBg {
|
||||
|
|
@ -10,11 +10,6 @@
|
|||
position: relative;
|
||||
padding: calc(20rem / 16);
|
||||
background-color: var(--card-background);
|
||||
color: var(--primary-subtitle);
|
||||
}
|
||||
|
||||
.darkBg .name {
|
||||
color: var(--primary-subtitle);
|
||||
}
|
||||
|
||||
.name {
|
||||
|
|
@ -32,14 +27,10 @@
|
|||
}
|
||||
|
||||
.info {
|
||||
color: var(--info-text);
|
||||
color: var(--primary-heading);
|
||||
margin-bottom: calc(12rem / 16);
|
||||
}
|
||||
|
||||
.darkBg .info {
|
||||
color: var(--primary-subtitle);
|
||||
}
|
||||
|
||||
.details {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -50,10 +41,6 @@
|
|||
font-size: calc(14rem / 16);
|
||||
}
|
||||
|
||||
.darkBg .details {
|
||||
color: var(--primary-subtitle);
|
||||
}
|
||||
|
||||
.card[open] .shortDescription {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -90,10 +77,6 @@
|
|||
fill: var(--primary-accent);
|
||||
}
|
||||
|
||||
.darkBg .dropDownIcon {
|
||||
fill: var(--primary-subtitle);
|
||||
}
|
||||
|
||||
|
||||
.card h1,
|
||||
.card h2,
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
margin: calc(8rem / 16) calc(32rem / 16) calc(20rem / 16) 0;
|
||||
height: calc(100vh - (44rem / 16));
|
||||
|
||||
color: var(--primary-heading);
|
||||
color: var(--sidebar-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -55,10 +55,14 @@
|
|||
|
||||
.selected {
|
||||
background-color: var(--primary-accent-lightest);
|
||||
color: var(--primary-accent);
|
||||
color: var(--primary-heading);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.selected div {
|
||||
color: var(--primary-heading);
|
||||
}
|
||||
|
||||
.readAll {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@ export const PALETTE_NAMES = [
|
|||
"--secondary-accent-light",
|
||||
|
||||
"--primary-heading",
|
||||
"--secondary-heading",
|
||||
|
||||
"--primary-title",
|
||||
"--primary-subtitle",
|
||||
|
|
@ -39,7 +38,7 @@ export const PALETTE_NAMES = [
|
|||
"--text",
|
||||
"--text-light",
|
||||
"--author-text",
|
||||
"--info-text",
|
||||
"--sidebar-text",
|
||||
"--mini-event-card-text",
|
||||
|
||||
"--form-invalid",
|
||||
|
|
|
|||
|
|
@ -17,12 +17,11 @@ body {
|
|||
--light--secondary-accent-light: #dcf6f0;
|
||||
|
||||
--light--primary-heading: #2a2a62;
|
||||
--light--secondary-heading: #525284;
|
||||
|
||||
--light--primary-text: #2a2a62;
|
||||
--light--text: #000000;
|
||||
--light--text-light: #FFFFFF;
|
||||
--light--info-text: #2a2a62;
|
||||
--light--sidebar-text: #2a2a62;
|
||||
--light--author-text: #525284;
|
||||
--light--mini-event-card-text: #000000;
|
||||
|
||||
|
|
@ -43,6 +42,7 @@ body {
|
|||
|
||||
--light--icon: #2A2A62;
|
||||
|
||||
--light--navbar-page-overlay: hsla(0,0%,47.1%,0.6980392156862745);
|
||||
--light--code-background: #f0f0f0;
|
||||
|
||||
--light--button-background: #1482e3;
|
||||
|
|
@ -68,7 +68,6 @@ body {
|
|||
--dark--secondary-accent-light: #525284;
|
||||
|
||||
--dark--primary-heading: #fcf7f4;
|
||||
--dark--secondary-heading: #525284;
|
||||
|
||||
--dark--form-invalid: #9f616a;
|
||||
--dark--warning-background: #dd0014;
|
||||
|
|
@ -80,7 +79,7 @@ body {
|
|||
--dark--primary-text: #ffffff;
|
||||
--dark--text: #AFAFD3;
|
||||
--dark--text-light: #FFFFFF;
|
||||
--dark--info-text: #5CAFF9;
|
||||
--dark--sidebar-text: #AFAFD3;
|
||||
--dark--author-text: #ABABF2;
|
||||
--dark--mini-event-card-text: #5CAFF9;
|
||||
|
||||
|
|
@ -94,11 +93,12 @@ body {
|
|||
--dark--primary-subtitle: #C5C5F0;
|
||||
--dark--secondary-subtitle: #ABABF2;
|
||||
|
||||
--dark--navbar-page-overlay: rgba(0, 0, 0, 0.7);
|
||||
--dark--code-background: #3d3d68;
|
||||
|
||||
--dark--button-background: #1482e3;
|
||||
--dark--footer-background: #525284;
|
||||
--dark--card-background: #3A3A61;
|
||||
--dark--card-background: #272751;
|
||||
--dark--table-header: #252542;
|
||||
--dark--table-section: #202037;
|
||||
|
||||
|
|
@ -119,7 +119,6 @@ body {
|
|||
--secondary-accent-light: var(--light--secondary-accent-light);
|
||||
|
||||
--primary-heading: var(--light--primary-heading);
|
||||
--secondary-heading: var(--light--secondary-heading);
|
||||
|
||||
--form-invalid: var(--light--form-invalid);
|
||||
--warning-background: var(--light--warning-background);
|
||||
|
|
@ -131,7 +130,7 @@ body {
|
|||
--primary-text: var(--light--primary-text);
|
||||
--text: var(--light--text);
|
||||
--text-light: var(--light--text-light);
|
||||
--info-text: var(--light--info-text);
|
||||
--sidebar-text: var(--light--sidebar-text);
|
||||
--author-text: var(--light--author-text);
|
||||
--mini-event-card-text: var(--light--mini-event-card-text);
|
||||
|
||||
|
|
@ -145,6 +144,7 @@ body {
|
|||
--primary-subtitle: var(--light--primary-subtitle);
|
||||
--secondary-subtitle: var(--light--secondary-subtitle);
|
||||
|
||||
--navbar-page-overlay: var(--light--navbar-page-overlay);
|
||||
--code-background: var(--light--code-background);
|
||||
|
||||
--button-background: var(--light--button-background);
|
||||
|
|
@ -241,54 +241,54 @@ h4 + * {
|
|||
@media only screen and (prefers-color-scheme: dark) {
|
||||
body {
|
||||
--primary-background: var(--dark--primary-background);
|
||||
--secondary-background: var(--dark--secondary-background);
|
||||
--secondary-background: var(--dark--secondary-background);
|
||||
|
||||
--primary-accent: var(--dark--primary-accent);
|
||||
--primary-accent-soft: var(--dark--primary-accent-soft);
|
||||
--primary-accent-light: var(--dark--primary-accent-light);
|
||||
--primary-accent-lighter: var(--dark--primary-accent-lighter);
|
||||
--primary-accent-lightest: var(--dark--primary-accent-lightest);
|
||||
--primary-accent: var(--dark--primary-accent);
|
||||
--primary-accent-soft: var(--dark--primary-accent-soft);
|
||||
--primary-accent-light: var(--dark--primary-accent-light);
|
||||
--primary-accent-lighter: var(--dark--primary-accent-lighter);
|
||||
--primary-accent-lightest: var(--dark--primary-accent-lightest);
|
||||
|
||||
--secondary-accent: var(--dark--secondary-accent);
|
||||
--secondary-accent-light: var(--dark--secondary-accent-light);
|
||||
--secondary-accent: var(--dark--secondary-accent);
|
||||
--secondary-accent-light: var(--dark--secondary-accent-light);
|
||||
|
||||
--primary-heading: var(--dark--primary-heading);
|
||||
--secondary-heading: var(--dark--secondary-heading);
|
||||
--primary-heading: var(--dark--primary-heading);
|
||||
|
||||
--form-invalid: var(--dark--form-invalid);
|
||||
--warning-background: var(--dark--warning-background);
|
||||
--warning-text: var(--dark--warning-text);
|
||||
--form-invalid: var(--dark--form-invalid);
|
||||
--warning-background: var(--dark--warning-background);
|
||||
--warning-text: var(--dark--warning-text);
|
||||
|
||||
--link: var(--dark--link);
|
||||
--link-hover: var(--dark--link-hover);
|
||||
--link: var(--dark--link);
|
||||
--link-hover: var(--dark--link-hover);
|
||||
|
||||
--primary-text: var(--dark--primary-text);
|
||||
--text: var(--dark--text);
|
||||
--text-light: var(--dark--text-light);
|
||||
--info-text: var(--dark--info-text);
|
||||
--author-text: var(--dark--author-text);
|
||||
--mini-event-card-text: var(--dark--mini-event-card-text);
|
||||
--primary-text: var(--dark--primary-text);
|
||||
--text: var(--dark--text);
|
||||
--text-light: var(--dark--text-light);
|
||||
--sidebar-text: var(--dark--sidebar-text);
|
||||
--author-text: var(--dark--author-text);
|
||||
--mini-event-card-text: var(--dark--mini-event-card-text);
|
||||
|
||||
--input-background: var(--dark--input-background);
|
||||
--input-placeholder-text: var(--dark--input-placeholder-text);
|
||||
--input-text: var(--dark--input-text);
|
||||
--input-background: var(--dark--input-background);
|
||||
--input-placeholder-text: var(--dark--input-placeholder-text);
|
||||
--input-text: var(--dark--input-text);
|
||||
|
||||
--icon: var(--dark--icon);
|
||||
--icon: var(--dark--icon);
|
||||
|
||||
--primary-title: var(--dark--primary-title);
|
||||
--primary-subtitle: var(--dark--primary-subtitle);
|
||||
--secondary-subtitle: var(--dark--secondary-subtitle);
|
||||
--primary-title: var(--dark--primary-title);
|
||||
--primary-subtitle: var(--dark--primary-subtitle);
|
||||
--secondary-subtitle: var(--dark--secondary-subtitle);
|
||||
|
||||
--code-background: var(--dark--code-background);
|
||||
--navbar-page-overlay: var(--dark--navbar-page-overlay);
|
||||
--code-background: var(--dark--code-background);
|
||||
|
||||
--button-background: var(--dark--button-background);
|
||||
--footer-background: var(--dark--footer-background);
|
||||
--card-background: var(--dark--card-background);
|
||||
--table-header: var(--dark--table-header);
|
||||
--table-section: var(--dark--table-section);
|
||||
--button-background: var(--dark--button-background);
|
||||
--footer-background: var(--dark--footer-background);
|
||||
--card-background: var(--dark--card-background);
|
||||
--table-header: var(--dark--table-header);
|
||||
--table-section: var(--dark--table-section);
|
||||
|
||||
--blue-gradient: var(--dark--blue-gradient);
|
||||
--border: var(--dark--border);
|
||||
--marker: var(--dark--marker);
|
||||
--blue-gradient: var(--dark--blue-gradient);
|
||||
--border: var(--dark--border);
|
||||
--marker: var(--dark--marker);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue