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
......@@ -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>
......
......@@ -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>
......@@ -126,7 +126,4 @@ export default {
.read > span {
cursor: pointer;
}
.disabled-row {
color: rgba(40, 40, 40, 0.3);
}
</style>
......@@ -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>
......@@ -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";
$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;
}
}
.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% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment