mirror of
https://github.com/octoleo/syncthing.git
synced 2024-09-20 21:59:01 +00:00
7d3c390c91
Currently, the code contains a "mobile phone" fix to allow wrapping of long lines in table heading and cells. However, the fix is applied to all screen sizes equal or below 768 px wide, which causes the layout to break on tablet-sized screens. The commit moves the "mobile" fix to the actual mobile media query, which is applied to screens up to 419 px wide. It is only really needed there, where it synergises with the existing fix that changes table cell display to "block". There is no need to wrap the text on larger screens, as there is more than enough space to display the lines in full on them. Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
519 lines
10 KiB
CSS
519 lines
10 KiB
CSS
/*
|
|
// Copyright (C) 2014 The Syncthing Authors.
|
|
//
|
|
// This Source Code Form is subject to the terms of the Mozilla Public
|
|
// License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
|
// You can obtain one at https://mozilla.org/MPL/2.0/.
|
|
|
|
*/
|
|
|
|
body {
|
|
padding-bottom: 70px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
line-height: 1.25;
|
|
}
|
|
|
|
ul+h5 {
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
.content {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.panel-progress {
|
|
height: 3px;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
display: block;
|
|
}
|
|
|
|
.checkbox {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.checkbox input[type="checkbox"], .radio input[type="radio"] {
|
|
float: none; /* issue #1197 */
|
|
}
|
|
|
|
#advancedAccordion input.form-control[type="checkbox"] {
|
|
box-shadow: none;
|
|
margin: 0;
|
|
width: auto;
|
|
}
|
|
|
|
.popover {
|
|
max-width: none;
|
|
min-width: 250px;
|
|
}
|
|
|
|
.tooltip {
|
|
word-wrap:break-word;
|
|
}
|
|
|
|
.text-monospace {
|
|
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
}
|
|
|
|
.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
|
|
border-top: none;
|
|
}
|
|
|
|
.logo {
|
|
margin: 0;
|
|
padding: 0;
|
|
top: -5px;
|
|
position: relative;
|
|
}
|
|
|
|
.list-no-bullet {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.li-column {
|
|
display: inline-block;
|
|
min-width: 7em;
|
|
margin-right: 1em;
|
|
padding: 1px 4px;
|
|
margin: 2px 2px;
|
|
}
|
|
.li-column span.data {
|
|
margin-left: 0.5em;
|
|
min-width: 10em;
|
|
text-align: right;
|
|
display: inline-block;
|
|
}
|
|
|
|
.ng-cloak {
|
|
display: none !important;
|
|
}
|
|
|
|
.table th {
|
|
white-space: nowrap;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.table td {
|
|
/*padding-left: 20px !important;*/
|
|
}
|
|
|
|
.table td.small-data {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Removing text decoration on anchor link hover pull request: #4135 */
|
|
.table td.small-data span a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
table.table-condensed {
|
|
table-layout: fixed;
|
|
}
|
|
|
|
table.table-dynamic {
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
|
|
table.table-condensed td,
|
|
table.table-condensed th {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
table.table-condensed td.no-overflow-ellipse {
|
|
white-space: normal;
|
|
}
|
|
|
|
table.table-auto {
|
|
table-layout: auto;
|
|
}
|
|
|
|
table.table-auto th {
|
|
width: 1px;
|
|
}
|
|
|
|
table.table-auto td {
|
|
max-width: 0px;
|
|
}
|
|
|
|
/* Wrap long file paths to prevent text overflow. See issue #6268. */
|
|
.file-path {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.folder-advanced {
|
|
padding: 1rem;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.folder-advanced-toggle {
|
|
cursor: pointer;
|
|
}
|
|
.folder-advanced-toggle .collapse,
|
|
.folder-advanced-toggle.collapsed .expand {
|
|
display: inline-block;
|
|
}
|
|
|
|
.folder-advanced-toggle.collapsed .collapse,
|
|
.folder-advanced-toggle .expand{
|
|
display: none;
|
|
}
|
|
|
|
li[language-select] > .dropdown-menu {
|
|
column-count: 2;
|
|
column-gap: 0;
|
|
width: 450px;
|
|
}
|
|
|
|
li[language-select] > .dropdown-menu > li > a {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.nav>li{
|
|
float: left;
|
|
}
|
|
.navbar-right {
|
|
/* to align with panel */
|
|
padding-right: 15px;
|
|
float: right;
|
|
}
|
|
|
|
.panel-body .table-condensed {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dl-horizontal.dl-narrow dt {
|
|
width: 40px;
|
|
}
|
|
|
|
.dl-horizontal.dl-narrow dd {
|
|
margin-left: 60px;
|
|
}
|
|
|
|
/**
|
|
* Panel, Model and Accordion Title bars
|
|
*/
|
|
|
|
.panel-icon {
|
|
float: left;
|
|
margin-right: 15px;
|
|
margin-top: 0.125em;
|
|
margin-bottom: 0.125em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.modal-title .panel-icon {
|
|
margin-top: 0.25em;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
button.panel-heading {
|
|
display: block;
|
|
position: relative;
|
|
width: 100%;
|
|
text-align: left;
|
|
border-top-width: 0;
|
|
border-left-width: 0;
|
|
border-right-width: 0;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.panel-heading .panel-title-text {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.panel-heading .panel-status {
|
|
margin-left:15px;
|
|
}
|
|
|
|
identicon {
|
|
width: 1em;
|
|
height: 1em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.identicon {
|
|
width: 1em;
|
|
height: 1em;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
a.toggler {
|
|
color: inherit;
|
|
}
|
|
a.toggler:hover {
|
|
border-bottom: 1px dashed;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/**
|
|
* Panel padding decrease
|
|
*/
|
|
|
|
.panel-collapse .panel-body {
|
|
padding: 5px;
|
|
}
|
|
|
|
/**
|
|
* Progress bars with centered text
|
|
*/
|
|
|
|
.progress {
|
|
margin-bottom: 0px;
|
|
position: relative;
|
|
}
|
|
|
|
.progress span.frontal {
|
|
text-align: center;
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.three-columns {
|
|
-webkit-column-count: 3;
|
|
-moz-column-count: 3;
|
|
column-count: 3;
|
|
}
|
|
|
|
.two-columns {
|
|
-webkit-column-count: 2;
|
|
-moz-column-count: 2;
|
|
column-count: 2;
|
|
}
|
|
|
|
ul.three-columns li, ul.two-columns li {
|
|
padding-left: 0.5em;
|
|
text-indent: -0.5em;
|
|
}
|
|
|
|
.navbar-fixed-bottom {
|
|
z-index: 980;
|
|
}
|
|
|
|
/*
|
|
* Restore Versions tweaks
|
|
*/
|
|
|
|
#restoreTree-container {
|
|
overflow-y: scroll;
|
|
resize: vertical;
|
|
/* Limit height to prevent vertical screen overflow. */
|
|
max-height: calc(100vh - 390px);
|
|
/* Always fit at least one folder with dropdown open. */
|
|
min-height: 136px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
#restoreTree-container {
|
|
max-height: calc(100vh - 401px);
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
#restoreTree-container {
|
|
max-height: calc(100vh - 333px);
|
|
}
|
|
}
|
|
|
|
/* Ignore fixed height when manually resized. */
|
|
#restoreTree-container[style*="height"] {
|
|
max-height: none;
|
|
}
|
|
|
|
/* Remove table outline as rows have own focus style already. */
|
|
#restoreTree:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
/* Align dropdown with title first line. */
|
|
#restoreTree td + td {
|
|
padding-top: 4px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* Reduce space between toggle and menu on mobile. */
|
|
#restoreTree .dropdown-toggle {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Change direction to remain on screen on mobile. */
|
|
#restoreTree .dropdown-menu {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
/* Ensure maximum space for filtering and date range. */
|
|
#restoreVersions .form-group,
|
|
#restoreVersions .form-control {
|
|
width: 100%;
|
|
}
|
|
|
|
/** Footer nav on small devices **/
|
|
@media (max-width: 1199px) {
|
|
/* Stay at the end of the page, with space reserved for the footer
|
|
usually taking up two rows. */
|
|
|
|
html {
|
|
position: relative;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
.navbar-fixed-bottom {
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
/* Layout after the normal contents, as this is when the footer switches
|
|
to a vertical layout. */
|
|
|
|
body {
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
.navbar-brand {
|
|
margin: 3.25px -15px;
|
|
}
|
|
|
|
.navbar-fixed-bottom {
|
|
position: relative;
|
|
}
|
|
|
|
.navbar-nav .open .dropdown-menu {
|
|
position: absolute;
|
|
left: auto;
|
|
right: 0;
|
|
background-color: #ffffff;
|
|
border: 1px solid #cccccc;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
li[language-select] {
|
|
position: static !important;
|
|
}
|
|
|
|
li[language-select] > .dropdown-menu {
|
|
column-count: auto;
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
margin-top: -12px !important;
|
|
max-width: 450px;
|
|
overflow-y: scroll;
|
|
/* height of 5.5 elements + negative margin-top */
|
|
height: 276px;
|
|
}
|
|
|
|
.two-columns {
|
|
-webkit-column-count: 1;
|
|
-moz-column-count: 1;
|
|
column-count: 1;
|
|
}
|
|
}
|
|
|
|
@media (max-width:479px) {
|
|
|
|
nav .dropdown-toggle {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.navbar-nav .open .dropdown-menu > li > a {
|
|
padding: 12px 15px 12px 25px;
|
|
}
|
|
|
|
.navbar-fixed-bottom li {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.tab-content {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
@media (max-width: 419px) {
|
|
/* the selectors are build to target only the content of folder and device
|
|
panels as it would "destroy" e.g. out of sync or recent changes listings */
|
|
div[id^='device-'].panel-collapse table,
|
|
div[id^='folder-'].panel-collapse table,
|
|
div[id^='device-'].panel-collapse tbody,
|
|
div[id^='folder-'].panel-collapse tbody,
|
|
div[id^='device-'].panel-collapse tr,
|
|
div[id^='folder-'].panel-collapse tr {
|
|
display: block;
|
|
}
|
|
div[id^='device-'].panel-collapse th,
|
|
div[id^='folder-'].panel-collapse th,
|
|
div[id^='device-'].panel-collapse td,
|
|
div[id^='folder-'].panel-collapse td {
|
|
display: block;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* All buttons, except panel headings, get bottom margin, as they
|
|
won't fit beside each other anymore. Reduce footer padding to
|
|
compensate for the margin. */
|
|
.btn:not(.panel-heading),
|
|
.btn:not(.panel-heading) + .btn:not(.panel-heading) {
|
|
margin-bottom: 10px;
|
|
}
|
|
.panel-footer {
|
|
padding-bottom: 0;
|
|
}
|
|
.modal-footer {
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
table.table-auto td,
|
|
table.table-auto th,
|
|
table.table-condensed td,
|
|
table.table-condensed th {
|
|
/* for mobile phones to allow linebreaks in long repro folder/shared with
|
|
* columns. */
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
.form-horizontal .form-group {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.form-horizontal {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Use the same style as Bootstrap uses for disabled <select>. */
|
|
.form-control option[disabled] {
|
|
background-color: #eeeeee;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Make a "well" look more like a readonly text input when grouped with a button */
|
|
.input-group .well-sm {
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
/* CJK languages don't use italic at all, hence don't force it on them. */
|
|
html[lang|="zh"] i,
|
|
html[lang="ja"] i,
|
|
html[lang|="ko"] i {
|
|
font-style: normal;
|
|
}
|