You are here

calendar.css in Content Planner 8

#content-calendar-overview {
  display: flex;
  flex-direction: row; }
  #content-calendar-overview .sidebar {
    width: 100%;
    max-width: 200px;
    position: fixed; }
    #content-calendar-overview .sidebar.fixed {
      top: 100px; }
    #content-calendar-overview .sidebar .sidebar-block {
      margin-bottom: 1em; }
    #content-calendar-overview .sidebar .links ul {
      margin-left: 0;
      padding-left: 0; }
      #content-calendar-overview .sidebar .links ul li {
        list-style: none; }

.calendar-id {
  position: absolute;
  top: -100px; }

#edit-calendar-year {
  width: 80%; }

#calendar-jump-links {
  margin-left: 0;
  padding-left: 0; }
  #calendar-jump-links li {
    list-style: none;
    padding: 5px;
    display: inline-block;
    width: 23%; }

.calendars {
  padding-left: 200px; }

.content-calendar {
  position: relative;
  margin-bottom: 6em; }
  .content-calendar thead th {
    border: 1px solid #bfbfba; }
  .content-calendar .cell {
    height: 150px;
    min-width: 185px;
    width: 2%;
    vertical-align: top;
    border: 1px solid #e6e4df;
    position: relative; }
    .content-calendar .cell.hovering {
      background-color: lightgreen; }
    .content-calendar .cell.today {
      background-color: #cde0ec; }
      .content-calendar .cell.today .day {
        background-color: #0074bd;
        color: white; }
    .content-calendar .cell .day {
      margin-bottom: 1em;
      display: block;
      width: 20px;
      text-align: center;
      border-radius: 50%; }
    .content-calendar .cell .add-content {
      position: absolute;
      top: 10px;
      right: 12px;
      color: black; }
      .content-calendar .cell .add-content .add-button {
        display: block;
        text-align: center;
        background-color: #e7e7e7;
        border: 1px solid darkgray;
        border-radius: 50%;
        padding: 1px 5px; }
      .content-calendar .cell .add-content .add-content-label {
        display: none;
        margin-bottom: 0.5em; }
      .content-calendar .cell .add-content .actions {
        margin-left: 0;
        padding-left: 0;
        display: none; }
        .content-calendar .cell .add-content .actions li {
          list-style: none; }
          .content-calendar .cell .add-content .actions li a {
            color: inherit;
            display: block; }
      .content-calendar .cell .add-content:hover {
        z-index: 1000;
        color: black;
        background-color: #e7e7e7;
        border: 1px solid darkgray;
        padding: 1em; }
        .content-calendar .cell .add-content:hover .add-button {
          display: none; }
        .content-calendar .cell .add-content:hover .actions {
          display: block; }
        .content-calendar .cell .add-content:hover .add-content-label {
          display: block; }
  .content-calendar .disabled-day {
    background: #f3f3f3; }
  .content-calendar .calendar-entry {
    border: 1px solid grey;
    font-size: 0.8rem;
    padding: 0.5em;
    position: relative;
    min-height: 60px;
    margin-bottom: 0.5em;
    background-color: white; }
    .content-calendar .calendar-entry.draggable {
      cursor: move; }
    .content-calendar .calendar-entry.ui-draggable-dragging {
      z-index: 1000;
      min-width: 160px; }
    .content-calendar .calendar-entry span {
      display: block; }
    .content-calendar .calendar-entry .user-info {
      float: left;
      margin-right: 0.7em; }
      .content-calendar .calendar-entry .user-info .user-picture {
        vertical-align: top; }
        .content-calendar .calendar-entry .user-info .user-picture img {
          border-radius: 50%; }
      .content-calendar .calendar-entry .user-info span {
        display: inline-block; }
    .content-calendar .calendar-entry .node-title {
      max-width: 85%;
      clear: both;
      height: 57px;
      overflow: hidden; }
      .content-calendar .calendar-entry .node-title a {
        color: inherit;
        font-weight: bold; }
    .content-calendar .calendar-entry .state-and-publication {
      padding-top: 5px; }
      .content-calendar .calendar-entry .state-and-publication > span {
        display: inline-block; }
      .content-calendar .calendar-entry .state-and-publication .workflow-state {
        color: white;
        padding: 2px 3px;
        border-radius: 3px;
        max-width: 60%;
        font-size: 0.7em;
        font-weight: bold;
        line-height: 1.2;
        background-color: #333333; }
      .content-calendar .calendar-entry .state-and-publication .publish-on, .content-calendar .calendar-entry .state-and-publication .created-on {
        float: right; }
    .content-calendar .calendar-entry .node-actions {
      position: absolute;
      right: 6px;
      top: 6px;
      z-index: 500; }
      .content-calendar .calendar-entry .node-actions li {
        list-style: none; }
        .content-calendar .calendar-entry .node-actions li .node-action {
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 16px 16px;
          background-color: transparent;
          text-indent: -9999px;
          border-radius: 0;
          border: 0;
          width: 22px !important;
          height: 22px !important;
          display: inline-block; }
        .content-calendar .calendar-entry .node-actions li .node-edit-link {
          background-image: url("/core/themes/stable/images/core/icons/bebebe/pencil.svg"); }
          .content-calendar .calendar-entry .node-actions li .node-edit-link:hover {
            background-image: url("/core/themes/stable/images/core/icons/787878/pencil.svg"); }
        .content-calendar .calendar-entry .node-actions li .node-delete-link {
          background-image: url("/core/themes/stable/images/core/icons/bebebe/ex.svg"); }
          .content-calendar .calendar-entry .node-actions li .node-delete-link:hover {
            background-image: url("/core/themes/stable/images/core/icons/787878/ex.svg"); }
        .content-calendar .calendar-entry .node-actions li .node-duplicate-link {
          background-image: url("../images/copy.svg"); }
          .content-calendar .calendar-entry .node-actions li .node-duplicate-link:hover {
            background-image: url("../images/copy-hover.svg"); }
  .content-calendar .legend .explanations {
    margin-left: 0;
    padding-left: 0; }
    .content-calendar .legend .explanations li {
      list-style: none;
      margin-bottom: 0.5em; }
    .content-calendar .legend .explanations .content-calendar-item-preview {
      width: 40px;
      height: 20px;
      border: 1px solid black;
      display: inline-block; }

[dir="rtl"] .calendars {
  padding-right: 200px;
  padding-left: 0; }

[dir="rtl"] .content-calendar .calendar-entry .node-actions {
  left: 6px;
  right: auto; }

[dir="rtl"] .content-calendar .calendar-entry .state-and-publication .publish-on, [dir="rtl"] .content-calendar .calendar-entry .state-and-publication .created-on {
  float: left; }

[dir="rtl"] .content-calendar .add-content {
  left: 12px;
  right: auto; }
  [dir="rtl"] .content-calendar .add-content .add-button {
    line-height: auto; }

/*# sourceMappingURL=calendar.css.map */

File

modules/content_calendar/assets/dist/css/calendar.css
View source
  1. #content-calendar-overview {
  2. display: flex;
  3. flex-direction: row; }
  4. #content-calendar-overview .sidebar {
  5. width: 100%;
  6. max-width: 200px;
  7. position: fixed; }
  8. #content-calendar-overview .sidebar.fixed {
  9. top: 100px; }
  10. #content-calendar-overview .sidebar .sidebar-block {
  11. margin-bottom: 1em; }
  12. #content-calendar-overview .sidebar .links ul {
  13. margin-left: 0;
  14. padding-left: 0; }
  15. #content-calendar-overview .sidebar .links ul li {
  16. list-style: none; }
  17. .calendar-id {
  18. position: absolute;
  19. top: -100px; }
  20. #edit-calendar-year {
  21. width: 80%; }
  22. #calendar-jump-links {
  23. margin-left: 0;
  24. padding-left: 0; }
  25. #calendar-jump-links li {
  26. list-style: none;
  27. padding: 5px;
  28. display: inline-block;
  29. width: 23%; }
  30. .calendars {
  31. padding-left: 200px; }
  32. .content-calendar {
  33. position: relative;
  34. margin-bottom: 6em; }
  35. .content-calendar thead th {
  36. border: 1px solid #bfbfba; }
  37. .content-calendar .cell {
  38. height: 150px;
  39. min-width: 185px;
  40. width: 2%;
  41. vertical-align: top;
  42. border: 1px solid #e6e4df;
  43. position: relative; }
  44. .content-calendar .cell.hovering {
  45. background-color: lightgreen; }
  46. .content-calendar .cell.today {
  47. background-color: #cde0ec; }
  48. .content-calendar .cell.today .day {
  49. background-color: #0074bd;
  50. color: white; }
  51. .content-calendar .cell .day {
  52. margin-bottom: 1em;
  53. display: block;
  54. width: 20px;
  55. text-align: center;
  56. border-radius: 50%; }
  57. .content-calendar .cell .add-content {
  58. position: absolute;
  59. top: 10px;
  60. right: 12px;
  61. color: black; }
  62. .content-calendar .cell .add-content .add-button {
  63. display: block;
  64. text-align: center;
  65. background-color: #e7e7e7;
  66. border: 1px solid darkgray;
  67. border-radius: 50%;
  68. padding: 1px 5px; }
  69. .content-calendar .cell .add-content .add-content-label {
  70. display: none;
  71. margin-bottom: 0.5em; }
  72. .content-calendar .cell .add-content .actions {
  73. margin-left: 0;
  74. padding-left: 0;
  75. display: none; }
  76. .content-calendar .cell .add-content .actions li {
  77. list-style: none; }
  78. .content-calendar .cell .add-content .actions li a {
  79. color: inherit;
  80. display: block; }
  81. .content-calendar .cell .add-content:hover {
  82. z-index: 1000;
  83. color: black;
  84. background-color: #e7e7e7;
  85. border: 1px solid darkgray;
  86. padding: 1em; }
  87. .content-calendar .cell .add-content:hover .add-button {
  88. display: none; }
  89. .content-calendar .cell .add-content:hover .actions {
  90. display: block; }
  91. .content-calendar .cell .add-content:hover .add-content-label {
  92. display: block; }
  93. .content-calendar .disabled-day {
  94. background: #f3f3f3; }
  95. .content-calendar .calendar-entry {
  96. border: 1px solid grey;
  97. font-size: 0.8rem;
  98. padding: 0.5em;
  99. position: relative;
  100. min-height: 60px;
  101. margin-bottom: 0.5em;
  102. background-color: white; }
  103. .content-calendar .calendar-entry.draggable {
  104. cursor: move; }
  105. .content-calendar .calendar-entry.ui-draggable-dragging {
  106. z-index: 1000;
  107. min-width: 160px; }
  108. .content-calendar .calendar-entry span {
  109. display: block; }
  110. .content-calendar .calendar-entry .user-info {
  111. float: left;
  112. margin-right: 0.7em; }
  113. .content-calendar .calendar-entry .user-info .user-picture {
  114. vertical-align: top; }
  115. .content-calendar .calendar-entry .user-info .user-picture img {
  116. border-radius: 50%; }
  117. .content-calendar .calendar-entry .user-info span {
  118. display: inline-block; }
  119. .content-calendar .calendar-entry .node-title {
  120. max-width: 85%;
  121. clear: both;
  122. height: 57px;
  123. overflow: hidden; }
  124. .content-calendar .calendar-entry .node-title a {
  125. color: inherit;
  126. font-weight: bold; }
  127. .content-calendar .calendar-entry .state-and-publication {
  128. padding-top: 5px; }
  129. .content-calendar .calendar-entry .state-and-publication > span {
  130. display: inline-block; }
  131. .content-calendar .calendar-entry .state-and-publication .workflow-state {
  132. color: white;
  133. padding: 2px 3px;
  134. border-radius: 3px;
  135. max-width: 60%;
  136. font-size: 0.7em;
  137. font-weight: bold;
  138. line-height: 1.2;
  139. background-color: #333333; }
  140. .content-calendar .calendar-entry .state-and-publication .publish-on, .content-calendar .calendar-entry .state-and-publication .created-on {
  141. float: right; }
  142. .content-calendar .calendar-entry .node-actions {
  143. position: absolute;
  144. right: 6px;
  145. top: 6px;
  146. z-index: 500; }
  147. .content-calendar .calendar-entry .node-actions li {
  148. list-style: none; }
  149. .content-calendar .calendar-entry .node-actions li .node-action {
  150. background-position: center center;
  151. background-repeat: no-repeat;
  152. background-size: 16px 16px;
  153. background-color: transparent;
  154. text-indent: -9999px;
  155. border-radius: 0;
  156. border: 0;
  157. width: 22px !important;
  158. height: 22px !important;
  159. display: inline-block; }
  160. .content-calendar .calendar-entry .node-actions li .node-edit-link {
  161. background-image: url("/core/themes/stable/images/core/icons/bebebe/pencil.svg"); }
  162. .content-calendar .calendar-entry .node-actions li .node-edit-link:hover {
  163. background-image: url("/core/themes/stable/images/core/icons/787878/pencil.svg"); }
  164. .content-calendar .calendar-entry .node-actions li .node-delete-link {
  165. background-image: url("/core/themes/stable/images/core/icons/bebebe/ex.svg"); }
  166. .content-calendar .calendar-entry .node-actions li .node-delete-link:hover {
  167. background-image: url("/core/themes/stable/images/core/icons/787878/ex.svg"); }
  168. .content-calendar .calendar-entry .node-actions li .node-duplicate-link {
  169. background-image: url("../images/copy.svg"); }
  170. .content-calendar .calendar-entry .node-actions li .node-duplicate-link:hover {
  171. background-image: url("../images/copy-hover.svg"); }
  172. .content-calendar .legend .explanations {
  173. margin-left: 0;
  174. padding-left: 0; }
  175. .content-calendar .legend .explanations li {
  176. list-style: none;
  177. margin-bottom: 0.5em; }
  178. .content-calendar .legend .explanations .content-calendar-item-preview {
  179. width: 40px;
  180. height: 20px;
  181. border: 1px solid black;
  182. display: inline-block; }
  183. [dir="rtl"] .calendars {
  184. padding-right: 200px;
  185. padding-left: 0; }
  186. [dir="rtl"] .content-calendar .calendar-entry .node-actions {
  187. left: 6px;
  188. right: auto; }
  189. [dir="rtl"] .content-calendar .calendar-entry .state-and-publication .publish-on, [dir="rtl"] .content-calendar .calendar-entry .state-and-publication .created-on {
  190. float: left; }
  191. [dir="rtl"] .content-calendar .add-content {
  192. left: 12px;
  193. right: auto; }
  194. [dir="rtl"] .content-calendar .add-content .add-button {
  195. line-height: auto; }
  196. /*# sourceMappingURL=calendar.css.map */