You are here

Home » API reference » Drupal PM (Project Management) 7.3

pm-dashboard.css in Drupal PM (Project Management) 7.3

Same filename and directory in other branches
  1. 8 pm-dashboard.css
  2. 7 pm-dashboard.css
  3. 7.2 pm-dashboard.css
#pmdashboard {
  width: 100%;
}

#pmdashboard .pmcomponent {
  display: block;
  width: 90%;
  margin: 10px;
  overflow: hidden;
  background: #efefef;
  height: 50px;
  position: relative;
  padding: 0 0 0 0;
  font-size: 20px;
  line-height: 50px;
}

#pmdashboard .pmcomponent a {
  color: #222;
  text-decoration: none;
}

#pmdashboard .pmcomponent a:hover {
  color: #777;
  text-decoration: none;
}

#pmdashboard .pmcomponent i.fa.pm-icon {
  border: none;
  opacity: 0.5;
  color: black;
  height: 100%;
  height: 50px;
  width: 50px;
  padding: 0px 5px;
  background-size: initial;
}

#pmdashboard .pmcomponent a i.fa.fa-plus {
  border: none;
  opacity: 0.2;
  color: black;
  background: rgba(0,0,0,0.3);
  height: 100%;
  float: right;
  height: 50px;
  width: 50px;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: 0;
}

#pmdashboard .pmcomponent a i.fa-plus:hover {
  opacity: 0.5;
}

/* Creates two columns, each 50% of page width */
div.pmdashboard {
  float: left;
  width: 50%;
}

#pmdashboard-block .pmcomponent {
  display: block;
  clear: both;
}

#pmdashboard-block {
  overflow: hidden;
}

#pmdashboard-block .pmdashboard-icon {
  display: inline;
  float: left;
}

#pmdashboard-block .pmdashboard-icon dt.pmcomponent {
  height: 32px;
  padding-top: 5px;
}

#header-region #pmdashboard-block * {
  display: inline-block;
}

.pm-use-storm-icons #pmdashboard .pmcomponent a i.fa.fa-plus {
  background: rgba(0,0,0,1) url(icons/application_add.png) no-repeat center center;
}

.pm-use-storm-icons #pmdashboard-block .pmcomponent i.fa {
  min-width: 16px;
  min-height: 16px;
  background-size: 100% auto;
}

.pm-use-storm-icons #pmdashboard .pmcomponent i.fa {
  min-width: 32px;
  min-height: 32px;
  opacity: 1;
}

.pm-use-storm-icons i.fa-institution {
  background-image: url(images/organizations.png);
}

.pm-use-storm-icons i.fa-cubes {
  background-image: url(images/projects.png);
}

.pm-use-storm-icons i.fa-cube {
  background-image: url(images/tasks.png);
}

.pm-use-storm-icons i.fa-money {
  background-image: url(images/expenses.png);
}
.pm-use-storm-icons i.fa-gear {
  background-image: url(images/configuration.png);
}

.pm-use-storm-icons i.fa-file-o {
  background-image: url(images/notes.png);
}

.pm-use-storm-icons i.fa-clock-o {
  background-image: url(images/timetrackings.png);
}

.pm-use-storm-icons .pmcomponent i.fa-tasks {
  background-image: url(images/tasks.png);
}

.pm-use-storm-icons .pmcomponent i.fa-ticket {
  background-image: url(images/tickets.png);
}

.pm-use-storm-icons .pmcomponent i.fa-users {
  background-image: url(images/teams.png);
}

File

pm-dashboard.css
View source 
  1. #pmdashboard {

  2.   width: 100%;

  3. }

  4. 

  5. #pmdashboard .pmcomponent {

  6.   display: block;

  7.   width: 90%;

  8.   margin: 10px;

  9.   overflow: hidden;

  10.   background: #efefef;

  11.   height: 50px;

  12.   position: relative;

  13.   padding: 0 0 0 0;

  14.   font-size: 20px;

  15.   line-height: 50px;

  16. }

  17. 

  18. #pmdashboard .pmcomponent a {

  19.   color: #222;

  20.   text-decoration: none;

  21. }

  22. 

  23. #pmdashboard .pmcomponent a:hover {

  24.   color: #777;

  25.   text-decoration: none;

  26. }

  27. 

  28. #pmdashboard .pmcomponent i.fa.pm-icon {

  29.   border: none;

  30.   opacity: 0.5;

  31.   color: black;

  32.   height: 100%;

  33.   height: 50px;

  34.   width: 50px;

  35.   padding: 0px 5px;

  36.   background-size: initial;

  37. }

  38. 

  39. #pmdashboard .pmcomponent a i.fa.fa-plus {

  40.   border: none;

  41.   opacity: 0.2;

  42.   color: black;

  43.   background: rgba(0,0,0,0.3);

  44.   height: 100%;

  45.   float: right;

  46.   height: 50px;

  47.   width: 50px;

  48.   line-height: 50px;

  49.   position: absolute;

  50.   top: 0;

  51.   right: 0;

  52. }

  53. 

  54. #pmdashboard .pmcomponent a i.fa-plus:hover {

  55.   opacity: 0.5;

  56. }

  57. 

  58. /* Creates two columns, each 50% of page width */

  59. div.pmdashboard {

  60.   float: left;

  61.   width: 50%;

  62. }

  63. 

  64. #pmdashboard-block .pmcomponent {

  65.   display: block;

  66.   clear: both;

  67. }

  68. 

  69. #pmdashboard-block {

  70.   overflow: hidden;

  71. }

  72. 

  73. #pmdashboard-block .pmdashboard-icon {

  74.   display: inline;

  75.   float: left;

  76. }

  77. 

  78. #pmdashboard-block .pmdashboard-icon dt.pmcomponent {

  79.   height: 32px;

  80.   padding-top: 5px;

  81. }

  82. 

  83. #header-region #pmdashboard-block * {

  84.   display: inline-block;

  85. }

  86. 

  87. .pm-use-storm-icons #pmdashboard .pmcomponent a i.fa.fa-plus {

  88.   background: rgba(0,0,0,1) url(icons/application_add.png) no-repeat center center;

  89. }

  90. 

  91. .pm-use-storm-icons #pmdashboard-block .pmcomponent i.fa {

  92.   min-width: 16px;

  93.   min-height: 16px;

  94.   background-size: 100% auto;

  95. }

  96. 

  97. .pm-use-storm-icons #pmdashboard .pmcomponent i.fa {

  98.   min-width: 32px;

  99.   min-height: 32px;

  100.   opacity: 1;

  101. }

  102. 

  103. .pm-use-storm-icons i.fa-institution {

  104.   background-image: url(images/organizations.png);

  105. }

  106. 

  107. .pm-use-storm-icons i.fa-cubes {

  108.   background-image: url(images/projects.png);

  109. }

  110. 

  111. .pm-use-storm-icons i.fa-cube {

  112.   background-image: url(images/tasks.png);

  113. }

  114. 

  115. .pm-use-storm-icons i.fa-money {

  116.   background-image: url(images/expenses.png);

  117. }

  118. .pm-use-storm-icons i.fa-gear {

  119.   background-image: url(images/configuration.png);

  120. }

  121. 

  122. .pm-use-storm-icons i.fa-file-o {

  123.   background-image: url(images/notes.png);

  124. }

  125. 

  126. .pm-use-storm-icons i.fa-clock-o {

  127.   background-image: url(images/timetrackings.png);

  128. }

  129. 

  130. .pm-use-storm-icons .pmcomponent i.fa-tasks {

  131.   background-image: url(images/tasks.png);

  132. }

  133. 

  134. .pm-use-storm-icons .pmcomponent i.fa-ticket {

  135.   background-image: url(images/tickets.png);

  136. }

  137. 

  138. .pm-use-storm-icons .pmcomponent i.fa-users {

  139.   background-image: url(images/teams.png);

  140. }