style.cs 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964
  1. using System.Drawing;
  2. namespace FastReport.Web
  3. {
  4. partial class WebReport
  5. {
  6. string template_style() => $@"
  7. /**********
  8. MAIN
  9. ***********/
  10. .{template_FR}-container {{
  11. {(Width.IsNullOrWhiteSpace() ? "" : $"width: {Width};")}
  12. {(Height.IsNullOrWhiteSpace() ? "" : $"height: {Height};")}
  13. background-color: white;
  14. display: {InlineStyle};
  15. flex-direction: {Toolbar.Vertical};
  16. position: relative;
  17. align-items: {Toolbar.Content};
  18. }}
  19. .{template_FR}-container * {{
  20. box-sizing: content-box;
  21. -moz-box-sizing: content-box;
  22. }}
  23. .{template_FR}-body {{
  24. display: flex;
  25. overflow: hidden;
  26. width: 100%;
  27. height: 100%;
  28. margin-top: 20px;
  29. }}
  30. .{template_FR}-report {{
  31. overflow: auto;
  32. width: 100%;
  33. display: flex;
  34. flex-direction: {Toolbar.RowOrColumn};
  35. align-items: flex-start;
  36. }}
  37. .{template_FR}-spinner[style*=""display:none""] ~ .{template_FR}-toolbar ~ .{template_FR}-body {{
  38. box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  39. }}
  40. .fr-form-header {{
  41. padding: 5px;
  42. padding-left: 12px;
  43. font: 14px Verdana,Arial sans-serif Regular;
  44. min-height: 18px;
  45. text-overflow: ellipsis;
  46. overflow: hidden;
  47. border-bottom: solid 1px lightgray;
  48. vertical-align: middle;
  49. text-align: -webkit-match-parent;
  50. height: 30px;
  51. align-items: center;
  52. display: flex;
  53. font-weight: bold;
  54. }}
  55. .{template_FR}-body:has(.fr-dialog-form) {{
  56. width: fit-content;
  57. border-radius: 12px;
  58. background: #FFF;
  59. box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  60. }}
  61. /***********
  62. SPLIT
  63. ************/
  64. .{template_FR}-gutter {{
  65. background-color: #f1f1f1;
  66. background-repeat: no-repeat;
  67. background-position: 50%;
  68. }}
  69. .{template_FR}-gutter.{template_FR}-gutter-horizontal {{
  70. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
  71. cursor: ew-resize;
  72. }}
  73. /*************
  74. TOOLBAR
  75. **************/
  76. .{template_FR}-toolbar {{
  77. flex-shrink: 1;
  78. font:{Toolbar.UserFontSettings};
  79. background-color: {ColorTranslator.ToHtml(Toolbar.Color)};
  80. /* {(Tabs.Count > 1 ? "" : "box-shadow: 0px 3px 4px -2px rgba(0, 0, 0, 0.2);")} */
  81. display: flex;
  82. flex-direction: {Toolbar.RowOrColumn};
  83. /* flex-wrap: wrap; */
  84. width: fit-content;
  85. height: {Toolbar.VerticalToolbarHeight};
  86. order:{Toolbar.TopOrBottom} ;
  87. position: relative;
  88. align-items: center;
  89. justify-content:{Toolbar.Content};
  90. z-index: 2;
  91. border-radius: {Toolbar.ToolbarRoundness}px;
  92. /*min-width: intrinsic;
  93. min-width: -moz-max-content;
  94. min-width: -webkit-max-content;
  95. min-width: max-content;*/
  96. -webkit-user-select: none; /* Safari */
  97. -ms-user-select: none; /* IE 10 and IE 11 */
  98. user-select: none; /* Standard syntax */
  99. {Toolbar.StickyToolbarTags}
  100. }}
  101. .{template_FR}-toolbar-item {{
  102. height: {Toolbar.Height}px;
  103. border-radius:{Toolbar.ToolbarRoundness}px;
  104. background-color: #00000000;
  105. position: relative;
  106. align-items: center;
  107. display: flex;
  108. }}
  109. .{template_FR}-toolbar-item:hover {{
  110. background-color: {ColorTranslator.ToHtml(Toolbar.Color)};
  111. }}
  112. .{template_FR}-toolbar-item > svg {{
  113. height: calc({Toolbar.Height}px * 0.5);
  114. padding-top: calc({Toolbar.Height}px * 0.15);
  115. padding-bottom: calc({Toolbar.Height}px * 0.15);
  116. padding-left: calc({Toolbar.Height}px * 0.25);
  117. padding-right: calc({Toolbar.Height}px * 0.25);
  118. opacity: {Toolbar.TransparencyIcon};
  119. display: block;
  120. filter:invert({Toolbar.ColorIcon});
  121. margin-left: 10px;
  122. margin-right: 10px;
  123. }}
  124. .{template_FR}-toolbar-item:hover > svg {{
  125. opacity: 0.5;
  126. }}
  127. .{template_FR}-toolbar-notbutton:hover {{
  128. background-color: transparent;
  129. }}
  130. .{template_FR}-toolbar-notbutton:hover > svg {{
  131. opacity: 1;
  132. }}
  133. .{template_FR}-toolbar-image{{
  134. width: calc({Toolbar.Height}px * 0.5);
  135. }}
  136. /**********************
  137. TOOLBAR DROPDOWN
  138. ***********************/
  139. .{template_FR}-toolbar-dropdown-content {{
  140. display: none;
  141. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  142. background-color: {ColorTranslator.ToHtml(Toolbar.DropDownMenuColor)};
  143. min-width: 50px;
  144. z-index: 2;
  145. position: absolute;
  146. {Toolbar.DropDownMenuPosition}
  147. white-space: nowrap;
  148. border-radius: {Toolbar.DropDownListBorder};
  149. }}
  150. .{template_FR}-toolbar-item:hover > .{template_FR}-toolbar-dropdown-content {{
  151. display: block;
  152. }}
  153. .{template_FR}-toolbar-dropdown-content > a {{
  154. float: none;
  155. color: {ColorTranslator.ToHtml(Toolbar.DropDownMenuTextColor)};
  156. padding: 6px 12px 6px 8px;
  157. text-decoration: none;
  158. display: block;
  159. text-align: left;
  160. height: auto;
  161. font-size: 14px;
  162. user-select: none;
  163. }}
  164. .{template_FR}-toolbar-dropdown-content > a:hover {{
  165. background-color: {ColorTranslator.ToHtml(Toolbar.DropDownMenuColor)};
  166. opacity: 0.5;
  167. cursor: pointer;
  168. border-radius: 0px 0px 10px 10px;
  169. }}
  170. .{template_FR}-zoom-selected {{
  171. font-weight: bold;
  172. }}
  173. .modalcontainer-overlay {{
  174. position: absolute;
  175. left: 0;
  176. top: 0;
  177. right: 0;
  178. bottom: 0;
  179. background-color: rgba(0, 0, 0, 0.7);
  180. display: flex;
  181. align-items: flex-start;
  182. justify-content: flex-start;
  183. opacity: 0;
  184. z-index: 2;
  185. visibility: hidden;
  186. transition: all 0.3s ease-in-out;
  187. align-content: flex-start;
  188. }}
  189. .modalcontainer {{
  190. background-color: #fff;
  191. width: 300px;
  192. height: 300px;
  193. display: flex;
  194. align-items: center;
  195. justify-content: center;
  196. display: none;
  197. }}
  198. .modalcontainer-overlay--visible {{
  199. opacity: 1;
  200. visibility: visible;
  201. transition: all 0.3s ease-in-out;
  202. {Toolbar.Exports.FixedContainerPosition}
  203. }}
  204. .modalcontainer--visible {{
  205. display: flex;
  206. width: fit-content;
  207. height: fit-content;
  208. witdh: auto;
  209. min-width: 348px;
  210. height: auto;
  211. margin-top: 4rem;
  212. margin-left: 4rem;
  213. padding: 0px 9px 50px 9px;
  214. z-index: 4;
  215. border-radius: 30px 30px 12px 12px;
  216. background-color: #EFEFEF;
  217. flex-wrap: nowrap;
  218. align-content: center;
  219. justify-content: center;
  220. align-items: center;
  221. flex-direction: column;
  222. font-family: Arial,Verdana sans-serif;
  223. {Toolbar.Exports.FixedContainerTags}
  224. {Toolbar.ModalContainerPosition}
  225. }}
  226. ////////////////////
  227. POPUP
  228. ///////////////////
  229. .fr-webreport-popup {{
  230. min-width: 100%;
  231. position: absolute;
  232. min-height: 100%;
  233. z-index: 3;
  234. padding-bottom: 1rem;
  235. background-color: #0000005c;
  236. display: flex;
  237. align-content: flex-start;
  238. flex-direction: row;
  239. flex-wrap: nowrap;
  240. justify-content: flex-start;
  241. align-items: flex-start;
  242. }}
  243. .fr-webreport-popup-content {{
  244. display: flex;
  245. width: fit-content;
  246. height: fit-content;
  247. margin-top: 2.5rem;
  248. margin-left: 2.6rem;
  249. padding: 0px 10px 50px 10px;
  250. z-index: 4;
  251. border-radius: 10px;
  252. background-color: white;
  253. flex-wrap: nowrap;
  254. align-content: center;
  255. justify-content: center;
  256. align-items: center;
  257. flex-direction: column;
  258. font-family: Arial,Verdana sans-serif;
  259. }}
  260. .fr-webreport-popup-content-title {{
  261. display: flex;
  262. width: 100%;
  263. background-color: #35363A;
  264. color: white;
  265. font-weight: bold;
  266. box-shadow: 0rem -0.1rem 0rem 0.6rem #35363A;
  267. margin-top: 10px;
  268. margin-bottom: 10px;
  269. align-items: center;
  270. flex-direction: column;
  271. flex-wrap: nowrap;
  272. justify-content: flex-start;
  273. align-content: center;
  274. font: {Toolbar.Exports.UserFontSettingsStyle} 16px {Toolbar.Exports.UserFontSettingsFamily};
  275. border-radius: 12px 12px 0px 0px;
  276. }}
  277. .fr-webreport-popup-content-export-parameters-page-range-title{{
  278. margin-top: 25px;
  279. }}
  280. .fr-webreport-popup-content-title input {{
  281. background-color: white;
  282. border: 3px solid {ColorTranslator.ToHtml(Toolbar.Exports.Color)};
  283. color: black;
  284. max-height: 9.8px;
  285. border-radius: 3px;
  286. }}
  287. button{{
  288. text-align: left;
  289. }}
  290. .fr-webreport-popup-content-export-parameters {{
  291. display: flex;
  292. width: 100%;
  293. -ms-flex-wrap: wrap;
  294. flex-direction: column;
  295. border-radius: 3px;
  296. padding-bottom: 1rem;
  297. align-content: flex-start;
  298. flex-wrap: wrap;
  299. align-items: flex-start;
  300. justify-content: flex-start;
  301. font: {Toolbar.Exports.UserFontSettingsStyle} 14px {Toolbar.Exports.UserFontSettingsFamily};
  302. font-weight: bold;
  303. }}
  304. .fr-webreport-popup-content-export-parameters-col {{
  305. display: flex;
  306. align-content: center;
  307. flex-wrap: nowrap;
  308. flex-direction: column;
  309. font: {Toolbar.Exports.UserFontSettingsStyle} 11px {Toolbar.Exports.UserFontSettingsFamily};
  310. }}
  311. .custom-select{{
  312. width:auto;
  313. outline: none;
  314. max-width: 170px;
  315. min-width: 20px;
  316. border: none;
  317. margin: 5px 5px 5px 5px;
  318. border-radius: 3px;
  319. height: 25px;
  320. font: {Toolbar.Exports.UserFontSettingsStyle} 12px {Toolbar.Exports.UserFontSettingsFamily};
  321. font-size: 11px;
  322. overflow: hidden;
  323. background: #ffffff url('data:image/svg+xml;base64,{GerResourceBase64("select-arrow.svg")}') no-repeat;
  324. background-position: calc(100% - 10px) center;
  325. -moz-appearance:none; /* Firefox */
  326. -webkit-appearance:none; /* Safari and Chrome */
  327. appearance:none;
  328. padding:0 30px 0 10px !important;
  329. -webkit-padding-end: 30px !important;
  330. -webkit-padding-start: 10px !important;
  331. }}
  332. .fr-webreport-popup-content-export-parameters-input {{
  333. margin-left: 0.3rem;
  334. margin-bottom: 0.3rem;
  335. padding: 6px;
  336. max-width: 70px;
  337. height: 8px;
  338. outline: none;
  339. border: none;
  340. margin-left: 5px;
  341. margin-right: 5px;
  342. min-width: inherit;
  343. border-radius: 4px;
  344. font: {Toolbar.Exports.UserFontSettingsStyle} 10px {Toolbar.Exports.UserFontSettingsFamily};
  345. }}
  346. .input-error
  347. {{
  348. animation: shake 0.2s ease-in-out 0s 2;
  349. box-shadow: 0 0 0.5em red;
  350. }}
  351. @keyframes shake {{
  352. 0% {{ margin-left: 0rem; }}
  353. 25% {{ margin-left: 0.5rem; }}
  354. 75% {{ margin-left: -0.5rem; }}
  355. 100% {{ margin-left: 0rem; }}
  356. }}
  357. .fr-webreport-popup-content-export-parameters-row {{
  358. display: flex;
  359. padding-top: 5px;
  360. flex-direction: row;
  361. align-items: flex-start;
  362. justify-content: flex-start;
  363. }}
  364. .fr-webreport-popup-content-export-parameters-slider {{
  365. display: flex;
  366. margin: 0rem 0rem 0rem 0.35rem;
  367. background-color: transparent;
  368. border-radius: 10px;
  369. justify-content: flex-start;
  370. align-items: center;
  371. align-content: center;
  372. flex-direction: row;
  373. }}
  374. .fr-webreport-popup-content-export-parameters-slider span {{
  375. color: black;
  376. min-width: 128px;
  377. font: {Toolbar.Exports.UserFontSettingsStyle} 11px {Toolbar.Exports.UserFontSettingsFamily};
  378. font-weight: normal;
  379. white-space: nowrap;
  380. }}
  381. input[type=range] {{
  382. height: 1.7rem;
  383. overflow: hidden;
  384. -webkit-appearance: none;
  385. margin-left: 0;
  386. outline: none;
  387. background-color: #424242;
  388. }}
  389. input[type=range]::-webkit-slider-runnable-track {{
  390. width: 100%;
  391. height: 100%;
  392. cursor: pointer;
  393. animate: 0.2s;
  394. background: #424242;
  395. border-radius: 0px;
  396. }}
  397. input[type=range]::-webkit-slider-thumb {{
  398. height: 100%;
  399. width: 5%;
  400. border-radius: 0px;
  401. background: linear-gradient(gray,5%, {ColorTranslator.ToHtml(Toolbar.Exports.Color)});
  402. cursor: pointer;
  403. -webkit-appearance: none;
  404. box-shadow: -100vw 0vw 0vw 100vw {ColorTranslator.ToHtml(Toolbar.Exports.Color)};
  405. margin-top: 0px;
  406. }}
  407. label{{
  408. margin: 5px 0px;
  409. }}
  410. .fr-webreport-popup-content-export-parameters-col input[type=text] {{
  411. background-color: white;
  412. color: #000000;
  413. border: 2px solid {ColorTranslator.ToHtml(Toolbar.Exports.Color)};
  414. max-height: 11px;
  415. }}
  416. .fr-webreport-popup-content-export-parameters-button {{
  417. padding: 5px;
  418. outline: none;
  419. border: none;
  420. margin-left: 5px;
  421. margin-right: 5px;
  422. min-width: inherit;
  423. font: {Toolbar.Exports.UserFontSettingsStyle} 11px {Toolbar.Exports.UserFontSettingsFamily};
  424. color: black;
  425. background: url(/_fr/resources.getResource?resourceName=button.svg&contentType=image%2Fsvg%2Bxml) no-repeat;
  426. background-position: 0px center;
  427. padding-left: 20px;
  428. vertical-align: middle;
  429. cursor: pointer;
  430. }}
  431. .fr-webreport-popup-content-buttons {{
  432. display: flex;
  433. margin-bottom: -2.3rem;
  434. width: 100%;
  435. flex-wrap: nowrap;
  436. align-content: center;
  437. justify-content: space-between;
  438. align-items: center;
  439. flex-direction: row;
  440. }}
  441. .fr-webreport-popup-content-btn-submit {{
  442. outline: none;
  443. border: none;
  444. background-color: #DD4433;
  445. border-radius: 3px;
  446. padding: 3px;
  447. font: {Toolbar.Exports.UserFontSettingsStyle} 14px {Toolbar.Exports.UserFontSettingsFamily};
  448. color: {ColorTranslator.ToHtml(Toolbar.Exports.FontColor)};
  449. min-width: 70px;
  450. width: fit-content;
  451. height: 30px;
  452. cursor: pointer;
  453. text-align: center;
  454. }}
  455. .fr-webreport-popup-content-btn-cancel{{
  456. padding: 3px;
  457. background-color: #D9D9D9;
  458. font: {Toolbar.Exports.UserFontSettingsStyle} 14px {Toolbar.Exports.UserFontSettingsFamily};
  459. min-width: 70px;
  460. width: fit-content;
  461. height: 30px;
  462. border-radius: 3px;
  463. border: none;
  464. outline: none;
  465. color: black;
  466. text-align: center;
  467. }}
  468. .fr-webreport-popup-content-btn-submit:hover {{
  469. transform: scale(1.015);
  470. }}
  471. .{template_FR}-container .activeButton {{
  472. background: url('data:image/svg+xml;base64,{GerResourceBase64("button-active.svg")}') no-repeat;
  473. background-position: 0px center;
  474. vertical-align: middle;
  475. }}
  476. .fr-webreport-settings-btn {{
  477. background-color: transparent;
  478. color: transparent;
  479. padding-left: 1rem;
  480. margin-left: 230px;
  481. display: flex;
  482. float: right;
  483. margin-top: -1.6rem;
  484. outline: none;
  485. padding-right: 1rem;
  486. border: none;
  487. position: relative;
  488. z-index: 4;
  489. flex-direction: row;
  490. align-content: space-around;
  491. justify-content: space-between;
  492. filter:alpha(opacity=50);
  493. opacity: 1;
  494. }}
  495. .fr-webreport-settings-btn:hover{{
  496. background-color: transparent;
  497. color: transparent;
  498. padding-left: 1rem;
  499. margin-left: 230px;
  500. display: flex;
  501. float: right;
  502. margin-top: -1.6rem;
  503. outline: none;
  504. padding-right: 1rem;
  505. border: none;
  506. position: relative;
  507. z-index: 4;
  508. flex-direction: row;
  509. align-content: space-around;
  510. justify-content: space-between;
  511. transform: scale(1.1);
  512. filter:alpha(opacity=0);
  513. opacity: 0.5;
  514. cursor: pointer;
  515. }}
  516. .fr-webreport-settings-btn::-moz-focus-inner {{
  517. background-color: transparent;
  518. color: transparent;
  519. padding-left: 1rem;
  520. margin-left: 230px;
  521. display: flex;
  522. float: right;
  523. margin-top: -1.6rem;
  524. outline: none;
  525. padding-right: 1rem;
  526. border: none;
  527. position: relative;
  528. z-index: 4;
  529. flex-direction: row;
  530. align-content: space-around;
  531. justify-content: space-between;
  532. }}
  533. .fr-webreport-popup-disabled-button{{
  534. background-color: #D9D9D9;
  535. cursor: default;
  536. }}
  537. /************************
  538. TOOLBAR NAVIGATION
  539. *************************/
  540. .{template_FR}-toolbar-narrow > svg {{
  541. transform: rotate({Toolbar.ToolbarNarrow}deg);
  542. padding-left: 0px;
  543. padding-right: 0px;
  544. height: calc({Toolbar.Height}px * 0.35);
  545. padding-top: 9px;
  546. }}
  547. .{template_FR}-toolbar-slash{{
  548. }}
  549. .{template_FR}-toolbar-slash > svg {{
  550. margin-left: 0px;
  551. margin-right: 0px;
  552. height: calc({Toolbar.Height}px * 0.35);
  553. padding-top: 9px;
  554. margin: 5px 0px 0px;
  555. padding-right: 5px;
  556. padding-left: 5px;
  557. }}
  558. .{template_FR}-toolbar-item > input {{
  559. font: {Toolbar.Exports.UserFontSettingsStyle} 12px {Toolbar.Exports.UserFontSettingsFamily};
  560. font-size: calc({Toolbar.Height}px * 0.35);
  561. text-align: center;
  562. border: 0;
  563. background: #fbfbfb;
  564. border-radius:{Toolbar.ToolbarRoundness}px;
  565. height: calc({Toolbar.Height}px * 0.68);
  566. width: 3.5em;
  567. margin-top: calc({Toolbar.Height}px * 0.17);
  568. margin-bottom: calc({Toolbar.Height}px * 0.15);
  569. margin-left: calc({Toolbar.Height}px * 0.1);
  570. margin-right: calc({Toolbar.Height}px * 0.1);
  571. padding: 0;
  572. display: block;
  573. border-radius: 5px;
  574. }}
  575. .{template_FR}-toolbar-item > input:hover:not([readonly]) {{
  576. background: #fff;
  577. }}
  578. .{template_FR}-toolbar-item > input[readonly] {{
  579. cursor: default;
  580. }}
  581. /**************
  582. SPINNER
  583. **************/
  584. .{template_FR}-spinner {{
  585. height: 100%;
  586. width: 100%;
  587. position: absolute;
  588. background-color: rgba(255, 255, 255, 0.7);
  589. z-index: 10;
  590. }}
  591. .{template_FR}-spinner svg {{
  592. width: 90px;
  593. height: 90px;
  594. left: calc(50%-50px);
  595. top: calc(50%-50px);
  596. position: absolute;
  597. animation: {template_FR}-spin 1s infinite steps(8);
  598. opacity: 0.5;
  599. }}
  600. @keyframes {template_FR}-spin {{
  601. from {{ -webkit-transform: rotate(0deg); }}
  602. to {{ -webkit-transform: rotate(360deg); }}
  603. }}
  604. /************
  605. ERROR
  606. ************/
  607. .{template_FR}-error-container {{
  608. width: 100%;
  609. height: 100%;
  610. display: flex;
  611. flex-direction: column;
  612. overflow: auto;
  613. }}
  614. .{template_FR}-error-text {{
  615. color: red;
  616. font-family: Consolas,monospace;
  617. font-size: 16px;
  618. margin: 20px;
  619. text-align: center;
  620. }}
  621. .{template_FR}-error-response {{
  622. height: 100%;
  623. position: relative;
  624. }}
  625. /***********
  626. TABS
  627. ***********/
  628. .{template_FR}-tabs {{
  629. flex-shrink: 0;
  630. font-family: Verdana,Arial,sans-serif;
  631. background-color: #f1f1f1;
  632. display: table;
  633. width: {Toolbar.TabsPositionSettings};
  634. max-width: {ReportMaxWidth}px;
  635. box-shadow: 0px 3px 4px -2px rgba(0, 0, 0, 0.2);
  636. position: relative;
  637. border-radius: 9px;
  638. z-index: 1;
  639. {Toolbar.StickyToolbarTabsTags}
  640. {Toolbar.TabsPositionSettings}
  641. }}
  642. .{template_FR}-tabs .{template_FR}-tab {{
  643. float: left;
  644. display: block;
  645. color: #3b3b3b;
  646. text-align: center;
  647. text-decoration: none;
  648. font-size: 12px;
  649. background-color: #f1f1f1;
  650. margin-top: 2px;
  651. margin-right: 2px;
  652. height: 24px;
  653. border-radius: 9px;
  654. }}
  655. .{template_FR}-tabs .{template_FR}-tab-title {{
  656. display: block;
  657. float: left;
  658. padding: 4.5px 10px;
  659. }}
  660. .{template_FR}-tabs .{template_FR}-tab-close {{
  661. width: 13px;
  662. height: 13px;
  663. display: block;
  664. float: left;
  665. margin-top: 6px;
  666. margin-right: 6px;
  667. }}
  668. .{template_FR}-tabs .{template_FR}-tab-close svg{{
  669. border-radius: 10px;
  670. }}
  671. .{template_FR}-tabs .{template_FR}-tab:hover {{
  672. background-color: lightgray;
  673. color: black;
  674. cursor: pointer;
  675. }}
  676. .{template_FR}-tabs .{template_FR}-tab.active {{
  677. background-color: lightgray;
  678. color: black;
  679. cursor: default;
  680. }}
  681. .{template_FR}-tabs .{template_FR}-tab a svg {{
  682. height: 13px;
  683. opacity: 0;
  684. }}
  685. .{template_FR}-tabs .{template_FR}-tab.active a svg {{
  686. opacity: 0.5;
  687. }}
  688. .{template_FR}-tabs .{template_FR}-tab:hover a svg {{
  689. opacity: 0.5;
  690. }}
  691. .{template_FR}-tabs .{template_FR}-tab a svg:hover {{
  692. opacity: 1;
  693. background-color: #f1f1f1;
  694. cursor: pointer;
  695. }}
  696. /***********
  697. MISC
  698. ***********/
  699. .{template_FR}-pointer:hover {{
  700. cursor: pointer;
  701. }}
  702. .{template_FR}-disabled {{
  703. opacity: 0.5;
  704. }}
  705. .datetimepicker > input[type=""date""]{{
  706. background: url('data:image/svg+xml;base64,{GerResourceBase64("date-picker.svg")}') no-repeat;
  707. background-size: 10px;
  708. background-position: right 5px center;
  709. background-origin: content-box, content-box;
  710. }}
  711. .datetimepicker > input[type=""date""]:disabled {{
  712. background: url("""") no-repeat;
  713. }}
  714. input[type=date]::-webkit-calendar-picker-indicator {{
  715. opacity: 0;
  716. }}
  717. /**************
  718. OUTLINE
  719. **************/
  720. .{template_FR}-outline {{
  721. overflow: auto;
  722. height: auto;
  723. font-family: Verdana,Arial,sans-serif;
  724. font-size: 11px;
  725. }}
  726. .{template_FR}-outline img {{
  727. opacity: 0.5;
  728. }}
  729. .{template_FR}-outline-inner {{
  730. padding: 5px;
  731. }}
  732. .{template_FR}-outline-node {{
  733. display: flex;
  734. flex-wrap: wrap;
  735. }}
  736. .{template_FR}-outline-caret {{
  737. height: 14px;
  738. width: 14px;
  739. margin-top: 1.5px;
  740. margin-right: 4px;
  741. }}
  742. .{template_FR}-outline-caret:hover {{
  743. cursor: pointer;
  744. }}
  745. .{template_FR}-outline-caret-blank {{
  746. width: 18px;
  747. }}
  748. .{template_FR}-outline-file {{
  749. height: 14px;
  750. margin-top: 1.5px;
  751. }}
  752. .{template_FR}-outline-text {{
  753. white-space: nowrap;
  754. display: flex;
  755. align-items: center;
  756. }}
  757. .{template_FR}-outline-text > a {{
  758. margin: 2px;
  759. padding: 2px;
  760. }}
  761. .{template_FR}-outline-text > a:hover {{
  762. text-decoration: underline;
  763. cursor: pointer;
  764. }}
  765. .{template_FR}-outline-children {{
  766. padding-left: 20px;
  767. }}
  768. /*******************
  769. EMAIL EXPORT
  770. *******************/
  771. .fr-notification {{
  772. position: fixed;
  773. bottom: 20px;
  774. right: 20px;
  775. display: flex;
  776. align-items: center;
  777. padding: 10px 20px;
  778. border-radius: 4px;
  779. font-size: 14px;
  780. color: white;
  781. opacity: 1;
  782. transition: opacity 0.5s;
  783. z-index: 9999;
  784. font-family: Arial, sans-serif;
  785. }}
  786. .fr-notification-content {{
  787. display: flex;
  788. align-items: center;
  789. }}
  790. .fr-notification-content img {{
  791. margin-right: 10px;
  792. }}
  793. .fr-notification.positive {{
  794. background-color: #44cc44;
  795. }}
  796. .fr-required-star {{
  797. color: red;
  798. }}
  799. .fr-notification.negative {{
  800. background-color: #cc4444;
  801. }}
  802. .fr-email-export-form {{
  803. display: flex;
  804. flex-direction: column;
  805. padding: 5px;
  806. box-sizing: border-box;
  807. width: 100%;
  808. }}
  809. .fr-email-export-field {{
  810. display: flex;
  811. margin-bottom: 5px;
  812. justify-content: space-between;
  813. width: 100%;
  814. font-size: 12px;
  815. }}
  816. .fr-email-export-input{{
  817. width: 244px;
  818. padding: 8px;
  819. border: none;
  820. border-radius: 4px;
  821. background: #FFF;
  822. display: flex;
  823. margin-left: 30px;
  824. font-size: 12px;
  825. }}
  826. .fr-email-export-textarea{{
  827. margin - left: 10px;
  828. width: 244px;
  829. height: 146px;
  830. padding: 8px;
  831. border: none;
  832. border-radius: 5px;
  833. resize: none;
  834. font-size: 12px;
  835. }}
  836. .fr-email-export-select{{
  837. overflow: hidden;
  838. -moz-appearance:none; /* Firefox */
  839. -webkit-appearance:none; /* Safari and Chrome */
  840. background: #ffffff url('data:image/svg+xml;base64,{GerResourceBase64("select-arrow.svg")}') no-repeat;
  841. background-position: calc(100% - 10px) center;
  842. margin - left: 10px;
  843. width: 244px;
  844. padding: 8px;
  845. border-radius: 5px;
  846. border: none;
  847. font-size: 12px;
  848. }}
  849. .fr-email-export-label{{
  850. font-weight: normal;
  851. font-size: 12px;
  852. }}
  853. ";
  854. }
  855. }