inspector.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644
  1. .insp-col-12 {
  2. width: 100%;
  3. }
  4. .insp-col-11 {
  5. width: 91.66666667%;
  6. }
  7. .insp-col-10 {
  8. width: 83.33333333%;
  9. }
  10. .insp-col-9 {
  11. width: 75%;
  12. }
  13. .insp-col-8 {
  14. width: 66.66666667%;
  15. }
  16. .insp-col-7 {
  17. width: 58.33333333%;
  18. }
  19. .insp-col-6 {
  20. width: 50%;
  21. }
  22. .insp-col-5 {
  23. width: 41.66666667%;
  24. }
  25. .insp-col-4 {
  26. width: 33.33333333%;
  27. }
  28. .insp-col-3 {
  29. width: 25%;
  30. }
  31. .insp-col-2 {
  32. width: 16.66666667%;
  33. }
  34. .insp-col-1 {
  35. width: 8.33333333%;
  36. }
  37. .insp-cate-tab {
  38. font-size: 13px;
  39. white-space: nowrap;
  40. background-color: #e5e5e5;
  41. }
  42. .insp-cate-tab.active > a {
  43. background: #f0f2f4 !important;
  44. }
  45. .insp-cate-tab a {
  46. padding: 5px 15px !important;
  47. line-height: 24px !important;
  48. border: none !important;
  49. border-right: 1px solid #aaa !important;
  50. cursor: default;
  51. color: #000000;
  52. }
  53. .insp-cate-tab a:hover {
  54. background: #d7d7d7 !important;
  55. }
  56. .insp-pane {
  57. position: absolute;
  58. top: 34px;
  59. bottom: 0;
  60. width: 100%;
  61. overflow-x: hidden;
  62. overflow-y: auto;
  63. font-size: 12px;
  64. background-color: #f0f2f4;
  65. }
  66. .insp-pane .btn {
  67. -webkit-user-select: none;
  68. -moz-user-select: none;
  69. -ms-user-select: none;
  70. user-select: none;
  71. }
  72. .insp-group-layout {
  73. position: relative;
  74. }
  75. .insp-group {
  76. overflow: hidden;
  77. -webkit-user-select: none;
  78. -moz-user-select: none;
  79. -ms-user-select: none;
  80. user-select: none;
  81. }
  82. /*.insp-group::after {
  83. content: "";
  84. position: absolute;
  85. bottom: 0;
  86. height: 1px;
  87. left: 0;
  88. right: 0;
  89. border-top: 1px solid #ccc;
  90. }*/
  91. .insp-group-title {
  92. display: block;
  93. font-weight: bold;
  94. margin-bottom: 3px;
  95. padding: 6px 8px;
  96. cursor: default;
  97. }
  98. .insp-group-title .group-state {
  99. height: 12px;
  100. width: 12px;
  101. }
  102. .insp-group-title .group-text {
  103. margin-left: 1px;
  104. }
  105. .insp-group-content {
  106. padding: 3px 16px 3px 24px;
  107. }
  108. .insp-row {
  109. margin-bottom: 8px;
  110. }
  111. .insp-row .btn {
  112. padding: 2px 8px !important;
  113. border: 1px solid #aaa;
  114. line-height: normal;
  115. }
  116. .insp-row .btn-group .btn {
  117. padding: 2px 8px !important;
  118. border-left: none;
  119. }
  120. .insp-row .btn-group .btn:first-child {
  121. border-left: 1px solid #aaa;
  122. }
  123. .insp-row .btn-group .btn.active {
  124. border-color: #aaa;
  125. background-color: #C7C7C7;
  126. }
  127. .insp-inline-row {
  128. font-size: 0;
  129. }
  130. .insp-inline-row-item {
  131. font-size: 12px;
  132. display: inline-block;
  133. vertical-align: middle;
  134. }
  135. .mixins-row-item-input {
  136. padding: 3px 6px;
  137. line-height: 1.5;
  138. border: 1px solid #aaa;
  139. border-radius: 3px;
  140. }
  141. .insp-title {
  142. display: block;
  143. font-weight: bold;
  144. margin-left: -12px;
  145. }
  146. .insp-text-right {
  147. text-align: right;
  148. }
  149. .insp-text .editor {
  150. padding: 3px 6px;
  151. line-height: 1.5;
  152. border: 1px solid #aaa;
  153. border-radius: 3px;
  154. }
  155. .insp-number .editor {
  156. padding: 3px 6px;
  157. line-height: normal;
  158. border: 1px solid #aaa;
  159. border-radius: 3px;
  160. }
  161. .insp-number-group .title {
  162. font-weight: bold;
  163. vertical-align: top;
  164. line-height: 1.5;
  165. padding: 3px 0;
  166. }
  167. .insp-number-group .content {
  168. display: table;
  169. width: 100%;
  170. table-layout: fixed;
  171. border-collapse: separate;
  172. }
  173. .insp-number-group .content .item {
  174. display: table-cell;
  175. padding: 0 0 0 5px;
  176. }
  177. .insp-number-group .content .item .editor {
  178. padding: 3px 6px;
  179. line-height: 1.5;
  180. border: 1px solid #aaa;
  181. border-radius: 3px;
  182. display: block;
  183. width: 100%;
  184. }
  185. .insp-number-group .content .item .editor-label {
  186. display: block;
  187. text-align: center;
  188. }
  189. .insp-number-group .content .item:first-child {
  190. padding-left: 0;
  191. }
  192. .insp-checkbox {
  193. margin: 0;
  194. text-align: left;
  195. vertical-align: middle;
  196. display: inline-block;
  197. }
  198. .insp-checkbox .button,
  199. .insp-checkbox .radiobutton {
  200. width: 16px;
  201. height: 13px;
  202. display: inline-block;
  203. background-image: url(images/checkbox.png);
  204. background-repeat: no-repeat;
  205. background-position: 0 -16px;
  206. }
  207. .insp-checkbox .button.checked {
  208. background-position: 0 -64px;
  209. }
  210. .insp-checkbox .radiobutton {
  211. background-position: 0 -144px;
  212. }
  213. .insp-checkbox .radiobutton.checked {
  214. background-position: 0 -192px;
  215. }
  216. .insp-checkbox .text {
  217. cursor: default;
  218. line-height: 14px;
  219. min-height: 14px;
  220. margin: 3px 0 2px 0;
  221. }
  222. .insp-checkbox-group .title {
  223. vertical-align: top;
  224. }
  225. .insp-checkbox-group .content {
  226. padding-left: 10px;
  227. }
  228. .insp-buttons .content {
  229. display: table;
  230. width: 100%;
  231. table-layout: fixed;
  232. border-collapse: separate;
  233. }
  234. .insp-buttons .content .item {
  235. display: table-cell;
  236. }
  237. .insp-buttons .content .item .button {
  238. width: 100%;
  239. font-size: 12px;
  240. }
  241. .insp-button-group .group-container .subscript {
  242. background-image: url('images\subscript.png');
  243. background-color: red;
  244. }
  245. .insp-button-group .group-container .collapse {
  246. visibility: hidden;
  247. }
  248. insp-radio-button-group .group-container .collapse {
  249. visibility: hidden;
  250. }
  251. .insp-color-picker .picker {
  252. height: 24px;
  253. border: 1px solid #aaa;
  254. padding: 3px;
  255. background-color: #ffffff;
  256. -moz-border-radius: 5px;
  257. -webkit-border-radius: 5px;
  258. border-radius: 5px;
  259. }
  260. .insp-color-picker .picker .color-view {
  261. border: 1px solid #ccc;
  262. width: 100%;
  263. height: 100%;
  264. }
  265. .insp-dropdown-list .display {
  266. width: calc(100% - 10px);
  267. display: inline-block;
  268. overflow: hidden;
  269. -ms-text-overflow: ellipsis;
  270. -o-text-overflow: ellipsis;
  271. text-overflow: ellipsis;
  272. vertical-align: middle;
  273. text-align: left;
  274. }
  275. .insp-dropdown-list .caret {
  276. margin-left: 3px;
  277. }
  278. .insp-menu,
  279. .insp-groups {
  280. position: absolute;
  281. left: 0;
  282. top: 0;
  283. display: none;
  284. z-index: 9999;
  285. overflow-y: auto;
  286. overflow-x: hidden;
  287. min-width: 100px;
  288. padding: 5px 0;
  289. font-size: 13px;
  290. text-align: left;
  291. background-color: #fff;
  292. border: 1px solid #ccc;
  293. border-radius: 4px;
  294. -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  295. box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  296. }
  297. .insp-groups {
  298. position: static;
  299. display: inline-block;
  300. min-width: 80px;
  301. }
  302. .insp-menu .menu-item,
  303. .insp-groups .group-item {
  304. white-space: nowrap;
  305. cursor: default;
  306. position: relative;
  307. }
  308. .insp-groups .group-item {
  309. display: inline-block;
  310. }
  311. .group-item .image:hover {
  312. background-color: #ddd;
  313. }
  314. .group-item.disable {
  315. opacity: 0.35;
  316. }
  317. .group-item .image.selected {
  318. background-color: #ccc;
  319. }
  320. .insp-menu .menu-item .image,
  321. .insp-groups .group-item .image {
  322. display: inline-block;
  323. vertical-align: middle;
  324. width: 16px;
  325. height: 16px;
  326. margin: 0 3px 0 5px;
  327. }
  328. .insp-menu .menu-item .text {
  329. display: inline-block;
  330. vertical-align: middle;
  331. font-weight: normal;
  332. line-height: 1.4;
  333. color: #333;
  334. white-space: nowrap;
  335. padding: 3px 0;
  336. }
  337. .insp-menu .menu-item .shortcut {
  338. position: absolute;
  339. right: 10px;
  340. top: 3px;
  341. }
  342. .insp-menu .menu-item:hover,
  343. .insp-menu .menu-item:focus {
  344. color: #ffffff;
  345. background-color: #288CE2;
  346. text-decoration: none;
  347. outline: 0;
  348. }
  349. .insp-menu .menu-item.disabled:hover,
  350. .insp-menu .menu-item.disabled:focus {
  351. color: #777;
  352. text-decoration: none;
  353. cursor: not-allowed;
  354. }
  355. .insp-menu .menu-item.divider {
  356. height: 1px;
  357. margin: 9px 0;
  358. overflow: hidden;
  359. background-color: #e5e5e5;
  360. }
  361. .insp-menu.show {
  362. display: block;
  363. }
  364. .insp-layout-table {
  365. display: table !important;
  366. }
  367. .insp-layout-cell {
  368. vertical-align: bottom;
  369. display: table-cell !important;
  370. }
  371. .insp-dashboard-pagesize {
  372. margin: auto;
  373. width: 80px;
  374. height: 80px;
  375. overflow: hidden;
  376. -moz-box-sizing: border-box;
  377. -webkit-box-sizing: border-box;
  378. box-sizing: border-box;
  379. line-height: 80px;
  380. border: 1px solid #ddd;
  381. margin-top: 5px;
  382. margin-bottom: 5px;
  383. }
  384. .insp-dashboard-pagesize .content {
  385. margin: 0 auto;
  386. background: #fff;
  387. cursor: pointer;
  388. width: 100%;
  389. height: 100%;
  390. position: absolute;
  391. left: 0;
  392. text-align: center;
  393. vertical-align: middle;
  394. }
  395. .insp-dashboard-pagesize .content:hover {
  396. opacity: .7;
  397. }
  398. .task-toolbar-container {
  399. width: 40px;
  400. height: 100%;
  401. background: #fafafa;
  402. text-align: center;
  403. overflow: visible;
  404. border-left: 1px solid #ddd;
  405. border-top: 1px solid #ddd;
  406. position: absolute;
  407. top: 0;
  408. right: 0;
  409. }
  410. .task-toolbar-container ul {
  411. list-style: none;
  412. margin: 0;
  413. padding: 0;
  414. }
  415. .task-toolbar-container ul li {
  416. text-align: center;
  417. font-size: 16px;
  418. position: relative;
  419. margin: 0;
  420. padding: 0;
  421. cursor: default;
  422. }
  423. .task-toolbar-container ul li a {
  424. display: inline-block;
  425. width: 40px;
  426. height: 40px;
  427. line-height: 40px;
  428. vertical-align: middle;
  429. color: #999;
  430. text-decoration: none;
  431. font-size: 20px;
  432. padding: 0;
  433. }
  434. .task-toolbar-container ul li:hover a {
  435. color: #005580;
  436. background-color: #EEE;
  437. }
  438. .task-toolbar-container ul li.active a {
  439. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  440. background-color: #08C;
  441. color: white;
  442. }
  443. .insp-container,
  444. .clab-container {
  445. display: none;
  446. width: 300px;
  447. height: 100%;
  448. position: absolute;
  449. right: 40px;
  450. top: 0;
  451. border-left: 1px solid #ddd;
  452. border-top: 1px solid #ddd;
  453. font-size: 12px;
  454. }
  455. .insp-container .nav-tabs li a,
  456. .clab-container .nav-tabs li a {
  457. border-radius: 0;
  458. border: 0;
  459. border-bottom: 1px solid #ddd;
  460. background-color: #ccc;
  461. }
  462. .clab-container .tab-container {
  463. height: 100%;
  464. }
  465. .clab-container .tab-container .nav-tabs li a {
  466. border-radius: 0;
  467. border: 0;
  468. border-bottom: 1px solid #ddd;
  469. background-color: #eee;
  470. }
  471. .clab-container .tab-container .tab-content {
  472. height: calc(100% - 40px);
  473. }
  474. .clab-container .tab-container .tab-content .tab-pane {
  475. height: 100%;
  476. }
  477. .clab-comments {
  478. width: 100%;
  479. height: 100%;
  480. }
  481. .clab-comments .comments-list {
  482. height: calc(100% - 130px);
  483. margin: 0;
  484. overflow-y: auto;
  485. }
  486. .clab-comments .comments-list .comments-list-item {
  487. border-top: 1px solid #e4e4e4;
  488. padding: 12px;
  489. line-height: 20px;
  490. }
  491. .clab-comments .comments-list .comments-list-item .user-image {
  492. width: 32px;
  493. height: 32px;
  494. border-radius: 50%;
  495. float: left;
  496. }
  497. .clab-comments .comments-list .comments-list-item .comment-body {
  498. margin-left: 38px;
  499. }
  500. .clab-comments .comments-list .comments-list-item .comment-body .comment-preface span:nth-child(2) {
  501. color: #9d9d9d;
  502. }
  503. .clab-comments .comments-list .comments-list-item .comment-body .comment-content {
  504. margin: 6px 0 3px;
  505. -ms-word-wrap: break-word;
  506. word-wrap: break-word;
  507. }
  508. .clab-comments .comments-list .comments-list-item .comment-body .comment-footer {
  509. color: #9d9d9d;
  510. font-size: 80%;
  511. }
  512. .clab-comments .comments-list .comments-list-item .comment-body .reply-button {
  513. color: #9d9d9d;
  514. float: right;
  515. cursor: pointer;
  516. }
  517. .clab-comments .comments-list .comments-list-item .comment-body .toggle-button {
  518. background-color: #fff;
  519. -webkit-border-radius: 4px 4px 0 0;
  520. -moz-border-radius-topleft: 4px;
  521. border-radius: 4px 4px 0 0;
  522. -moz-border-radius-topright: 4px;
  523. -moz-border-radius-bottomleft: 0;
  524. -moz-border-radius-bottomright: 0;
  525. border: 1px solid #70b1be;
  526. border-bottom: none;
  527. display: block;
  528. line-height: 20px;
  529. margin: 5px 0 -12px 19%;
  530. padding: 4px 15px;
  531. text-shadow: none;
  532. outline: none;
  533. }
  534. .clab-comments .comments-list .comments-list-item:first-child {
  535. border-top: none;
  536. }
  537. .clab-comments .comments-footer {
  538. background-color: #eee;
  539. border-top: 1px solid #ddd;
  540. border-bottom: 1px solid #ddd;
  541. padding: 12px;
  542. height: 130px;
  543. }
  544. .clab-comments .comments-footer .comment-input {
  545. border: 1px solid #ddd;
  546. margin-bottom: 0;
  547. height: 60px;
  548. width: 100%;
  549. resize: none;
  550. outline: none;
  551. }
  552. .clab-comments .comments-footer .comments-buttons {
  553. padding-top: 18px;
  554. }
  555. .clab-comments .comments-footer .comments-buttons .submit-button {
  556. background-color: #fff;
  557. border: 1px solid #bbb;
  558. border-radius: 8px;
  559. float: right;
  560. margin-top: -5px;
  561. height: 34px;
  562. width: 94px;
  563. }
  564. .reply-comment-dialog .modal-body .comment-text {
  565. margin: 0 0 10px;
  566. font-size: 12px;
  567. -ms-word-wrap: break-word;
  568. word-wrap: break-word;
  569. }
  570. .reply-comment-dialog .modal-body .comment-input {
  571. font-size: 14px;
  572. border: 1px solid #a9a9a9;
  573. margin-bottom: 0;
  574. width: 100%;
  575. outline: none;
  576. max-width: 568px;
  577. }
  578. .insp-date-relative .date-settings {
  579. margin: 10px 0;
  580. width: 100%;
  581. }
  582. .insp-date-relative .date-settings .td-setting-list {
  583. width: 80%;
  584. height: 100px;
  585. }
  586. .insp-date-relative .date-settings .td-setting-list .date-settings-list {
  587. width: 100%;
  588. height: 100%;
  589. }
  590. .insp-date-relative .date-settings .td-setting-list .edit-setting-text-container {
  591. width: 100%;
  592. height: 100%;
  593. border: 1px solid darkgray;
  594. }
  595. .insp-date-relative .date-settings .td-btn-list {
  596. vertical-align: top;
  597. }
  598. .insp-date-relative .date-settings .td-btn-list .btn {
  599. margin: 0 0 10px 10px;
  600. display: block;
  601. }
  602. .insp-date-relative .date-type {
  603. margin: 0 0 10px 0;
  604. width: 100%;
  605. }
  606. .insp-date-relative .anchor-date {
  607. margin: 0 0 10px 0;
  608. width: 100%;
  609. }
  610. .insp-date-relative .anchor-date input[type="checkbox"] {
  611. vertical-align: baseline;
  612. }
  613. .insp-date-relative .anchor-date .date-picker {
  614. width: 100%;
  615. height: 25px;
  616. }
  617. .insp-date-relative .raido-group input[type="radio"] {
  618. vertical-align: baseline;
  619. }
  620. .insp-date-relative .raido-group input[type="number"] {
  621. width: 50px;
  622. }
  623. .insp-range-group .option .title {
  624. font-weight: bold;
  625. }
  626. .insp-range-group .option .value {
  627. cursor: default;
  628. margin: 3px 0;
  629. }
  630. .insp-range-group .content {
  631. margin: 3px 0;
  632. padding-left: 8px;
  633. background: url(/Scripts/inspector/images/range-indicator.png) 0 8px no-repeat;
  634. }
  635. .insp-range-group .content .insp-range-group-item {
  636. margin: 9px 0;
  637. }