admin-modal.css 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  1. /*------------------------------------------------------------------------------
  2. nf-admin-modal
  3. ------------------------------------------------------------------------------*/
  4. #nf-admin-modal-wrap {
  5. display: none;
  6. background-color: #fff;
  7. -webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
  8. box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
  9. width: 500px;
  10. margin-left: -250px;
  11. margin-top: -125px;
  12. position: fixed;
  13. top: 50%;
  14. left: 50%;
  15. z-index: 100105;
  16. -webkit-transition: height 0.2s, margin-top 0.2s;
  17. transition: height 0.2s, margin-top 0.2s;
  18. }
  19. #nf-admin-modal-backdrop {
  20. display: none;
  21. position: fixed;
  22. top: 0;
  23. left: 0;
  24. right: 0;
  25. bottom: 0;
  26. min-height: 360px;
  27. background: #000;
  28. opacity: 0.7;
  29. filter: alpha(opacity=70);
  30. z-index: 100100;
  31. }
  32. #nf-admin-modal {
  33. position: relative;
  34. height: 100%;
  35. }
  36. #nf-admin-modal-wrap.search-panel-visible {
  37. height: 500px;
  38. margin-top: -250px;
  39. }
  40. #admin-modal-title {
  41. background: #fcfcfc;
  42. border-bottom: 1px solid #dfdfdf;
  43. height: 36px;
  44. font-size: 18px;
  45. font-weight: 600;
  46. line-height: 36px;
  47. padding: 0 36px 0 16px;
  48. top: 0;
  49. right: 0;
  50. left: 0;
  51. }
  52. #nf-admin-modal-close {
  53. color: #666;
  54. padding: 0;
  55. position: absolute;
  56. top: 0;
  57. right: 0;
  58. width: 36px;
  59. height: 36px;
  60. text-align: center;
  61. background: none;
  62. border: none;
  63. cursor: pointer;
  64. }
  65. #nf-admin-modal-close:before {
  66. font: normal 20px/36px 'dashicons';
  67. vertical-align: top;
  68. speak: none;
  69. -webkit-font-smoothing: antialiased;
  70. -moz-osx-font-smoothing: grayscale;
  71. width: 36px;
  72. height: 36px;
  73. content: '\f158';
  74. }
  75. #nf-admin-modal-close:hover,
  76. #nf-admin-modal-close:focus {
  77. color: #2ea2cc;
  78. }
  79. #nf-admin-modal-close:focus {
  80. outline: none;
  81. -webkit-box-shadow:
  82. 0 0 0 1px #5b9dd9,
  83. 0 0 2px 1px rgba(30, 140, 190, .8);
  84. box-shadow:
  85. 0 0 0 1px #5b9dd9,
  86. 0 0 2px 1px rgba(30, 140, 190, .8);
  87. }
  88. .admin-modal-inside {
  89. padding: 0 16px 50px;
  90. }
  91. #nf-admin-modal-wrap.search-panel-visible .admin-modal-inside {
  92. padding: 0 16px;
  93. position: absolute;
  94. top: 36px;
  95. left: 0;
  96. right: 0;
  97. bottom: 44px;
  98. }
  99. #nf-admin-modal ol,
  100. #nf-admin-modal ul {
  101. list-style: none;
  102. margin: 0;
  103. padding: 0;
  104. }
  105. #nf-admin-modal-search-toggle:after {
  106. display: inline-block;
  107. font: normal 20px/1 'dashicons';
  108. vertical-align: top;
  109. speak: none;
  110. -webkit-font-smoothing: antialiased;
  111. -moz-osx-font-smoothing: grayscale;
  112. content: '\f140';
  113. }
  114. .search-panel-visible #nf-admin-modal-search-toggle:after {
  115. content: '\f142';
  116. }
  117. #nf-admin-modal input[type="text"] {
  118. -webkit-box-sizing: border-box;
  119. -moz-box-sizing: border-box;
  120. box-sizing: border-box;
  121. }
  122. #nf-admin-modal #admin-modal-options {
  123. padding: 8px 0 12px;
  124. }
  125. #nf-admin-modal p.howto {
  126. margin: 3px 0;
  127. }
  128. #nf-admin-modal p.howto a {
  129. text-decoration: none;
  130. color: inherit;
  131. }
  132. #nf-admin-modal-search-toggle {
  133. cursor: pointer;
  134. }
  135. #nf-admin-modal label input[type="text"] {
  136. margin-top: 5px;
  137. width: 70%;
  138. }
  139. #nf-admin-modal #admin-modal-options label span,
  140. #nf-admin-modal #search-panel label span.search-label {
  141. display: inline-block;
  142. width: 80px;
  143. text-align: right;
  144. padding-right: 5px;
  145. max-width: 24%;
  146. }
  147. #nf-admin-modal .admin-modal-search-field {
  148. float: left;
  149. width: 250px;
  150. max-width: 70%;
  151. }
  152. #nf-admin-modal .admin-modal-search-wrapper {
  153. margin: 5px 0 9px;
  154. display: block;
  155. overflow: hidden;
  156. }
  157. #nf-admin-modal .admin-modal-search-wrapper span {
  158. float: left;
  159. margin-top: 4px;
  160. }
  161. #nf-admin-modal .admin-modal-search-wrapper .spinner {
  162. display: none;
  163. vertical-align: text-bottom;
  164. }
  165. #nf-admin-modal .admin-modal-target {
  166. padding: 3px 0 0;
  167. white-space: nowrap;
  168. overflow: hidden;
  169. text-overflow: ellipsis;
  170. }
  171. #nf-admin-modal .admin-modal-target label {
  172. max-width: 70%;
  173. }
  174. #nf-admin-modal .query-results {
  175. border: 1px #dfdfdf solid;
  176. margin: 0;
  177. background: #fff;
  178. overflow: auto;
  179. position: absolute;
  180. left: 16px;
  181. right: 16px;
  182. bottom: 16px;
  183. top: 205px;
  184. }
  185. #nf-admin-modal li {
  186. clear: both;
  187. margin-bottom: 0;
  188. border-bottom: 1px solid #f1f1f1;
  189. color: #333;
  190. padding: 4px 6px 4px 10px;
  191. cursor: pointer;
  192. position: relative;
  193. }
  194. #nf-admin-modal .query-notice {
  195. padding: 0;
  196. border-bottom: 1px solid #dfdfdf;
  197. background-color: #f7fcfe;
  198. color: #000;
  199. }
  200. #nf-admin-modal .query-notice .query-notice-default,
  201. #nf-admin-modal .query-notice .query-notice-hint {
  202. display: block;
  203. padding: 6px;
  204. border-left: 4px solid #2ea2cc;
  205. }
  206. #nf-admin-modal .unselectable.no-matches-found {
  207. padding: 0;
  208. border-bottom: 1px solid #dfdfdf;
  209. background-color: #fef7f1;
  210. }
  211. #nf-admin-modal .no-matches-found .item-title {
  212. display: block;
  213. padding: 6px;
  214. border-left: 4px solid #d54e21;
  215. }
  216. #nf-admin-modal .query-results em {
  217. font-style: normal;
  218. }
  219. #nf-admin-modal li:hover {
  220. background: #eaf2fa;
  221. color: #151515;
  222. }
  223. #nf-admin-modal li.unselectable {
  224. border-bottom: 1px solid #dfdfdf;
  225. }
  226. #nf-admin-modal li.unselectable:hover {
  227. background: #fff;
  228. cursor: auto;
  229. color: #333;
  230. }
  231. #nf-admin-modal li.selected {
  232. background: #ddd;
  233. color: #333;
  234. }
  235. #nf-admin-modal li.selected .item-title {
  236. font-weight: bold;
  237. }
  238. #nf-admin-modal li:last-child {
  239. border: none;
  240. }
  241. #nf-admin-modal .item-title {
  242. display: inline-block;
  243. width: 80%;
  244. width: -webkit-calc(100% - 68px);
  245. width: calc(100% - 68px);
  246. }
  247. #nf-admin-modal .item-info {
  248. text-transform: uppercase;
  249. color: #666;
  250. font-size: 11px;
  251. position: absolute;
  252. right: 5px;
  253. top: 5px;
  254. }
  255. #nf-admin-modal #search-results,
  256. #nf-admin-modal #search-panel {
  257. display: none;
  258. }
  259. #nf-admin-modal-wrap.search-panel-visible #search-panel {
  260. display: block;
  261. }
  262. #nf-admin-modal .river-waiting {
  263. display: none;
  264. padding: 10px 0;
  265. }
  266. #nf-admin-modal .river-waiting .spinner {
  267. margin: 0 auto;
  268. display: block;
  269. float: none;
  270. }
  271. #nf-admin-modal .submitbox {
  272. padding: 8px 16px;
  273. background: #fcfcfc;
  274. border-top: 1px solid #dfdfdf;
  275. position: absolute;
  276. bottom: 0;
  277. left: 0;
  278. right: 0;
  279. }
  280. #nf-admin-modal-cancel {
  281. line-height: 25px;
  282. float: left;
  283. }
  284. #nf-admin-modal-update {
  285. line-height: 23px;
  286. float: right;
  287. }
  288. #nf-admin-modal-submit {
  289. float: right;
  290. margin-bottom: 0;
  291. }
  292. @media screen and ( max-width: 782px ) {
  293. #nf-admin-modal-wrap {
  294. margin-top: -140px;
  295. }
  296. #nf-admin-modal-wrap.search-panel-visible .query-results {
  297. top: 235px;
  298. }
  299. .admin-modal-inside {
  300. padding: 0 16px 60px;
  301. }
  302. #nf-admin-modal-wrap.search-panel-visible .admin-modal-inside {
  303. bottom: 52px;
  304. }
  305. #nf-admin-modal-cancel {
  306. line-height: 32px;
  307. }
  308. }
  309. @media screen and ( max-width: 520px ) {
  310. #nf-admin-modal-wrap {
  311. width: auto;
  312. margin-left: 0;
  313. left: 10px;
  314. right: 10px;
  315. max-width: 500px;
  316. }
  317. }
  318. @media screen and ( max-height: 520px ) {
  319. #nf-admin-modal-wrap {
  320. -webkit-transition: none;
  321. transition: none;
  322. }
  323. #nf-admin-modal-wrap.search-panel-visible {
  324. height: auto;
  325. margin-top: 0;
  326. top: 10px;
  327. bottom: 10px;
  328. }
  329. .search-panel-visible .admin-modal-inside {
  330. overflow: auto;
  331. }
  332. .search-panel-visible #search-panel .query-results {
  333. position: static;
  334. }
  335. }
  336. @media screen and ( max-height: 290px ) {
  337. #nf-admin-modal-wrap {
  338. height: auto;
  339. margin-top: 0;
  340. top: 10px;
  341. bottom: 10px;
  342. }
  343. .admin-modal-inside {
  344. overflow: auto;
  345. height: -webkit-calc(100% - 92px);
  346. height: calc(100% - 92px);
  347. padding-bottom: 2px;
  348. }
  349. #search-panel .query-results {
  350. position: static;
  351. }
  352. }
  353. #nf-admin-modal .query-results {
  354. border: 1px solid #ddd;
  355. -webkit-border-radius: 0;
  356. border-radius: 0;
  357. -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
  358. box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
  359. -webkit-transition: .05s all ease-in-out;
  360. transition: .05s all ease-in-out;
  361. }
  362. #nf-admin-modal .query-results:focus {
  363. border-color: #5b9dd9;
  364. -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
  365. box-shadow: 0 0 2px rgba(30,140,190,0.8);
  366. }