Merge branch 'ux' into 'main'

Dark theme improvement

See merge request yaal/canaille!121
This commit is contained in:
Éloi Rivard 2023-04-04 08:53:16 +00:00
commit 3b1497c972
3 changed files with 47 additions and 11 deletions

View file

@ -66,6 +66,14 @@ footer a {
margin-top:1em; margin-top:1em;
} }
.pagination {
border-radius: .28571429rem;
overflow: hidden;
}
.disabled.ui.button {
color: rgba(0,0,0,1);
}
/* Fix button appearance for semantic-ui on webkit */ /* Fix button appearance for semantic-ui on webkit */
[type=button] { [type=button] {
@ -92,15 +100,37 @@ i.massive.massive.massive.portrait.icon, i.massive.massive.massive.portrait.icon
background: rgba(0,0,0,.05) !important; background: rgba(0,0,0,.05) !important;
} }
.ui .menu a, .ui a:hover, .ui a i {
text-decoration: none;
}
.ui a {
text-decoration: underline;
color: rgba(0,0,0,.70);
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.logo img {
filter: invert(.8) !important;
}
body, .ui.card .bottom, .ui.toggle.checkbox label:hover::before { body, .ui.card .bottom, .ui.toggle.checkbox label:hover::before {
background-color: #222222; background-color: #222222;
} }
.ui.segment, .ui.menu, .ui.table { .ui.segment, .ui.menu, .ui.table {
background-color: #353535 !important; background-color: #353535 !important;
} }
body, .ui.info.message .header, .ui.input, .ui.toggle.checkbox label, .ui.header, .ui.form .field > label, .ui.list .list > .item > .content, .ui.list > .item > .content, .ui.card, .ui.cards > .card, .ui.card .bottom.button:hover, .ui.card .bottom.button:focus { .ui a:visited, .ui a:visited .icon {
color: rgba(255,255,255,.87) !important;
}
.ui a, .ui a .icon {
color: rgba(255,255,255,.87) !important;
}
#ellipsis-next .disabled.ui.button {
background-color: #c0c1c2;
opacity: 1 !important;
}
body, .ui.menu .active.item, .ui.form:not(.inverted) .field > label:not(.button), .ui.info.message .header, .ui.input, .ui.toggle.checkbox label, .ui.header, .ui.form .field > label, .ui.list .list > .item > .content, .ui.list > .item > .content, .ui.card, .ui.cards > .card, .ui.card .bottom.button:hover, .ui.card .bottom.button:focus {
color: rgba(255,255,255,.87); color: rgba(255,255,255,.87);
} }
.ui.card .bottom, .ui.link.menu .item, .ui.menu .dropdown.item, .ui.menu .link.item, .ui.menu a.item, .ui.icon.menu .item, .ui.header .sub.header, .ui.label, table tbody tr td, .ui.card .bottom.button:hover, .ui.card .bottom.button:focus { .ui.card .bottom, .ui.link.menu .item, .ui.menu .dropdown.item, .ui.menu .link.item, .ui.menu a.item, .ui.icon.menu .item, .ui.header .sub.header, .ui.label, table tbody tr td, .ui.card .bottom.button:hover, .ui.card .bottom.button:focus {
@ -110,6 +140,12 @@ i.massive.massive.massive.portrait.icon, i.massive.massive.massive.portrait.icon
background: #222222 !important; background: #222222 !important;
color: rgba(255,255,255,.87) !important; color: rgba(255,255,255,.87) !important;
} }
.ui.menu .active.item {
background: rgba(0,0,0,.20);
}
.ui.menu .active.item:hover {
background: rgba(0,0,0,.30);
}
table tbody tr td .ui.label:hover { table tbody tr td .ui.label:hover {
color: #353535 !important; color: #353535 !important;
} }
@ -150,7 +186,7 @@ i.massive.massive.massive.portrait.icon, i.massive.massive.massive.portrait.icon
.ui.card .meta { .ui.card .meta {
color: rgba(255,255,255,.7) !important; color: rgba(255,255,255,.7) !important;
} }
.ui.attached.header, .ui.attached.segment { .ui.attached.header, .ui.attached.segment, .ui.attached.menu:not(.tabular):not(.text), .ui.attached.segment:not(.basic), .ui.attached.table {
border: 1px solid #222222; border: 1px solid #222222;
} }
.ui.info.message { .ui.info.message {

View file

@ -60,7 +60,7 @@
{% endmacro %} {% endmacro %}
{% macro pagination(form) %} {% macro pagination(form) %}
<div class="ui right floated buttons"> <div class="ui right floated buttons pagination">
<span class="icon disabled ui button" style="border-radius: 0"> <span class="icon disabled ui button" style="border-radius: 0">
{% trans %}Page{% endtrans %} {% trans %}Page{% endtrans %}
</span> </span>

View file

@ -65,8 +65,8 @@
<div class="item"> <div class="item">
<div class="right floated content"> <div class="right floated content">
<div class="ui buttons"> <div class="ui buttons">
<a class="ui button" href="{{ url_for("admin.test_txt") }}">TXT</a> <a class="ui button primary" href="{{ url_for("admin.test_txt") }}">TXT</a>
<a class="ui button" href="{{ url_for("admin.test_html") }}">HTML</a> <a class="ui button primary" href="{{ url_for("admin.test_html") }}">HTML</a>
</div> </div>
</div> </div>
<div class="middle aligned content"> <div class="middle aligned content">
@ -77,8 +77,8 @@
<div class="item"> <div class="item">
<div class="right floated content"> <div class="right floated content">
<div class="ui buttons"> <div class="ui buttons">
<a class="ui button" href="{{ url_for("admin.password_init_txt") }}">TXT</a> <a class="ui button primary" href="{{ url_for("admin.password_init_txt") }}">TXT</a>
<a class="ui button" href="{{ url_for("admin.password_init_html") }}">HTML</a> <a class="ui button primary" href="{{ url_for("admin.password_init_html") }}">HTML</a>
</div> </div>
</div> </div>
<div class="middle aligned content"> <div class="middle aligned content">
@ -89,8 +89,8 @@
<div class="item"> <div class="item">
<div class="right floated content"> <div class="right floated content">
<div class="ui buttons"> <div class="ui buttons">
<a class="ui button" href="{{ url_for("admin.password_reset_txt") }}">TXT</a> <a class="ui button primary" href="{{ url_for("admin.password_reset_txt") }}">TXT</a>
<a class="ui button" href="{{ url_for("admin.password_reset_html") }}">HTML</a> <a class="ui button primary" href="{{ url_for("admin.password_reset_html") }}">HTML</a>
</div> </div>
</div> </div>
<div class="middle aligned content"> <div class="middle aligned content">
@ -101,8 +101,8 @@
<div class="item"> <div class="item">
<div class="right floated content"> <div class="right floated content">
<div class="ui buttons"> <div class="ui buttons">
<a class="ui button" href="{{ url_for("admin.invitation_txt", uid=user.uid, email=user.mail[0]) }}">TXT</a> <a class="ui button primary" href="{{ url_for("admin.invitation_txt", uid=user.uid, email=user.mail[0]) }}">TXT</a>
<a class="ui button" href="{{ url_for("admin.invitation_html", uid=user.uid, email=user.mail[0]) }}">HTML</a> <a class="ui button primary" href="{{ url_for("admin.invitation_html", uid=user.uid, email=user.mail[0]) }}">HTML</a>
</div> </div>
</div> </div>
<div class="middle aligned content"> <div class="middle aligned content">