mirror of
https://github.com/octoleo/syncthing.git
synced 2024-09-20 13:49:02 +00:00
5baf5fedb5
Currently, a custom JS script is used to select the whole device ID on click. However, the current script isn't compatible with all browsers (and in IE in particular), making it impossible to select the ID in them at all. Additionally, the same functionality is already available in CSS with no such drawbacks, as the whole selection process is handled by the Web browser natively, which is lightweight and does not require custom code. Thus, remove the currently used JS script completely, replacing it with a new CSS class that can be added to an element when required. If the browser does not support the CSS, the user can still select the element manually, which makes it safer than the current behaviour that can block the user from being able to select the element at all. Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
523 lines
10 KiB
CSS
523 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;
|
|
}
|
|
|
|
.select-on-click {
|
|
user-select: all;
|
|
}
|