Skip to content
Snippets Groups Projects
Verified Commit c4ace75a authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Initial setup for dark theme

parent 19699568
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
front/public/index.html
+ 1
− 1
View file @ c4ace75a
......@@ -9,7 +9,7 @@
<title>Funkwhale</title>
</head>
<body>
<body class="theme-dark">
<noscript>
<strong>We're sorry but Funkwhale doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
......
front/src/components/Footer.vue
+ 0
− 10
View file @ c4ace75a
......@@ -79,13 +79,3 @@ export default {
}
}
</script>
<style scoped>
footer p {
color: grey;
}
footer#footer div.item:hover {
color: rgba(0, 0, 0, 0.87);
}
</style>
front/src/components/notifications/NotificationRow.vue
+ 0
− 3
View file @ c4ace75a
......@@ -126,7 +126,4 @@ export default {
.read > span {
cursor: pointer;
}
.disabled-row {
color: rgba(40, 40, 40, 0.3);
}
</style>
front/src/components/playlists/Card.vue
+ 1
− 5
View file @ c4ace75a
......@@ -59,12 +59,10 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.playlist.card .header .ellipsis.vertical.large.grey {
font-size: 1.2em;
margin-right: 0;
}
</style>
<style scoped>
.card .header {
......@@ -72,8 +70,7 @@ export default {
}
.attached.button {
background-color: rgb(243, 244, 245);
background-size: 25% ;
background-size: 25%;
background-repeat: no-repeat;
background-origin: border-box;
background-position: 0 0, 33.33% 0, 66.67% 0, 100% 0;
......@@ -82,5 +79,4 @@ export default {
font-size: 4em;
box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
}
</style>
front/src/style/_main.scss
+ 9
− 8
View file @ c4ace75a
......@@ -10,6 +10,10 @@
Import this file into your LESS project to use Semantic UI without build tools
*/
// Those semantic-ui-css/*.scss don't exist in the package, but we create them
// via scripts/link-scss-files.sh on postinstall, so we can include theme
// under a class namespace
/* Global */
@import "~semantic-ui-css/components/reset.css";
// we use our custom site css here to avoid loading google font
......@@ -90,6 +94,7 @@ body {
-moz-osx-font-smoothing: grayscale;
}
.instance-chooser {
margin-top: 2em;
}
......@@ -120,14 +125,10 @@ body {
margin-left: 0;
margin-right: 0;
border: none;
box-shadow: inset 0px -2px 0px 0px rgba(34, 36, 38, 0.15);
.ui.item {
border: none;
border-bottom-style: none;
margin-bottom: 0px;
&.active {
box-shadow: inset 0px -2px 0px 0px #000;
}
}
@include media(">tablet") {
padding: 0 2.5rem;
......@@ -142,7 +143,6 @@ body {
@include media(">widedesktop") {
left: $widedesktop-sidebar-width;
}
background-color: white;
.item {
padding-top: 1.5em;
padding-bottom: 1.5em;
......@@ -202,9 +202,6 @@ body {
}
}
.discrete {
color: rgba(0, 0, 0, 0.87);
}
.link {
cursor: pointer;
}
......@@ -326,3 +323,7 @@ td.align.right {
margin-left: 1em;
}
}
@import "./themes/_light.scss";
@import "./themes/_dark.scss";
front/src/style/themes/_dark.scss 0 → 100644
+ 188
− 0
View file @ c4ace75a
$background-color: rgb(43, 58, 66);
$button-hover-color: rgb(33, 48, 56);
$light-background-color: rgb(51, 71, 82);
$input-background-color: rgb(189, 211, 222);
$loading-background-color: rgba(43, 58, 66, 0.9);
$text-color: rgb(223, 235, 240);
$discrete-text-color: rgba(223, 235, 240, 0.904);
$border-color: rgb(63, 88, 102);
$light-shadow-color: rgba(223, 235, 240, 0.15);
$shadow-color: rgba(63, 102, 97, 0.95);
$box-shadow: 0px 1px 3px 0px rgba(63, 88, 102, 0.95), 0px 0px 0px 1px rgba(63, 88, 102, 0.98);
$link-color: rgb(255, 144, 0);
.theme-dark {
background-color: $background-color;
.ui.form textarea, .ui.form select, .ui.selection.dropdown, .ui.dropdown.selected, .ui.dropdown .menu .selected.item, .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] {
background-color: $input-background-color;
&::placeholder {
color: $light-background-color;
}
}
.ui.dropdown .menu .item:hover {
background-color: $light-background-color;
color: $text-color;
}
.main.pusher > .ui.secondary.menu {
background-color: $background-color;
box-shadow: inset 0px -2px 0px 0px $light-background-color;
.ui.item {
color: $text-color;
&.active {
box-shadow: inset 0px -2px 0px 0px $shadow-color;
}
}
}
.ui.modal {
> .header, > .content, > .actions {
background-color: $background-color;
}
> .header {
border-bottom: 1px solid $border-color;
}
> .actions {
border-top: 1px solid $border-color;
}
}
main, .main, footer, .modal {
.ui.menu {
background-color: $light-background-color;
.item {
color: $text-color;
}
}
.ui.secondary.menu .dropdown.item:hover, .ui.secondary.menu .link.item:hover, .ui.secondary.menu a.item:hover {
background: $background-color;
color: $text-color;
}
.header, .ui.form .field > label, .sub.header {
color: $text-color;
}
.ui.attached.header {
background-color: transparent;
}
.ui.toggle.checkbox input:checked ~ .box, .ui.toggle.checkbox input:checked ~ label {
color: $text-color !important;
}
.ui.toggle.checkbox .box::before, .ui.toggle.checkbox label::before {
background-color: $light-background-color;
}
a:not(.ui):not(.discrete) {
color: $link-color;
}
.ui.segment:not(.basic) {
background-color: $light-background-color;
}
.ui.list, .ui.dropdown {
.item, div.item, a.item, .button.item {
background-color: $background-color;
color: $discrete-text-color;
}
.selected.item:not(:hover) {
color: $background-color;
}
}
.ui.divided.items > .item:not(:first-child) {
border-top: 1px solid $border-color;
}
.ui.items {
.extra {
color: $discrete-text-color;
}
}
label, .toggle label {
color: $text-color !important;
}
&, .main.pusher, .ui.vertical.segment {
color: $text-color;
background-color: $background-color;
}
.discrete {
color: $discrete-text-color;
}
.ui.table thead th, .ui.table {
color: $text-color;
}
.ui.divider:not(.vertical):not(.horizontal) {
border-top: 1px solid $border-color;
border-bottom: 1px solid $border-color;
}
.ui.cards > .card, .ui.card {
color: $text-color;
background-color: $background-color;
box-shadow: $box-shadow;
.content, .header, .description {
color: $text-color;
}
.extra, .meta {
color: $discrete-text-color;
}
}
.playlist.card {
.attached.button {
background-color: $light-background-color;
}
}
// buttons
[class='ui button ui button'], [class='ui button'], [class='ui icon button'], [class='ui fluid button'], [class='ui cancel button'] {
background-color: $light-background-color;
color: $text-color;
&:hover {
background-color: $button-hover-color;
}
}
.ui.buttons > .ui.button:not(.basic):not(.inverted), .ui.buttons:not(.basic):not(.inverted) > .button {
box-shadow: 0px 0px 0px 1px $light-shadow-color inset;
}
.ui.basic.buttons:not(:hover):not(.green):not(.orange):not(.yellow):not(.red) .button, .ui.basic.button {
box-shadow: 0px 0px 0px 1px $text-color inset;
&:not(:hover):not(.green):not(.orange):not(.yellow):not(.red) {
color: $text-color !important;
}
}
.ui.basic.buttons .button, .ui.basic.button {
&:hover {
color: $text-color !important;
}
}
.ui.basic.buttons:not(.green):not(.orange):not(.yellow):not(.red) .button:hover, .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):hover, .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):active, .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):focus {
color: $background-color !important;
}
// loading /dimmers
.ui.loading.form::before {
background-color: $loading-background-color;
}
.ui.inverted.dimmer {
background-color: $loading-background-color;
}
// table
.ui.basic.table tbody tr, .ui.table tr td {
border-bottom: 1px solid $border-color;
}
.ui.table thead th {
border-bottom: 1px solid $border-color;
}
.ui.table {
&:not(.basic) {
&, thead th {
background-color: $light-background-color;
}
}
}
}
.ui.link.list.list a.item:hover, .ui.link.list.list .item a:not(.ui):not(.button):hover {
color: $link-color;
}
}
front/src/style/themes/_light.scss 0 → 100644
+ 35
− 0
View file @ c4ace75a
.theme-light {
.main.pusher > .ui.secondary.menu {
box-shadow: inset 0px -2px 0px 0px rgba(34, 36, 38, 0.15);
background-color: white;
.ui.item {
&.active {
box-shadow: inset 0px -2px 0px 0px #000;
}
}
}
.discrete {
color: rgba(0, 0, 0, 0.87);
}
.playlist.card {
.attached.button {
background-color: rgb(243, 244, 245);
}
}
.disabled-row {
color: rgba(40, 40, 40, 0.3);
}
footer p {
color: grey;
}
footer#footer div.item:hover {
color: rgba(0, 0, 0, 0.87);
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment