diff --git a/templates/styles/decoration.css b/templates/styles/decoration.css new file mode 100644 index 000000000..8c0176c30 --- /dev/null +++ b/templates/styles/decoration.css @@ -0,0 +1,192 @@ +:root { + + --rouge: hsl(0, 98.8%, 33.5%); + --rouge-fonce: hsl(0, 75%, 33.5%); + + --noir-complet: black; + --noir-fonce: hsl(0, 30%, 2.1%); + --noir-moyen: hsl(0, 15%, 3.1%); + --noir-clair: hsl(0, 5%, 7.1%); + + --blanc: hsla(0, 0%, 100%, 1); + --blanc-fort: hsla(0, 0%, 100%, 0.75); + --blanc-semi-transparent: hsla(0, 0%, 100%, 0.25); +} + + +body { + + background: var(--noir-fonce); + color: white; + font-family: Roboto,sans-serif; +} + +header { + + background: var(--noir-clair); +} + + +header * { + + color: var(--rouge); + text-decoration: none; +} + +header span { + + color: white; +} + +#pinFilter ul li a { + + background-color: var(--blanc); +} + +#pinFilter ul li.selected a { + + background-color: var(--rouge); +} + + +ul#tagsList, +ul#narrowingTags { + + list-style: none; + margin-left: 0; + padding-left: 0; +} + +ul#tagsList li, +ul#narrowingTags li { + + display: inline-block; +} + +ul#tagsList a, +ul#tagsList a:visited { + + text-decoration: none; + color: var(--rouge-fonce); +} + +#narrowingTags a, +#narrowingTags a:visited { + + text-decoration: none; + color: inherit; +} + +#narrowingTags li { + + border-radius: 1rem; +} + +#narrowingTags li.selected { + + background-color: var(--rouge-fonce); + color: var(--blanc); + border: 0.125rem solid var(--noir-clair); +} + +#tagsList, +#narrowingTags { + + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +#tagsList li.station, +#narrowingTags li.station { + + order: 1; +} + +#tagsList li.station, +#narrowingTags li.station { + + background-image: url("logo.png"); + background-repeat: no-repeat; + background-position: left middle; + background-size: contain; + padding-left: 2em; + order: 1; +} + +#narrowingTags li.selectable { + + background-color: var(--noir-fonce); + color: var(--rouge-fonce); + border: 0.125rem solid var(--noir-clair); +} + +#videosList > li { + + background: var(--noir-clair); + border-color: var(--rouge); + border-style: solid; +} + +.video-title, +.video-title a, +.video-title a:visited { + + color: white; + font-weight: bold; + text-decoration: none; + word-break: break-all; +} + +#videosList .thumbnail { + + background-color: var(--noir-complet); +} + +#videosList > li ul.tags li a, +#videosList > li ul.tags li a:visited { + + text-decoration: none; +} + +#videosList > li ul.tags li.selectable a, +#videosList > li ul.tags li.selectable a:visited { + + color: var(--blanc-semi-transparent); +} + +#videosList > li ul.tags li.selectable a:hover { + + color: var(--blanc-fort); +} + +#videosList > li ul.tags li.selected a, +#videosList > li ul.tags li.selected a:visited { + + color: var(--blanc-fort); +} + +article { + + background: var(--noir-clair); +} + +article video { + + background: black; +} + + +article .video-title { + + font-weight: bold; +} + +#successMsg { + + opacity: 0; + transition: opacity 1s; +} + + + diff --git a/templates/styles/layout.css b/templates/styles/layout.css new file mode 100644 index 000000000..2ee23dc75 --- /dev/null +++ b/templates/styles/layout.css @@ -0,0 +1,250 @@ +body { + + margin: 0; + padding: 0; +} + +header { + + overflow: hidden; + padding: 1rem 0.666rem 1.333rem; + margin-bottom: 2rem; + +} + +header > * { + + font-size: 1.5rem; + margin: 0; + padding: 0; +} + +header > .sitetitle { + + margin-bottom: 0.25rem; +} + +header > .sitetitle span { + + border-bottom-style: solid; + border-bottom-color: var(--pink); +} + +header .usp { + + font-size: 0.95rem; +} + +main { + + width: 95%; + margin: auto; +} + +body.home main { + + display: grid; + grid-gap: 1rem 1rem; + grid-auto-flow: row; + grid-template-columns: 998px auto; + grid-template-areas: "c m"; +} + +body.home main > #menu { + + grid-area: m; +} + +body.home main > ul#videosList { + + grid-area: c; +} + + +aside#menu > div { + + position: sticky; + top: 2rem; +} + +#pinFilter ul { + + margin: 0; + padding: 0; + list-style: none; + font-size: 3rem; + display: flex; +} + +#pinFilter ul li a span { + + display: none; +} + +#pinFilter ul li a { + + display: inline-block; + height: 3rem; + width: 3rem; + border: 1px solid red; + background-repeat: no-repeat; +} + +#pinFilter ul li#filter_pinned a { + + background-image: url("font-awesome/hdd.svg"); + background-position: center center; + background-size: 2.5rem; +} + +#pinFilter ul li#filter_notpinned a { + + background-image: url("font-awesome/cloud.svg"); + background-position: center center; + background-size: 2.5rem; +} + +#pinFilter ul li#filter_both a { + + background-image: url("font-awesome/hdd.svg"), + url("font-awesome/cloud.svg"); + background-position: bottom 0.25rem left 0.25rem, + top 0.25rem right 0.25rem; + background-size: 1.75rem, + 1.75rem; + +} + +#tagsList li, +#narrowingTags li { + + padding: 0.125rem 0.5rem; + margin: 0.25rem 0.25rem; +} + +#videosList { + + display: grid; + grid-gap: 1rem 1rem; + grid-auto-flow: row; + grid-template-columns: 322px 322px 322px; + + list-style: none; + margin: 0; + padding: 0; + justify-content: center; + align-content: start +} + +#videosList > li { + + border-radius: 0.25rem; + border-width: 1px; + overflow: hidden; +} + +#videosList .thumbnail { + + text-align: center; + height: 180px; + margin-top: 0; + display: flex; + justify-content: center; + align-items: center; +} + +#videosList .thumbnail img { + + max-height: 180px; + width: auto; +} + +#videosList .video-title { + + padding: 0.5rem 1rem; +} + +#videosList > li ul.tags { + + padding: 0; + margin: 0; + list-style: none; +} + +#videosList > li ul.tags li { + + display: inline-block; +} + +#videosList > li ul.tags li:after { + + content: ", "; +} + +#videosList > li ul.tags li:last-of-type:after { + + content: ""; +} + +article { + + border-radius: 0.25rem; + width: 58.3%; + margin: auto; + overflow: hidden; + +} + +article video { + + width: 100%; + max-height: calc(100vh - 14rem); +} + +article .video-title { + + padding: 1rem 1rem; + font-size: 1.25rem; + margin: 0; +} + +form.add-video { + + position: absolute; + top: 0.50rem; + right: 0.50rem; +} + + +form.add-video input { + + height: 2rem; + padding: 0.25rem 0.5rem; + box-sizing: border-box; + border-width: 0.125rem; + border-radius: 0.5rem; + +} + +form label { + + display: none; + +} + +form label input { + + width: 50%; +} + +form.add-video .confirmation { + + margin: 0.5rem 0; + font-size: 0.85rem; + text-align: center; +} + +footer { + + display: none; +} diff --git a/templates/styles/logo.png b/templates/styles/logo.png new file mode 100644 index 000000000..83789598f Binary files /dev/null and b/templates/styles/logo.png differ