Skip to content

Commit

Permalink
Tabular styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@oskarrough
oskarrough committed May 24, 2024
1 parent 3a5c2cf commit 0a46cfb
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 46 deletions.
1 change: 0 additions & 1 deletion public/themes/classic.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ r4-app {
--c-dark: hsl(0deg 0% 8%);
--c-purple: #5d1ae6;
--c-purple-light: #999fff;
--c-light--accent: var(--c-purple);
--c-dark--accent: #9c8fff;
--c-dark-lighter: hsl(0deg 2.6% 13%);
--c-link: var(--c-purple);
Expand Down
3 changes: 0 additions & 3 deletions public/themes/jellybeans.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,9 +294,6 @@ r4-list-item r4-track:hover {
[color-scheme='dark'] r4-list-item r4-track:hover {
background-color: color-mix(in oklch, var(--c-bg) 100%, white 8%);
}
r4-list-item r4-actions {
margin-left: auto;
}
/* Tracklist layout for smaller screens */
@media (max-width: 700px) {
r4-list-item r4-track-tags,
Expand Down
184 changes: 142 additions & 42 deletions public/themes/tabular.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,53 +3,156 @@ html {
}

r4-app {
--font: system-ui, segoe ui, sans-serif, 'Segoe UI Symbol';
--s-font: 13px;
--s: 1rem;
--s-line-height: 1.5;
--s-radius: 0;
--s-font: 13px;
--s-line-height: 1.5;
--font: system-ui, segoe ui, sans-serif, 'Segoe UI Symbol';

/* background-image: linear-gradient(hsla(0, 0%, 60%, 0.5) 0.15%, transparent 5%); */
/* background-size: 100% calc(var(--s-font) * var(--s-line-height)); */
/* background-size: 100% var(--s); */

/* --s-form: calc(var(--s) * 36); */
/* --s-textarea: calc(var(--s) * 5); */
/* --s-container: 75rem; */
/* --s-container--list: 50rem; */
/* --s-container--channel-card: 45rem; */
/* --s-font-s1: 0.8rem; */
/* --c-light: hsl(0deg 0% 98%); */
/* --c-dark: hsl(0deg 0% 8%); */
--red: #CF6A4C;
--yellow: #EEC674;
--pink: #F0A0C0;
--pink2: hsl(6, 100%, 86%);
--blue: #7A8DB3;
--mint: #B3F6C0;
--brown: #C59F6F;
--brown2: hsl(26, 100%, 69%);
--purple: #af87ff;
--c-purple: #5d1ae6;
/* --c-purple-light: #999fff; */
/* --c-light--accent: var(--c-purple); */
/* --c-dark--accent: #9c8fff; */
/* --c-dark-lighter: hsl(0deg 2.6% 13%); */
--c-link: var(--c-fg);

/* /1* new vars *1/ */
/* --c-bg-button: hsl(0, 0%, 98%); */
/* --c-bg-button2: color-mix(in oklch, var(--c-bg-button) 50%, white 80%); */
/* --c-bg-input: hsl(0deg 0% 98%); */
/* --c-shadow-input: 1px 2px 2px #e7e6e4 inset; */
/* --c-shadow-button: 0 3px 0 -1px rgba(204, 204, 204, 0.9); */
/* --c-shadow-modal: 0 3px 12px rgba(0, 0, 0, 0.1); */
--c-bg: hsl(0deg 0% 95%);
--c-fg: hsl(0deg 0% 0%);
--c-bg2: color-mix(in oklch, var(--c-bg) 100%, var(--c-fg) 50%);
--c-fg2: color-mix(in oklch, var(--c-fg) 100%, var(--c-bg) 80%);
--c-light: color-mix(in oklch, var(--c-bg) 100%, var(--c-fg) 5%);
--c-border: hsl(0deg 0% 0%);
--c-bg-overlay: gray;
--pink3: hsl(300, 50%, 69%);

/* blue */
--blue-800: lch(20% 10.6 269.69);
--blue-750: lch(24% 12.1 269.69);
--blue-625: lch(37% 16.1 269.69);
--blue-425: lch(58.19% 22.43 269.69);
--blue-225: lch(76.5% 12.4 269.69);
--blue-100: lch(89.5% 4.8 269.69);
--blue-75: lch(93.5% 2.7 269.69);

/* green */
--green-800: lch(20% 14 115.94);
--green-750: lch(24% 16.7 115.94);
--green-625: lch(37% 22.4 115.94);
--green-425: lch(56.5% 30.7 115.94);
--green-225: lch(67.96% 35.57 115.94);
--green-100: lch(89.5% 39.3 115.94);
--green-75: lch(93.5% 33.5 115.94);

/* yellow */
--yellow-800: lch(20% 19 74.93);
--yellow-750: lch(24% 22.8 74.93);
--yellow-625: lch(37% 31.2 74.93);
--yellow-425: lch(56.5% 42.7 74.93);
--yellow-225: lch(77.29% 54.51 74.93);
--yellow-100: lch(89.5% 17.9 74.93);
--yellow-75: lch(93.5% 9.5 74.93);

/* red */
--red-800: lch(20% 22.9 42.52);
--red-750: lch(24% 27.9 42.52);
--red-625: lch(37% 40.2 42.52);
--red-425: lch(56.74% 52.92 42.52);
--red-225: lch(76.5% 22.8 42.52);
--red-100: lch(89.5% 7.9 42.52);
--red-75: lch(93.5% 4.3 42.52);

/* pink */
--pink-800: lch(20% 32 353.8);
--pink-750: lch(24% 36.7 353.8);
--pink-625: lch(37% 48.7 353.8);
--pink-425: lch(56.5% 66.1 353.8);
--pink-225: lch(74.69% 33.96 353.8);
--pink-100: lch(89.5% 11.2 353.8);
--pink-75: lch(93.5% 6.3 353.8);

--c-neutral-950: #151515;
--c-neutral-900: #1c1c1c;
--c-neutral-800: #30302c;
--c-neutral-700: #333333;
--c-neutral-600: #404040;
--c-neutral-500: #4e4e43;
--c-neutral-400: #808070;
--c-neutral-300: #959682;
--c-neutral-200: #babaa6;
--c-neutral-100: #e6e6d1;
--c-neutral-50: #f2f2dd;

--c-accent1: var(--red);
--c-accent2: var(--yellow);

border-left: 1px solid var(--c-border);
border-right: 1px solid var(--c-border);
}

r4-app[color-scheme='light'] {
--c-bg: var(--c-neutral-50);
--c-bg2: var(--c-neutral-100);
--c-fg: var(--c-neutral-950);
--c-light: var(--c-neutral-100);
--c-link: var(--c-purple);
--c-border: var(--c-neutral-500);
--c-light: color-mix(in oklch, var(--c-bg2) 100%, black 5%);
}

r4-app[color-scheme='dark'] {
--c-bg: hsl(0deg 0% 5%);
--c-fg: hsl(0deg 0% 100%);
--c-border: hsl(0deg 0% 100%);
--c-bg: var(--c-neutral-950);
--c-bg2: var(--c-neutral-900);
--c-fg: var(--c-neutral-100);
--c-link: var(--blue);
--c-border: var(--c-neutral-500);
--c-light: color-mix(in oklch, var(--c-bg2) 100%, white 12%);
}

r4-list {
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
}

r4-list-item:nth-child(odd) {
background: var(--c-bg2);
}
r4-list-item:hover {
background-color: var(--c-light);
}
r4-button-play button {
background: transparent;
border: 1px solid transparent;
&:hover {
color: var(--c-link);
}
}
r4-track-title a {
color: inherit;
}

a[data-type-tag] {
color: var(--c-accent1);
text-decoration: none;
}

a[data-type-mention] {
color: var(--c-accent2);
text-decoration: none;
}

menu r4-channel-search {
position: relative;

r4-list {
position: absolute;
width: 100%;
}

label,
r4-search-404,
r4-channel-description {
display: none;
}
}



r4-app {
/* remove things from index.css */
menu {
Expand Down Expand Up @@ -169,9 +272,6 @@ r4-list-item {
padding-left: 0.5rem;
min-height: 2rem;
}
r4-list-item:nth-child(odd) {
background: var(--c-light);
}
r4-track-body {
text-overflow: ellipsis;
white-space: nowrap;
Expand Down Expand Up @@ -249,7 +349,7 @@ fieldset[name="page"] {
r4-page-home,
r4-page-settings {
r4-page-main {
margin: 0 0.5rem;
/* margin: 0 0.5rem; */

section header h2 {
margin: 1rem 0 0.5rem;
Expand Down
1 change: 1 addition & 0 deletions src/components/r4-app-user-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export default class R4AppUserMenu extends LitElement {
isCurrent(path) {
return this.path === path ? 'page' : nothing
}

onChannelSelect(event) {
event.stopPropagation()
event.preventDefault()
Expand Down

0 comments on commit 0a46cfb

Please sign in to comment.