forked from Github-Mirrors/canaille
268 lines
7.3 KiB
CSS
268 lines
7.3 KiB
CSS
@media only screen and (min-width: 1200px) {
|
||
.ui.ui.ui.container:not(.fluid) {
|
||
width: 770px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
|
||
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
||
.ui.ui.ui.container:not(.fluid) {
|
||
width: 790px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width:768px) {
|
||
.ui .grid .three.wide.column {
|
||
width: 100% !important;
|
||
text-align: center;
|
||
}
|
||
.ui .grid .thirteen.wide.column {
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
|
||
|
||
body {
|
||
background: #F8F8F8;
|
||
padding: 1em;
|
||
}
|
||
|
||
.logo {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
display: block;
|
||
}
|
||
|
||
.logo img{
|
||
width: 50px;
|
||
max-height: 50px;
|
||
}
|
||
|
||
.menu-container {
|
||
margin-bottom: 1em;
|
||
}
|
||
|
||
.menu-container .ui.item.menu {
|
||
justify-content: normal;
|
||
}
|
||
|
||
footer {
|
||
font-size: x-small;
|
||
text-align: center;
|
||
}
|
||
|
||
footer a {
|
||
color: #B0B0B0;
|
||
}
|
||
|
||
.ui.masthead .ui.header {
|
||
margin-bottom: 1em;
|
||
}
|
||
.ui.masthead .ui.text p {
|
||
margin-bottom: 1em;
|
||
margin-top:1em;
|
||
}
|
||
|
||
.pagination {
|
||
border-radius: .28571429rem;
|
||
overflow: hidden;
|
||
}
|
||
.disabled.ui.button {
|
||
color: rgba(0,0,0,1);
|
||
}
|
||
|
||
.progress_bar:first-child {
|
||
margin: 1em 0 .28571429rem 0;
|
||
}
|
||
|
||
/* Fix button appearance for semantic-ui on webkit */
|
||
[type=button] {
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
.ui.corner.labeled.input .ui.dropdown .dropdown.icon {
|
||
margin-right: 1.5em;
|
||
}
|
||
|
||
i.massive.massive.massive.portrait.icon, i.massive.massive.massive.portrait.icons {
|
||
font-size: 8em;
|
||
margin-bottom: 15px;
|
||
}
|
||
.profile-form label img{
|
||
cursor: pointer;
|
||
}
|
||
|
||
.profile-form label i{
|
||
cursor: pointer;
|
||
}
|
||
|
||
.dropdown-active {
|
||
background: rgba(0,0,0,.05) !important;
|
||
}
|
||
|
||
/**
|
||
* Workaround for
|
||
* https://github.com/fomantic/Fomantic-UI/issues/2829
|
||
*/
|
||
.ui.corner.labeled.action.input .ui.corner.label {
|
||
right:40px;
|
||
z-index: 5;
|
||
}
|
||
|
||
.ui.corner.labeled.action.input .ui.button {
|
||
z-index: 99;
|
||
}
|
||
|
||
/* NO JS */
|
||
|
||
select.ui.multiple.dropdown {
|
||
height: auto;
|
||
max-height: 300px;
|
||
}
|
||
|
||
select.ui.multiple.dropdown option[selected] {
|
||
background-color: #F4F4F4;
|
||
font-weight: 700;
|
||
border: 0 solid transparent;
|
||
border-radius: .28571429rem;
|
||
padding: .35714286em .78571429em;
|
||
margin: .14285714rem .28571429rem .14285714rem 0;
|
||
box-shadow: 0 0 0 1px rgba(34,36,38,.15) inset;
|
||
}
|
||
|
||
/* MEDIA QUERIES */
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
.logo img {
|
||
filter: invert(.8) !important;
|
||
}
|
||
body, .ui.card .bottom, .ui.toggle.checkbox label:hover::before {
|
||
background-color: #222222;
|
||
}
|
||
.ui.segment, .ui.menu, .ui.table {
|
||
background-color: #353535 !important;
|
||
}
|
||
.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);
|
||
}
|
||
.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 {
|
||
color: rgba(255,255,255,.7);
|
||
}
|
||
.ui.selection.dropdown, .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="file"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="text"], .ui.form input[type="time"], .ui.form input[type="url"] {
|
||
background: #222222 !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 {
|
||
color: #353535 !important;
|
||
}
|
||
.ui.corner.label {
|
||
border-color: rgba(0,0,0,.2);
|
||
}
|
||
.ui.label, table tbody tr td, .ui.card .bottom.button:hover, .ui.card .bottom.button:focus {
|
||
background-color: #353535;
|
||
}
|
||
.ui.button {
|
||
background-color: #282828;
|
||
}
|
||
.ui.button:hover, .ui.button:focus {
|
||
background-color: #181818;
|
||
}
|
||
.ui.basic.negative.button, .ui.basic.negative.buttons .button {
|
||
box-shadow: 0 0 0 1px #ffb7b7 inset;
|
||
color: #ffb7b7;
|
||
}
|
||
.ui.right.floated.buttons.pagination .ui.button {
|
||
color: #F4F4F4;
|
||
}
|
||
.ui.right.floated.buttons.pagination .ui.button.active {
|
||
color: #181818;
|
||
}
|
||
.disabled.ui.button {
|
||
color: #c0c1c2;
|
||
}
|
||
.ui.link.menu .item:hover, .ui.menu .dropdown.item:hover, .ui.menu .link.item:hover, .ui.menu a.item:hover, .ui.menu a.item.active:hover {
|
||
color: rgba(255,255,255,.95);
|
||
}
|
||
.ui.attached.header, .ui.toggle.checkbox label::before, .ui.table > thead > tr > th, .ui.table > tfoot > tr > th, table tbody tr td .ui.label, .ui.card, .ui.cards > .card, .ui.message, .ui.info.message, .ui.success.message {
|
||
background-color: #282828;
|
||
color: rgba(255,255,255,.87) !important;
|
||
}
|
||
table tbody tr td {
|
||
color: rgba(255,255,255,.87) !important;
|
||
}
|
||
table tbody tr td .ui.label:hover {
|
||
background-color: rgba(255,255,255,.87);
|
||
}
|
||
table.no-footer, .ui.table {
|
||
border: 2px solid #282828;
|
||
}
|
||
.ui.table, .ui.card .header, .ui.card .description, .ui.message, .ui.info.message, .ui.success.message, .ui.toggle.checkbox {
|
||
color: rgba(255,255,255,.87) !important;
|
||
}
|
||
.ui.card, .ui.cards > .card {
|
||
border: 2px solid #222222;
|
||
outline: none;
|
||
box-shadow: none;
|
||
}
|
||
.ui.card .meta {
|
||
color: rgba(255,255,255,.7) !important;
|
||
}
|
||
.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;
|
||
}
|
||
.ui.info.message {
|
||
background-color: rgba(0, 60, 255, 0.05);
|
||
}
|
||
.ui.success.message, .ui.positive.message {
|
||
background-color: rgba(22, 255, 72, 0.05);
|
||
}
|
||
.ui.warning.message {
|
||
background-color: rgba(255, 217, 0, 0.05);
|
||
}
|
||
.ui.negative.message, .ui.error.message {
|
||
background-color: rgba(255, 0, 0, 0.05);
|
||
}
|
||
.ui.form .field .dropdown .menu > .item {
|
||
background-color: #222;
|
||
border-top: 1px solid #181818;
|
||
color: rgba(255,255,255,0.87);
|
||
}
|
||
.ui.form .field .dropdown .menu > .item:hover {
|
||
background-color: #282828;
|
||
}
|
||
.ui.form .field.field input:autofill {
|
||
box-shadow: 0 0 0 100px #888888 inset !important;
|
||
border: 1px solid rgba(255,255,255,0.60) !important;
|
||
}
|
||
.ui.form .field.field input:autofill:focus {
|
||
box-shadow: 0 0 0 100px #888888 inset !important;
|
||
border: 1px solid rgba(255,255,255,0.87) !important;
|
||
}
|
||
.ui.progress {
|
||
background: #222222;
|
||
}
|
||
|
||
.ui.label.token-label {
|
||
padding-left: 0;
|
||
}
|
||
}
|