API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 1st, 2020
103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.29 KB | None | 0 0
raw download clone embed print report
  1. .gantt {
  2.     width: 100%;
  3.     margin: 20px auto;
  4.     border: 14px solid #ddd;
  5.     position: relative;
  6. -webkit-border-radius: 6px;
  7.    -moz-border-radius: 6px;
  8.         border-radius: 6px;
  9. -webkit-box-sizing: border-box;
  10.    -moz-box-sizing: border-box;
  11.         box-sizing: border-box;
  12. }
  13.  
  14. .gantt:after {
  15.     content: ".";
  16.     visibility: hidden;
  17.     display: block;
  18.     height: 0;
  19.     clear: both;
  20. }
  21.  
  22. .fn-gantt {
  23.     width: 100%;
  24. }
  25.  
  26. .fn-gantt *,
  27. .fn-gantt *:after,
  28. .fn-gantt *:before {
  29.   -webkit-box-sizing: border-box;
  30.      -moz-box-sizing: border-box;
  31.           box-sizing: border-box;
  32. }
  33.  
  34. .fn-gantt .fn-content {
  35.     overflow: hidden;
  36.     position: relative;
  37.     width: 100%;
  38. }
  39.  
  40. .fn-gantt .row {
  41.     float: left;
  42.     height: 24px;
  43.     line-height: 24px;
  44.     margin: 0;
  45. }
  46.  
  47.  
  48. /* === LEFT PANEL === */
  49.  
  50. .fn-gantt .leftPanel {
  51.     float: left;
  52.     width: 225px;
  53.     overflow: hidden;
  54.     border-right: 1px solid #DDD;
  55.     position: relative;
  56.     z-index: 20;
  57. }
  58.  
  59. .fn-gantt .leftPanel .fn-label {
  60.     display: inline-block;
  61.     margin: 0 0 0 5px;
  62.     color: #484A4D;
  63.     width: 110px;
  64.     white-space: nowrap;
  65.     text-overflow: ellipsis;
  66.     overflow: hidden;
  67. }
  68.  
  69. .fn-gantt .leftPanel .row {
  70.     border-bottom: 1px solid #DDD;
  71. }
  72. .fn-gantt .leftPanel .name, .fn-gantt .leftPanel .desc {
  73.     float: left;
  74.     height: 24px;
  75.     width: 50%;
  76.     background-color: #f6f6f6;
  77. }
  78.  
  79. .fn-gantt .leftPanel .name {
  80.     font-weight: bold;
  81. }
  82.  
  83. .fn-gantt .leftPanel .fn-wide, .fn-gantt .leftPanel .fn-wide .fn-label {
  84.     width: 100%;
  85. }
  86.  
  87. .fn-gantt .leftPanel .spacer {
  88.     background-color: #f6f6f6;
  89.     width: 100%;
  90. }
  91.  
  92.  
  93.  
  94.  
  95. /* === RIGHT PANEL === */
  96.  
  97. .fn-gantt .rightPanel {
  98.     overflow: hidden;
  99. }
  100.  
  101. .fn-gantt .dataPanel {
  102.     margin-left: 0;
  103.     outline: 1px solid #DDD;
  104.     /* TODO: Replace image with gradient?
  105.     background-size: 24px 24px;
  106.     background-image: linear-gradient(to left, rgba(221, 221, 221, 0.7) 1px, transparent 1px), linear-gradient(to top, rgba(221, 221, 221, 0.7) 1px, transparent 1px);
  107.     */
  108.     background-image: url(../img/grid.png);
  109.     background-repeat: repeat;
  110.     position: relative;
  111. }
  112.  
  113. .fn-gantt .row.header {
  114.     margin-right: -1px;
  115.     width: 100%;
  116. }
  117.  
  118. .fn-gantt .day, .fn-gantt .date {
  119.     overflow: visible;
  120.     width: 24px;
  121.     line-height: 24px;
  122.     text-align: center;
  123.     border-right: 1px solid #DDD;
  124.     border-bottom: 1px solid #DDD;
  125.     font-size: 11px;
  126.     color: #484a4d;
  127.     text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  128.     text-align: center;
  129. }
  130.  
  131. .fn-gantt .sa, .fn-gantt .sn, .fn-gantt .wd {
  132.     height: 24px;
  133.     text-align: center;
  134. }
  135.  
  136. .fn-gantt .sa, .fn-gantt .sn {
  137.     color: #939496;
  138.     background-color: #f5f5f5;
  139.     text-align: center;
  140. }
  141.  
  142. .fn-gantt .wd {
  143.     background-color: #f6f6f6;
  144.     text-align: center;
  145. }
  146.  
  147. .fn-gantt .holiday {
  148.     background-color: #ffd263;
  149.     height: 24px;
  150. }
  151.  
  152. .fn-gantt .today {
  153.     background-color: #fff8da;
  154.     height: 24px;
  155.     font-weight: bold;
  156.     text-align: center;
  157. }
  158.  
  159. .fn-gantt .rightPanel .month, .fn-gantt .rightPanel .year {
  160.     float: left;
  161.     overflow: hidden;
  162.     border-right: 1px solid #DDD;
  163.     border-bottom: 1px solid #DDD;
  164.     height: 24px;
  165.     background-color: #f6f6f6;
  166.     font-weight: bold;
  167.     font-size: 11px;
  168.     color: #484a4d;
  169.     text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  170.     text-align: center;
  171. }
  172.  
  173. .fn-gantt-hint {
  174.     border: 5px solid #edc332;
  175.     background-color: #fff5d4;
  176.     padding: 10px;
  177.     position: absolute;
  178.     display: none;
  179.     z-index: 11;
  180. -webkit-border-radius: 4px;
  181.    -moz-border-radius: 4px;
  182.         border-radius: 4px;
  183. }
  184.  
  185. .fn-gantt .bar {
  186.     background-color: #D0E4FD;
  187.     height: 18px;
  188.     margin: 0 3px 3px 0;
  189.     position: absolute;
  190.     z-index: 10;
  191.     text-align: center;
  192. -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.25) inset;
  193.    -moz-box-shadow: 0 0 1px rgba(0,0,0,0.25) inset;
  194.         box-shadow: 0 0 1px rgba(0,0,0,0.25) inset;
  195. -webkit-border-radius: 3px;
  196.    -moz-border-radius: 3px;
  197.         border-radius: 3px;
  198. }
  199.  
  200. .fn-gantt .bar .fn-label {
  201.     line-height: 18px;
  202.     font-weight: bold;
  203.     white-space: nowrap;
  204.     width: 100%;
  205.     text-overflow: ellipsis;
  206.     overflow: hidden;
  207.     text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  208.     color: #414B57 !important;
  209.     text-align: center;
  210.     font-size: 11px;
  211. }
  212.  
  213. .fn-gantt .ganttRed {
  214.     background-color: #F9C4E1;
  215. }
  216. .fn-gantt .ganttRed .fn-label {
  217.     color: #78436D !important;
  218. }
  219.  
  220. .fn-gantt .ganttGreen {
  221.     background-color: #D8EDA3;
  222. }
  223. .fn-gantt .ganttGreen .fn-label {
  224.     color: #778461 !important;
  225. }
  226.  
  227. .fn-gantt .ganttOrange {
  228.     background-color: #FCD29A;
  229. }
  230. .fn-gantt .ganttOrange .fn-label {
  231.     color: #714715 !important;
  232. }
  233.  
  234.  
  235. /* === BOTTOM NAVIGATION === */
  236.  
  237. .fn-gantt .bottom {
  238.     clear: both;
  239.     background-color: #f6f6f6;
  240.     width: 100%;
  241. }
  242. .fn-gantt .navigate {
  243.     border-top: 1px solid #DDD;
  244.     padding: 10px 0 10px 225px;
  245. }
  246.  
  247. .fn-gantt .navigate .nav-slider {
  248.     height: 20px;
  249.     display: inline-block;
  250. }
  251.  
  252. .fn-gantt .navigate .nav-slider-left, .fn-gantt .navigate .nav-slider-right {
  253.     text-align: center;
  254.     height: 20px;
  255.     display: inline-block;
  256. }
  257.  
  258. .fn-gantt .navigate .nav-slider-left {
  259.     float: left;
  260. }
  261.  
  262. .fn-gantt .navigate .nav-slider-right {
  263.     float: right;
  264. }
  265.  
  266. .fn-gantt .navigate .nav-slider-content {
  267.     text-align: left;
  268.     width: 160px;
  269.     height: 20px;
  270.     display: inline-block;
  271.     margin: 0 10px;
  272. }
  273.  
  274. .fn-gantt .navigate .nav-slider-bar, .fn-gantt .navigate .nav-slider-button {
  275.     position: absolute;
  276.     display: block;
  277. }
  278.  
  279. .fn-gantt .navigate .nav-slider-bar {
  280.     width: 155px;
  281.     height: 6px;
  282.     background-color: #838688;
  283.     margin: 8px 0 0 0;
  284. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset;
  285.    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset;
  286.         box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset;
  287. -webkit-border-radius: 3px;
  288.    -moz-border-radius: 3px;
  289.         border-radius: 3px;
  290. }
  291.  
  292. .fn-gantt .navigate .nav-slider-button {
  293.     width: 17px;
  294.     height: 60px;
  295.     background: url(../img/slider_handle.png) center center no-repeat;
  296.     left: 0;
  297.     top: 0;
  298.     margin: -26px 0 0 0;
  299.     cursor: pointer;
  300. }
  301.  
  302. .fn-gantt .navigate .page-number {
  303.     display: inline-block;
  304.     font-size: 10px;
  305.     height: 20px;
  306. }
  307.  
  308. .fn-gantt .navigate .page-number span {
  309.     color: #666666;
  310.     margin: 0 6px;
  311.     height: 20px;
  312.     line-height: 20px;
  313.     display: inline-block;
  314. }
  315.  
  316. .fn-gantt .navigate a:link, .fn-gantt .navigate a:visited, .fn-gantt .navigate a:active {
  317.     text-decoration: none;
  318. }
  319.  
  320. .fn-gantt .nav-link {
  321.     margin: 0 3px 0 0;
  322.     display: inline-block;
  323.     width: 20px;
  324.     height: 20px;
  325.     font-size: 0;
  326.     background: #595959 url(../img/icon_sprite.png) !important;
  327.     border: 1px solid #454546;
  328.     cursor: pointer;
  329.     vertical-align: top;
  330. -webkit-border-radius: 2px;
  331.    -moz-border-radius: 2px;
  332.         border-radius: 2px;
  333. -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 1px rgba(0,0,0,0.2);
  334.    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 1px rgba(0,0,0,0.2);
  335.         box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 1px rgba(0,0,0,0.2);
  336. -webkit-box-sizing: border-box;
  337.    -moz-box-sizing: border-box;
  338.         box-sizing: border-box;
  339. }
  340. .fn-gantt .nav-link:active {
  341. -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.25) inset, 0 1px 0 #FFF;
  342.    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.25) inset, 0 1px 0 #FFF;
  343.         box-shadow: 0 1px 1px rgba(0,0,0,0.25) inset, 0 1px 0 #FFF;
  344. }
  345.  
  346. .fn-gantt .navigate .nav-page-back {
  347.     background-position: 1px 0 !important;
  348.     margin: 0;
  349. }
  350.  
  351. .fn-gantt .navigate .nav-page-next {
  352.     background-position: 1px -16px !important;
  353.     margin-right: 15px;
  354. }
  355.  
  356. .fn-gantt .navigate .nav-slider .nav-page-next {
  357.     margin-right: 5px;
  358. }
  359.  
  360. .fn-gantt .navigate .nav-begin {
  361.     background-position: 1px -112px !important;
  362. }
  363.  
  364. .fn-gantt .navigate .nav-prev-week {
  365.     background-position: 1px -128px !important;
  366. }
  367.  
  368. .fn-gantt .navigate .nav-prev-day {
  369.     background-position: 1px -48px !important;
  370. }
  371.  
  372. .fn-gantt .navigate .nav-next-day {
  373.     background-position: 1px -64px !important;
  374. }
  375.  
  376. .fn-gantt .navigate .nav-next-week {
  377.     background-position: 1px -160px !important;
  378. }
  379.  
  380. .fn-gantt .navigate .nav-end {
  381.     background-position: 1px -144px !important;
  382. }
  383.  
  384. .fn-gantt .navigate .nav-zoomOut {
  385.     background-position: 1px -96px !important;
  386. }
  387.  
  388. .fn-gantt .navigate .nav-zoomIn {
  389.     background-position: 1px -80px !important;
  390.     margin-left: 15px;
  391. }
  392.  
  393. .fn-gantt .navigate .nav-now {
  394.     background-position: 1px -32px !important;
  395. }
  396.  
  397. .fn-gantt .navigate .nav-slider .nav-now {
  398.     margin-right: 5px;
  399. }
  400.  
  401. .fn-gantt-loader {
  402.     position: absolute;
  403.     width: 100%;
  404.     height: 100%;
  405.     left: 0;
  406.     top: 0;
  407.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#bf000000',GradientType=0 );
  408.     background: rgba(0,0,0,0.75);
  409.     cursor: wait;
  410.     z-index: 30;
  411. }
  412. .fn-gantt-loader-spinner span {
  413.     position: absolute;
  414.     margin: auto;
  415.     top: 0;
  416.     right: 0;
  417.     bottom: 0;
  418.     left: 0;
  419.     width: 100%;
  420.     text-align: center;
  421.     height: 1em;
  422.     line-height: 1em;
  423.     color: #fff;
  424.     font-size: 1em;
  425.     font-weight: bold;
  426. }
  427.  
  428. .row:after {
  429.     clear: both;
  430. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!