styles.css 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986
  1. /* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
  2. This file is licensed under the Affero General Public License version 3 or later.
  3. See the COPYING-README file. */
  4. html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; }
  5. html, body { height:100%; }
  6. article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }
  7. body { line-height:1.5; }
  8. table { border-collapse:separate; border-spacing:0; white-space:nowrap; }
  9. caption, th, td { text-align:left; font-weight:normal; }
  10. table, td, th { vertical-align:middle; }
  11. a { border:0; color:#000; text-decoration:none;}
  12. a, a *, input, input *, select, .button span, label { cursor:pointer; }
  13. ul { list-style:none; }
  14. body {
  15. background-color: #ffffff;
  16. font-weight: 400;
  17. font-size: .8em;
  18. line-height: 1.6em;
  19. font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
  20. color: #000;
  21. height: auto;
  22. }
  23. #body-login {
  24. text-align: center;
  25. background-color: #0082c9;
  26. background-image: url('../img/background.jpg?v=1');
  27. background-position: 50% 50%;
  28. background-repeat: no-repeat;
  29. background-size: cover;
  30. }
  31. .two-factor-header {
  32. text-align: center;
  33. }
  34. .two-factor-provider {
  35. text-align: center;
  36. width: 258px !important;
  37. display: inline-block;
  38. margin-bottom: 0 !important;
  39. background-color: rgba(0,0,0,0.3) !important;
  40. border: none !important;
  41. }
  42. .two-factor-link {
  43. display: inline-block;
  44. padding: 12px;
  45. color: rgba(255, 255, 255, .75);
  46. }
  47. .float-spinner {
  48. height: 32px;
  49. display: none;
  50. }
  51. #body-login .float-spinner {
  52. margin-top: -32px;
  53. padding-top: 32px;
  54. }
  55. #nojavascript {
  56. position: fixed;
  57. top: 0;
  58. bottom: 0;
  59. height: 100%;
  60. width: 100%;
  61. z-index: 9000;
  62. text-align: center;
  63. background-color: rgba(0,0,0,0.5);
  64. color: #fff;
  65. line-height: 125%;
  66. font-size: 24px;
  67. }
  68. #nojavascript div {
  69. display: block;
  70. position: relative;
  71. width: 50%;
  72. top: 35%;
  73. margin: 0px auto;
  74. }
  75. #nojavascript a {
  76. color: #fff;
  77. border-bottom: 2px dotted #fff;
  78. }
  79. #nojavascript a:hover,
  80. #nojavascript a:focus {
  81. color: #ddd;
  82. }
  83. /* SCROLLING */
  84. ::-webkit-scrollbar {
  85. width: 5px;
  86. }
  87. ::-webkit-scrollbar-track-piece {
  88. background-color: transparent;
  89. }
  90. ::-webkit-scrollbar-thumb {
  91. background: #ddd;
  92. border-radius: 3px;
  93. }
  94. /* Searchbox */
  95. .searchbox input[type="search"] {
  96. position: relative;
  97. font-size: 1.2em;
  98. padding: 3px;
  99. padding-left: 25px;
  100. background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center;
  101. color: #fff;
  102. border: 0;
  103. border-radius: 3px;
  104. margin-top: 9px;
  105. float: right;
  106. width: 0;
  107. cursor: pointer;
  108. -webkit-transition: all 100ms;
  109. transition: all 100ms;
  110. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  111. opacity: .7;
  112. }
  113. .searchbox input[type="search"]:focus,
  114. .searchbox input[type="search"]:active,
  115. .searchbox input[type="search"]:valid {
  116. color: #fff;
  117. width: 155px;
  118. max-width: 50%;
  119. cursor: text;
  120. background-color: #0082c9;
  121. border: 1px solid rgba(255, 255, 255, .5);
  122. }
  123. /* CONTENT ------------------------------------------------------------------ */
  124. #controls {
  125. box-sizing: border-box;
  126. position: fixed;
  127. top: 45px;
  128. right: 0;
  129. left: 0;
  130. height: 44px;
  131. width: 100%;
  132. padding: 0;
  133. margin: 0;
  134. background-color: rgba(255, 255, 255, .95);
  135. z-index: 50;
  136. -webkit-user-select: none;
  137. -moz-user-select: none;
  138. -ms-user-select: none;
  139. user-select: none;
  140. }
  141. /* position controls for apps with app-navigation */
  142. #app-navigation+#app-content #controls {
  143. left: 250px;
  144. }
  145. .viewer-mode #app-navigation+#app-content #controls {
  146. left: 0;
  147. }
  148. #controls .button,
  149. #controls button,
  150. #controls input[type='submit'],
  151. #controls input[type='text'],
  152. #controls input[type='password'],
  153. #controls select {
  154. box-sizing: border-box;
  155. display: inline-block;
  156. height: 36px;
  157. padding: 7px 10px
  158. }
  159. #controls .button.hidden {
  160. display: none;
  161. }
  162. #content {
  163. position: relative;
  164. height: 100%;
  165. width: 100%;
  166. }
  167. #content .hascontrols {
  168. margin-top: 45px;
  169. }
  170. #content-wrapper {
  171. position: absolute;
  172. height: 100%;
  173. width: 100%;
  174. overflow-x: hidden; /* prevent horizontal scrollbar */
  175. padding-top: 45px;
  176. box-sizing:border-box;
  177. }
  178. /* allow horizontal scrollbar for personal and admin settings */
  179. #body-settings:not(.snapjs-left) .app-settings {
  180. overflow-x: auto;
  181. }
  182. #emptycontent,
  183. .emptycontent {
  184. color: #888;
  185. text-align: center;
  186. margin-top: 30vh;
  187. width: 100%;
  188. }
  189. #emptycontent.emptycontent-search,
  190. .emptycontent.emptycontent-search {
  191. position: static;
  192. }
  193. #emptycontent h2,
  194. .emptycontent h2 {
  195. margin-bottom: 10px;
  196. line-height: 150%;
  197. }
  198. #emptycontent [class^="icon-"],
  199. .emptycontent [class^="icon-"],
  200. #emptycontent [class*=" icon-"],
  201. .emptycontent [class*=" icon-"] {
  202. background-size: 64px;
  203. height: 64px;
  204. width: 64px;
  205. margin: 0 auto 15px;
  206. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  207. opacity: .4;
  208. }
  209. /* LOG IN & INSTALLATION ------------------------------------------------------------ */
  210. /* Some whitespace to the top */
  211. #body-login #header {
  212. padding-top: 100px;
  213. }
  214. #body-login {
  215. background-attachment: fixed; /* fix background gradient */
  216. height: 100%; /* fix sticky footer */
  217. }
  218. /* Dark subtle label text */
  219. #body-login p.info,
  220. #body-login form fieldset legend,
  221. #body-login #datadirContent label,
  222. #body-login form fieldset .warning-info,
  223. #body-login form input[type="checkbox"]+label {
  224. text-align: center;
  225. color: #fff;
  226. }
  227. /* overrides another !important statement that sets this to unreadable black */
  228. #body-login form .warning input[type="checkbox"]:hover+label,
  229. #body-login form .warning input[type="checkbox"]:focus+label,
  230. #body-login form .warning input[type="checkbox"]+label {
  231. color: #fff !important;
  232. }
  233. #body-login .update h2 {
  234. margin: 0 0 20px;
  235. }
  236. #body-login .update a {
  237. color: #fff;
  238. border-bottom: 1px solid #aaa;
  239. }
  240. #body-login .infogroup {
  241. margin-bottom: 15px;
  242. }
  243. #body-login p#message img {
  244. vertical-align: middle;
  245. padding: 5px;
  246. }
  247. #body-login div.buttons {
  248. text-align: center;
  249. }
  250. #body-login p.info {
  251. width: 22em;
  252. margin: 0 auto;
  253. padding-top: 20px;
  254. -webkit-user-select: none;
  255. -moz-user-select: none;
  256. -ms-user-select: none;
  257. user-select: none;
  258. }
  259. #body-login p.info a {
  260. font-weight: 600;
  261. padding: 13px;
  262. margin: -13px;
  263. }
  264. #body-login form {
  265. position: relative;
  266. width: 280px;
  267. margin: 16px auto;
  268. padding: 0;
  269. }
  270. #body-login form fieldset {
  271. margin-bottom: 20px;
  272. text-align: left;
  273. -webkit-user-select: none;
  274. -moz-user-select: none;
  275. -ms-user-select: none;
  276. user-select: none;
  277. }
  278. #body-login form #sqliteInformation {
  279. margin-top: -20px;
  280. margin-bottom: 20px;
  281. }
  282. #body-login form #adminaccount {
  283. margin-bottom: 15px;
  284. }
  285. #body-login form fieldset legend, #datadirContent label {
  286. width: 100%;
  287. }
  288. #body-login #datadirContent label {
  289. display: block;
  290. margin: 0;
  291. }
  292. #body-login form #datadirField legend {
  293. margin-bottom: 15px;
  294. }
  295. #body-login #showAdvanced {
  296. padding: 13px; /* increase clickable area of Advanced dropdown */
  297. }
  298. #body-login #showAdvanced img {
  299. vertical-align: bottom; /* adjust position of Advanced dropdown arrow */
  300. margin-left: -4px;
  301. }
  302. #body-login .icon-info-white {
  303. padding: 10px;
  304. }
  305. /* strengthify wrapper */
  306. #body-login .strengthify-wrapper {
  307. display: inline-block;
  308. position: relative;
  309. left: 15px;
  310. top: -23px;
  311. width: 250px;
  312. }
  313. /* tipsy for the strengthify wrapper looks better with following font settings */
  314. #body-login .tipsy-inner {
  315. font-weight: bold;
  316. color: #ccc;
  317. }
  318. /* General new input field look */
  319. #body-login input[type="text"],
  320. #body-login input[type="password"],
  321. #body-login input[type="email"] {
  322. border: none;
  323. font-weight: 300;
  324. }
  325. /* Nicely grouping input field sets */
  326. .grouptop,
  327. .groupmiddle,
  328. .groupbottom {
  329. position: relative;
  330. -webkit-user-select: none;
  331. -moz-user-select: none;
  332. -ms-user-select: none;
  333. user-select: none;
  334. }
  335. #body-login .grouptop input,
  336. .grouptop input {
  337. margin-bottom: 0 !important;
  338. border-bottom: 0 !important;
  339. border-bottom-left-radius: 0 !important;
  340. border-bottom-right-radius: 0 !important;
  341. }
  342. #body-login .groupmiddle input,
  343. .groupmiddle input {
  344. margin-top: 0 !important;
  345. margin-bottom: 0 !important;
  346. border-top: 0 !important;
  347. border-bottom: 0 !important;
  348. border-radius: 0 !important;
  349. box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
  350. }
  351. #body-login .groupbottom input,
  352. .groupbottom input {
  353. margin-top: 0 !important;
  354. border-top: 0 !important;
  355. border-top-right-radius: 0 !important;
  356. border-top-left-radius: 0 !important;
  357. box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
  358. }
  359. #body-login .groupbottom input[type=submit] {
  360. box-shadow: none !important;
  361. }
  362. /* keep the labels for screen readers but hide them since we use placeholders */
  363. label.infield {
  364. display: none;
  365. }
  366. #body-login form input[type="checkbox"]+label {
  367. position: relative;
  368. margin: 0;
  369. padding: 14px;
  370. vertical-align: middle;
  371. -webkit-user-select: none;
  372. -moz-user-select: none;
  373. -ms-user-select: none;
  374. user-select: none;
  375. }
  376. #body-login form .errors { background:#fed7d7; border:1px solid #f00; list-style-indent:inside; margin:0 0 2em; padding:1em; }
  377. #body-login .success { background:#d7fed7; border:1px solid #0f0; width: 35%; margin: 30px auto; padding:1em; text-align: center;}
  378. #body-login #showAdvanced > img {
  379. padding: 4px;
  380. box-sizing: border-box;
  381. }
  382. #body-login p.info a, #body-login #showAdvanced {
  383. color: #fff;
  384. }
  385. #body-login #remember_login:hover+label,
  386. #body-login #remember_login:focus+label,
  387. #body-login #forgot-password:hover,
  388. #body-login #forgot-password:focus,
  389. #body-login p.info a:hover,
  390. #body-login p.info a:focus {
  391. opacity: .6;
  392. }
  393. #body-login footer .info {
  394. white-space: nowrap;
  395. }
  396. /* Show password toggle */
  397. #show, #dbpassword {
  398. position: absolute;
  399. right: 1em;
  400. top: .8em;
  401. float: right;
  402. }
  403. #show, #dbpassword, #personal-show {
  404. display: none;
  405. }
  406. #show + label, #dbpassword + label {
  407. right: 21px;
  408. top: 15px !important;
  409. margin: -14px !important;
  410. padding: 14px !important;
  411. }
  412. #show:checked + label, #dbpassword:checked + label, #personal-show:checked + label {
  413. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  414. opacity: .8;
  415. }
  416. #show + label, #dbpassword + label, #personal-show + label {
  417. position: absolute !important;
  418. height: 20px;
  419. width: 24px;
  420. background-image: url('../img/actions/toggle.svg?v=1');
  421. background-repeat: no-repeat;
  422. background-position: center;
  423. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  424. opacity: .3;
  425. }
  426. #show + label:before, #dbpassword + label:before, #personal-show + label:before {
  427. display: none;
  428. }
  429. #pass2, input[name="personal-password-clone"] {
  430. padding: .6em 2.5em .4em .4em;
  431. width: 8em;
  432. }
  433. #personal-show + label {
  434. height: 14px;
  435. margin-top: -25px;
  436. left: 295px;
  437. display: block;
  438. }
  439. #passwordbutton {
  440. margin-left: .5em;
  441. }
  442. /* Database selector */
  443. #body-login form #selectDbType { text-align:center; white-space: nowrap; }
  444. #body-login form #selectDbType .info {
  445. white-space: normal;
  446. }
  447. #body-login form #selectDbType label {
  448. position:static; margin:0 -3px 5px; padding:.4em;
  449. font-size:12px; background:#f8f8f8; color:#888; cursor:pointer;
  450. border: 1px solid #ddd;
  451. }
  452. #body-login form #selectDbType label.ui-state-hover, #body-login form #selectDbType label.ui-state-active { color:#000; background-color:#e8e8e8; }
  453. /* Warnings and errors are the same */
  454. #body-login .warning,
  455. #body-login .update,
  456. #body-login .error {
  457. display: block;
  458. padding: 10px;
  459. background-color: rgba(0,0,0,.3);
  460. color: #fff;
  461. text-align: left;
  462. border-radius: 3px;
  463. cursor: default;
  464. }
  465. #body-login .update {
  466. width: inherit;
  467. text-align: center;
  468. }
  469. #body-login .update .appList {
  470. list-style: disc;
  471. text-align: left;
  472. margin-left: 25px;
  473. margin-right: 25px;
  474. }
  475. #body-login .v-align {
  476. width: inherit;
  477. }
  478. #body-login .update img.float-spinner {
  479. float: left;
  480. }
  481. #body-user .warning, #body-settings .warning {
  482. margin-top: 8px;
  483. padding: 5px;
  484. background: #fdd;
  485. border-radius: 3px;
  486. }
  487. .warning legend,
  488. .warning a,
  489. .error a {
  490. color: #fff !important;
  491. font-weight: 600 !important;
  492. }
  493. .error a.button {
  494. color: #555 !important;
  495. display: inline-block;
  496. text-align: center;
  497. }
  498. .error pre {
  499. white-space: pre-wrap;
  500. text-align: left;
  501. }
  502. .error-wide {
  503. width: 700px;
  504. margin-left: -200px !important;
  505. }
  506. .error-wide .button {
  507. color: black !important;
  508. }
  509. .warning-input {
  510. border-color: #ce3702 !important;
  511. }
  512. /* Fixes for log in page, TODO should be removed some time */
  513. #body-login ul.error-wide {
  514. margin-top: 35px;
  515. }
  516. #body-login .warning {
  517. margin: 0 7px 5px 4px;
  518. }
  519. #body-login .warning legend {
  520. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  521. opacity: 1;
  522. }
  523. #body-login a.warning {
  524. cursor: pointer;
  525. }
  526. /* fixes for update page TODO should be fixed some time in a proper way */
  527. /* this is just for an error while updating the ownCloud instance */
  528. #body-login .updateProgress .error {
  529. margin-top: 10px;
  530. margin-bottom: 10px;
  531. }
  532. /* Alternative Logins */
  533. #alternative-logins legend { margin-bottom:10px; }
  534. #alternative-logins li { height:40px; display:inline-block; white-space:nowrap; }
  535. /* Log in and install button */
  536. #body-login input {
  537. font-size: 20px;
  538. margin: 5px;
  539. padding: 11px 10px 9px;
  540. }
  541. #body-login input[type="text"],
  542. #body-login input[type="password"] {
  543. width: 249px;
  544. }
  545. #body-login input.login {
  546. width: 269px;
  547. background-position: right 16px center;
  548. }
  549. #body-login input[type="submit"] {
  550. padding: 10px 20px; /* larger log in and installation buttons */
  551. }
  552. #remember_login {
  553. margin: 18px 5px 0 16px !important;
  554. }
  555. #body-login .remember-login-container {
  556. display: inline-block;
  557. margin: 10px 0;
  558. text-align: center;
  559. width: 100%;
  560. }
  561. #body-login #forgot-password {
  562. padding: 11px;
  563. float: right;
  564. color: #fff;
  565. }
  566. /* Sticky footer */
  567. #body-login .wrapper {
  568. min-height: 100%;
  569. margin: 0 auto -70px;
  570. width: 300px;
  571. }
  572. #body-login footer, #body-login .push {
  573. height: 70px;
  574. }
  575. /* round profile photos */
  576. .avatar,
  577. .avatar img,
  578. .avatardiv,
  579. .avatardiv img {
  580. border-radius: 50%;
  581. }
  582. td.avatar {
  583. border-radius: 0;
  584. }
  585. #notification-container {
  586. position: absolute;
  587. top: 0;
  588. width: 100%;
  589. text-align: center;
  590. }
  591. #notification {
  592. margin: 0 auto;
  593. max-width: 60%;
  594. z-index: 8000;
  595. background-color: #fff;
  596. border: 0;
  597. padding: 1px 8px;
  598. display: none;
  599. position: relative;
  600. top: 0;
  601. border-bottom-left-radius: 3px;
  602. border-bottom-right-radius: 3px;
  603. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  604. opacity: .9;
  605. }
  606. #notification span {
  607. cursor: pointer;
  608. margin-left: 1em;
  609. }
  610. #notification {
  611. overflow-x: hidden;
  612. overflow-y: auto;
  613. max-height: 100px;
  614. }
  615. #notification .row {
  616. position: relative;
  617. }
  618. #notification .row .close {
  619. display: inline-block;
  620. vertical-align: middle;
  621. position: absolute;
  622. right: 0;
  623. top: 0;
  624. margin-top: 2px;
  625. }
  626. #notification .row.closeable {
  627. padding-right: 20px;
  628. }
  629. tr .action:not(.permanent),
  630. .selectedActions a {
  631. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  632. opacity: 0;
  633. }
  634. tr:hover .action,
  635. tr:focus .action,
  636. tr .action.permanent,
  637. .selectedActions a {
  638. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  639. opacity: .5;
  640. }
  641. tr .action {
  642. width: 16px;
  643. height: 16px;
  644. }
  645. .header-action {
  646. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  647. opacity: .8;
  648. }
  649. tr:hover .action:hover,
  650. tr:focus .action:focus,
  651. .selectedActions a:hover,
  652. .selectedActions a:focus,
  653. .header-action:hover,
  654. .header-action:focus {
  655. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  656. opacity: 1;
  657. }
  658. tbody tr:hover,
  659. tbody tr:focus,
  660. tbody tr:active {
  661. background-color: #f8f8f8;
  662. }
  663. code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", monospace; }
  664. #quota {
  665. cursor: default;
  666. margin: 30px !important;
  667. position: relative;
  668. padding: 0 !important;
  669. }
  670. #quota div {
  671. padding: 0;
  672. background-color: rgb(220,220,220);
  673. font-weight: normal;
  674. white-space: nowrap;
  675. border-bottom-left-radius: 3px;
  676. border-top-left-radius: 3px;
  677. min-width: 1%;
  678. max-width: 100%;
  679. }
  680. #quotatext {padding:.6em 1em;}
  681. #quota div.quota-warning {
  682. background-color: #fc4;
  683. }
  684. .pager { list-style:none; float:right; display:inline; margin:.7em 13em 0 0; }
  685. .pager li { display:inline-block; }
  686. .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { overflow:hidden; text-overflow:ellipsis; }
  687. .separator { display:inline; border-left:1px solid #d3d3d3; border-right:1px solid #fff; height:10px; width:0px; margin:4px; }
  688. a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;padding-top:0px;padding-bottom:2px; text-decoration:none; margin-top:5px }
  689. .exception{color:#000;}
  690. .exception textarea{width:95%;height:200px;background:#ffe;border:0;}
  691. .ui-icon-circle-triangle-e{ background-image:url('../img/actions/play-next.svg?v=1'); }
  692. .ui-icon-circle-triangle-w{ background-image:url('../img/actions/play-previous.svg?v=1'); }
  693. .ui-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#fff; }
  694. /* ---- DIALOGS ---- */
  695. #oc-dialog-filepicker-content .dirtree {
  696. width:92%;
  697. float: left;
  698. margin-left: 15px;
  699. overflow:hidden;
  700. }
  701. #oc-dialog-filepicker-content .dirtree div:first-child a {
  702. background-image:url('../img/places/home.svg?v=1');
  703. background-repeat:no-repeat;
  704. background-position: left center;
  705. }
  706. #oc-dialog-filepicker-content .dirtree span:not(:last-child) { cursor: pointer; }
  707. #oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; }
  708. #oc-dialog-filepicker-content .dirtree span:not(:last-child)::after { content: '>'; padding: 3px;}
  709. #oc-dialog-filepicker-content .filelist-container {
  710. box-sizing: border-box;
  711. display: inline-block;
  712. overflow-y: auto;
  713. height: 321px;
  714. width: 100%;
  715. padding-bottom: 55px;
  716. }
  717. #oc-dialog-filepicker-content .emptycontent {
  718. color: #888;
  719. text-align: center;
  720. margin-top: 80px;
  721. width: 100%;
  722. display: none;
  723. }
  724. #oc-dialog-filepicker-content .filelist {
  725. background-color:white;
  726. width:100%;
  727. }
  728. #oc-dialog-filepicker-content #filestable.filelist {
  729. /* prevent the filepicker to overflow */
  730. min-width: initial;
  731. }
  732. #oc-dialog-filepicker-content .filelist td {
  733. padding: 14px;
  734. border-bottom: 1px solid #eee;
  735. }
  736. #oc-dialog-filepicker-content .filelist tr:last-child td {
  737. border-bottom: none;
  738. }
  739. #oc-dialog-filepicker-content .filelist .filename {
  740. overflow: hidden;
  741. white-space: nowrap;
  742. text-overflow: ellipsis;
  743. background-size: 32px;
  744. background-repeat: no-repeat;
  745. padding-left: 51px;
  746. background-position: 7px 7px;
  747. cursor: pointer;
  748. }
  749. #oc-dialog-filepicker-content .filelist .filesize,
  750. #oc-dialog-filepicker-content .filelist .date {
  751. width: 80px;
  752. }
  753. #oc-dialog-filepicker-content .filelist .filesize {
  754. text-align: right;
  755. }
  756. #oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;}
  757. .ui-dialog {position:fixed !important;}
  758. span.ui-icon {float: left; margin: 3px 7px 30px 0;}
  759. .move2trash { /* decrease spinner size */
  760. width: 16px;
  761. height: 16px;
  762. }
  763. /* ---- TOOLTIPS ---- */
  764. .extra-data {
  765. padding-right: 5px !important;
  766. }
  767. .tipsy-inner {
  768. max-width: 400px !important;
  769. overflow: hidden;
  770. text-overflow: ellipsis;
  771. }
  772. /* ---- TAGS ---- */
  773. #tagsdialog .content {
  774. width: 100%; height: 280px;
  775. }
  776. #tagsdialog .scrollarea {
  777. overflow:auto; border:1px solid #ddd;
  778. width: 100%; height: 240px;
  779. }
  780. #tagsdialog .bottombuttons {
  781. width: 100%; height: 30px;
  782. }
  783. #tagsdialog .bottombuttons * { float:left;}
  784. #tagsdialog .taglist li { background:#f8f8f8; padding:.3em .8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:background-color 500ms; transition:background-color 500ms; }
  785. #tagsdialog .taglist li:hover, #tagsdialog .taglist li:active { background:#eee; }
  786. #tagsdialog .addinput { width: 90%; clear: both; }
  787. /* ---- APP SETTINGS - LEGACY, DO NOT USE THE POPUP! ---- */
  788. .popup {
  789. background-color: #fff;
  790. border-radius: 3px;
  791. box-shadow: 0 0 10px #aaa;
  792. color: #333;
  793. padding: 10px;
  794. position: fixed !important;
  795. z-index: 100;
  796. }
  797. .popup.topright { top:7em; right:1em; }
  798. .popup.bottomleft { bottom:1em; left:33em; }
  799. .popup .close { position:absolute; top:0.2em; right:0.2em; height:20px; width:20px; background:url('../img/actions/close.svg?v=1') no-repeat center; }
  800. .popup h2 { font-size:20px; }
  801. .arrow { border-bottom:10px solid white; border-left:10px solid transparent; border-right:10px solid transparent; display:block; height:0; position:absolute; width:0; z-index:201; }
  802. .arrow.left { left:-13px; bottom:1.2em; -webkit-transform:rotate(270deg); -ms-transform:rotate(270deg); transform:rotate(270deg); }
  803. .arrow.up { top:-8px; right:6px; }
  804. .arrow.down { -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); }
  805. /* ---- BREADCRUMB ---- */
  806. div.crumb {
  807. float: left;
  808. display: block;
  809. background-image: url('../img/breadcrumb.svg?v=1');
  810. background-repeat: no-repeat;
  811. background-position: right center;
  812. height: 44px;
  813. background-size: auto 24px;
  814. }
  815. div.crumb.hidden {
  816. display: none;
  817. }
  818. div.crumb a,
  819. div.crumb > span {
  820. position: relative;
  821. top: 12px;
  822. padding: 14px 24px 14px 17px;
  823. color: #555;
  824. }
  825. div.crumb.last a {
  826. padding-right: 0;
  827. }
  828. div.crumb:first-child a {
  829. position: relative;
  830. top: 13px;
  831. padding-right: 14px;
  832. }
  833. div.crumb.last {
  834. font-weight: 600;
  835. margin-right: 10px;
  836. }
  837. div.crumb a.ellipsislink {
  838. padding: 0 !important;
  839. position: relative;
  840. top: 8px !important;
  841. }
  842. /* some feedback for hover/tap on breadcrumbs */
  843. div.crumb:hover,
  844. div.crumb:focus,
  845. div.crumb a:focus,
  846. div.crumb:active {
  847. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  848. opacity:.7;
  849. }
  850. .appear {
  851. opacity: 1;
  852. -webkit-transition: opacity 500ms ease 0s;
  853. -moz-transition: opacity 500ms ease 0s;
  854. -ms-transition: opacity 500ms ease 0s;
  855. -o-transition: opacity 500ms ease 0s;
  856. transition: opacity 500ms ease 0s;
  857. }
  858. .appear.transparent {
  859. opacity: 0;
  860. }
  861. /* public footer */
  862. #body-public footer {
  863. position: relative;
  864. text-align: center;
  865. }
  866. #body-public footer .info {
  867. color: #777;
  868. text-align: center;
  869. margin: 0 auto;
  870. padding: 20px 0;
  871. }
  872. #body-public footer .info a {
  873. color: #777;
  874. font-weight: 600;
  875. padding: 13px;
  876. margin: -13px;
  877. }
  878. /* LEGACY FIX only - do not use fieldsets for settings */
  879. fieldset.warning legend, fieldset.update legend {
  880. top: 18px;
  881. position: relative;
  882. }
  883. fieldset.warning legend + p, fieldset.update legend + p {
  884. margin-top: 12px;
  885. }
  886. /* for IE10 */
  887. @-ms-viewport {
  888. width: device-width;
  889. }
  890. /* hidden input type=file field */
  891. .hiddenuploadfield {
  892. width: 0;
  893. height: 0;
  894. opacity: 0;
  895. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  896. }