style.css

  1. 7.x themes/fp_clean/style.css
  2. 7.x modules/student_profile/css/style.css
  3. 7.x modules/schools/css/style.css
  4. 7.x modules/calendar/css/style.css
  5. 7.x modules/engagements/css/style.css
  6. 7.x modules/system/css/style.css
  7. 7.x modules/alerts/css/style.css
  8. 6.x themes/fp6_clean/style.css
  9. 6.x modules/engagements/css/style.css
  10. 6.x modules/alerts/css/style.css
  11. 6.x modules/system/css/style.css
  12. 6.x modules/calendar/css/style.css
  13. 6.x modules/student_profile/css/style.css
  14. 6.x modules/schools/css/style.css
  15. 4.x themes/classic/style.css
  16. 4.x modules/system/css/style.css
  17. 5.x themes/basic/style.css
  18. 5.x themes/fp5_clean/style.css
  19. 5.x themes/classic/style.css
  20. 5.x modules/system/css/style.css


___custom-calendar{}

body {
  min-width: 500px;
}


.tzexplain {
  text-align: center;
  padding: 10px;
}

.tzglobe {
  color: green;
  
}


.schedule-appt-sep {
  margin-top: 50px;
  border-top: 1px solid #ccc;
  padding-top: 20px;
  font-size: 1.3em;
  margin-bottom: 50px;
}



.calendar-feed-instructions {
  text-shadow: none;
  font-weight: bold;
}

.custom-calendar .today {
  background-color: lemonchiffon !important;
}

.cal-prev-link {
  float: left;
  font-size: 16pt;
}

.cal-next-link {
  float: right;
  font-size: 16pt;
}

.calendar-toggle-times {
  margin-top: 15px;
}

.calendar-header {
  font-size: 2em;
  
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

table.custom-calendar {
  width: 100%;
  
}

table.custom-calendar td {
  vertical-align: top;
  padding-left: 5px;
  padding-right: 5px;
}

.custom-calendar .date-box-top {
  display: block;
  text-align: right;
}

.custom-calendar .date-box-top a.add-date {
  display: inline-block;
  padding-right: 10px;
}

.not-logged-in .date-box-top a.add-date {
  display: none !important;
}

.custom-calendar .date-box-top .the-day-num {
  display: inline-block;
  min-width: 20px;
}

.custom-calendar .calendar-entry {
  font-size: 0.7em;
  border-bottom: 1px dashed #ccc;
  line-height: 1.5em;
  text-align: left;
  margin-bottom: 2px;
}

.custom-calendar .calendar-entry .name-shift-line {
  font-weight: bold;
  font-size: 11px;
}

.custom-calendar .calendar-entry .no-name-yet {
  color: #ccc;
}

.custom-calendar .calendar-entry .time-line {
  text-align: right;
  font-size: 10px;
}

.custom-calendar .out-of-range-day {
  background-color: #ddd;
}


.ui-dialog .ui-dialog-buttonpane {
  padding: 0;
  margin: 0;
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: 0;
}

.ui-button-text-only .ui-button-text {
  
}

.ui-button .ui-button-text {
    font-size: 0.8em;
}

.mobile-day-count {
  text-align: center;  
  position: relative;
}

.mobile-day-count a {
  display: inline-block;
  text-align: center;
  width: 1.1em;  
  background-color: #0095ff;
  padding: 2px 4px 2px 3px;
  border-radius: 50%;
  color: white;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 30px;
}





___calendar{}


a.calendar-entry-edit-link {
  float: left;
  margin-right: 3px;
  color: #ccc;
}
a.calendar-entry-edit-link:hover {
  color: #999;
}


.vertical-tabs {
  display: none;
}

.admin-menu .vertical-tabs {
  display: block;
}

.iframe .vertical-tabs {
  display: none;
}

li.date-prev a {
  padding-right: 5px;
}
li.date-next a {
  padding-left: 5px;
}


.calendar-calendar div.day {
  width: 4em;
}

.calendar-calendar a.add-date {
  font-size: 0.9em;
  padding-left: 10px;
  padding-right: 10px;
  color: #ddd !important;
}

.calendar-calendar .out-of-range-day a.add-date {
  color: white !important;
}

.calendar-calendar a.add-date:hover {
  color: #4b85ac !important;
}

.calendar-week-add {
  float: right;
}

#multi-day-container {
  clear: both;
}


.calendar-calendar .month-view .item {
  line-height: 0.9em;
  margin-bottom: 10px;
  
}

.calendar-calendar .month-view .item .monthview {
  background-color: transparent !important;
  border-bottom: 1px dashed #ccc;
}

.calendar-calendar .month-view .item .monthview .date-display-single {
  font-weight: normal;
  display: block;
  text-align: right;
}

.calendar-calendar .month-view .item .monthview .date-display-single .date-display-start,
.calendar-calendar .month-view .item .monthview .date-display-single .date-display-end {
  font-weight: normal;
}


.cal-employee-name,
.cal-shift-name
 {
  font-weight: bold;
  font-size: 1.1em;
}

.calendar-calendar th {
    text-align: center;
    margin: 0;
    background: #999;
    border-right: 1px solid #c8c7c7;
    color: #fff;
    padding: 10px;
    font-weight: bold;    
}

.calendar-calendar td {
    width: 14%;
  
    border: 1px solid #ccc;
    color: #777;
    text-align: right;
    vertical-align: top;
    margin: 0;
    padding: 0;
}
/* forces calendar days to be certain height */
.calendar-calendar td::after {
  content: "";
  display: inline-block;
  vertical-align: top;  
  min-height: 80px;
}


.mobile-day-page .calendar-entry {
  font-size: 1.6em;
  margin-bottom: 10px;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
}

.mobile-day-page .name-shift-line,
.mobile-day-page .time-line {
 display: inline-block;
}

.mobile-day-page .time-line {
  float: right;
  margin-left: 10px;
}


.appt-canceled div
{
  text-decoration: line-through;
  background-color: #eee;
}




___schedule_appointment {}


.small-circle-profile-image {
  display: block;
  width: 150px;
  height: 150px;
  overflow-y: hidden;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
}

.small-circle-profile-image img {
  width: 100%;
  height: auto;
}

.calendar-mini-calendar {
  display: inline-block;
  width: 400px;
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;  
}


.calendar-mini-calendar .month-title {
  padding-left: 30px;
  padding-right: 30px;
}

.calendar-mini-calendar table {
  margin-left: auto;
  margin-right: auto;
}

.calendar-mini-calendar table td {
  padding: 10px 15px 10px 15px;
  
}


.calendar-mini-calendar table th,
.calendar-mini-calendar table td
 {
  text-align: center;
}

.calendar-mini-calendar table td.mini-past-date {
  z__background-color: #eee;
  
}

.calendar-mini-calendar table td.mini-day-today {  
  background-color: lemonchiffon;
}

.calendar-mini-calendar table td.mini-day a {
  display: inline-block;
  text-align: center;
  width: 1.1em;  
  background-color: #0095ff;
  padding: 2px 4px 2px 3px;
  border-radius: 50%;
  color: white;
}

.calendar-mini-calendar table td.mini-day a:hover {
  text-decoration: none;
  background-color: lightskyblue;
}



p.select-directions {
  text-align: center;
}

.select-from-event-types {
  margin-top: 50px;
  text-align: center;
}

.select-from-event-types .event-type,
.event-type-box
{
  display: inline-block;
  width: 380px;
  
  min-height: 120px;
  text-align: center;
  margin-right: 50px;
  vertical-align: top;
  font-size: 1.1em;
  padding: 20px;
  overflow-y:hidden;
  text-overflow: ellipsis;
  box-shadow: 1px 1px 10px #ddd;
}

.select-from-event-types .event-type:hover {
  text-decoration: none;
  background-color: #f9f9f9;
}

.event-type-box {  
  box-shadow: none;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  margin-right: 10px;
}


.select-from-event-types .event-type .event-type-title,
.event-type-box .event-type-title
 {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 10px;
}

.select-from-event-types .event-type .event-type-description {
  color: black;
}

.event-select-time {  
  display: inline-block;
  width: 400px;
  height: 400px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;  
}

.event-select-time a.select-time {
  display: block;
  width: 300px;
  text-align: center;
  margin-bottom: 10px;
  padding: 20px;
  box-shadow: 1px 1px 10px #ddd;
  margin-left: auto;
  margin-right: auto;
}

.event-select-time a.select-time:hover {
  text-decoration: none;
  background-color: #f9f9f9;  
}



.confirm-schedule-appt-type,
.confirm-schedule-appt-datetime
 {
  font-size: 1.1em;
  padding-bottom: 10px;
}



.appointment-summary-view {
  font-size: 1.1em;
  display: block;
  width: 500px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #ccc;
  padding: 30px;
}








___appointment_settings{}

table.schedule-event-types {
  width: 90%;
}

table.schedule-event-types th {
  
}

table.schedule-event-types td,
table.schedule-event-types th
 {
  padding: 10px 20px 10px 20px;
}

table td.actions {
  width: 70px;
}


___forms{}

.calendar-faculty_id {
  font-size: 1.2em;
}
.calendar-faculty_id label {
  display: inline-block;
  margin-right: 20px; 
}



___unavailable_times_content{}

#element-wrapper-days .checkbox-element {
  display: inline-block;
  margin-right: 20px;
}

File

modules/calendar/css/style.css
View source
  1. 

  2. 

  3. 

  4. ___custom-calendar{}

  5. 

  6. body {

  7.   min-width: 500px;

  8. }

  9. 

  10. 

  11. .tzexplain {

  12.   text-align: center;

  13.   padding: 10px;

  14. }

  15. 

  16. .tzglobe {

  17.   color: green;

  18.   

  19. }

  20. 

  21. 

  22. .schedule-appt-sep {

  23.   margin-top: 50px;

  24.   border-top: 1px solid #ccc;

  25.   padding-top: 20px;

  26.   font-size: 1.3em;

  27.   margin-bottom: 50px;

  28. }

  29. 

  30. 

  31. 

  32. .calendar-feed-instructions {

  33.   text-shadow: none;

  34.   font-weight: bold;

  35. }

  36. 

  37. .custom-calendar .today {

  38.   background-color: lemonchiffon !important;

  39. }

  40. 

  41. .cal-prev-link {

  42.   float: left;

  43.   font-size: 16pt;

  44. }

  45. 

  46. .cal-next-link {

  47.   float: right;

  48.   font-size: 16pt;

  49. }

  50. 

  51. .calendar-toggle-times {

  52.   margin-top: 15px;

  53. }

  54. 

  55. .calendar-header {

  56.   font-size: 2em;

  57.   

  58.   text-align: center;

  59.   margin-top: 20px;

  60.   margin-bottom: 20px;

  61. }

  62. 

  63. table.custom-calendar {

  64.   width: 100%;

  65.   

  66. }

  67. 

  68. table.custom-calendar td {

  69.   vertical-align: top;

  70.   padding-left: 5px;

  71.   padding-right: 5px;

  72. }

  73. 

  74. .custom-calendar .date-box-top {

  75.   display: block;

  76.   text-align: right;

  77. }

  78. 

  79. .custom-calendar .date-box-top a.add-date {

  80.   display: inline-block;

  81.   padding-right: 10px;

  82. }

  83. 

  84. .not-logged-in .date-box-top a.add-date {

  85.   display: none !important;

  86. }

  87. 

  88. .custom-calendar .date-box-top .the-day-num {

  89.   display: inline-block;

  90.   min-width: 20px;

  91. }

  92. 

  93. .custom-calendar .calendar-entry {

  94.   font-size: 0.7em;

  95.   border-bottom: 1px dashed #ccc;

  96.   line-height: 1.5em;

  97.   text-align: left;

  98.   margin-bottom: 2px;

  99. }

  100. 

  101. .custom-calendar .calendar-entry .name-shift-line {

  102.   font-weight: bold;

  103.   font-size: 11px;

  104. }

  105. 

  106. .custom-calendar .calendar-entry .no-name-yet {

  107.   color: #ccc;

  108. }

  109. 

  110. .custom-calendar .calendar-entry .time-line {

  111.   text-align: right;

  112.   font-size: 10px;

  113. }

  114. 

  115. .custom-calendar .out-of-range-day {

  116.   background-color: #ddd;

  117. }

  118. 

  119. 

  120. .ui-dialog .ui-dialog-buttonpane {

  121.   padding: 0;

  122.   margin: 0;

  123. }

  124. 

  125. .ui-dialog .ui-dialog-buttonpane button {

  126.   margin: 0;

  127. }

  128. 

  129. .ui-button-text-only .ui-button-text {

  130.   

  131. }

  132. 

  133. .ui-button .ui-button-text {

  134.     font-size: 0.8em;

  135. }

  136. 

  137. .mobile-day-count {

  138.   text-align: center;  

  139.   position: relative;

  140. }

  141. 

  142. .mobile-day-count a {

  143.   display: inline-block;

  144.   text-align: center;

  145.   width: 1.1em;  

  146.   background-color: #0095ff;

  147.   padding: 2px 4px 2px 3px;

  148.   border-radius: 50%;

  149.   color: white;

  150.   margin-left: auto;

  151.   margin-right: auto;

  152.   position: relative;

  153.   top: 30px;

  154. }

  155. 

  156. 

  157. 

  158. 

  159. 

  160. ___calendar{}

  161. 

  162. 

  163. a.calendar-entry-edit-link {

  164.   float: left;

  165.   margin-right: 3px;

  166.   color: #ccc;

  167. }

  168. a.calendar-entry-edit-link:hover {

  169.   color: #999;

  170. }

  171. 

  172. 

  173. .vertical-tabs {

  174.   display: none;

  175. }

  176. 

  177. .admin-menu .vertical-tabs {

  178.   display: block;

  179. }

  180. 

  181. .iframe .vertical-tabs {

  182.   display: none;

  183. }

  184. 

  185. li.date-prev a {

  186.   padding-right: 5px;

  187. }

  188. li.date-next a {

  189.   padding-left: 5px;

  190. }

  191. 

  192. 

  193. .calendar-calendar div.day {

  194.   width: 4em;

  195. }

  196. 

  197. .calendar-calendar a.add-date {

  198.   font-size: 0.9em;

  199.   padding-left: 10px;

  200.   padding-right: 10px;

  201.   color: #ddd !important;

  202. }

  203. 

  204. .calendar-calendar .out-of-range-day a.add-date {

  205.   color: white !important;

  206. }

  207. 

  208. .calendar-calendar a.add-date:hover {

  209.   color: #4b85ac !important;

  210. }

  211. 

  212. .calendar-week-add {

  213.   float: right;

  214. }

  215. 

  216. #multi-day-container {

  217.   clear: both;

  218. }

  219. 

  220. 

  221. .calendar-calendar .month-view .item {

  222.   line-height: 0.9em;

  223.   margin-bottom: 10px;

  224.   

  225. }

  226. 

  227. .calendar-calendar .month-view .item .monthview {

  228.   background-color: transparent !important;

  229.   border-bottom: 1px dashed #ccc;

  230. }

  231. 

  232. .calendar-calendar .month-view .item .monthview .date-display-single {

  233.   font-weight: normal;

  234.   display: block;

  235.   text-align: right;

  236. }

  237. 

  238. .calendar-calendar .month-view .item .monthview .date-display-single .date-display-start,

  239. .calendar-calendar .month-view .item .monthview .date-display-single .date-display-end {

  240.   font-weight: normal;

  241. }

  242. 

  243. 

  244. .cal-employee-name,

  245. .cal-shift-name

  246.  {

  247.   font-weight: bold;

  248.   font-size: 1.1em;

  249. }

  250. 

  251. .calendar-calendar th {

  252.     text-align: center;

  253.     margin: 0;

  254.     background: #999;

  255.     border-right: 1px solid #c8c7c7;

  256.     color: #fff;

  257.     padding: 10px;

  258.     font-weight: bold;    

  259. }

  260. 

  261. .calendar-calendar td {

  262.     width: 14%;

  263.   

  264.     border: 1px solid #ccc;

  265.     color: #777;

  266.     text-align: right;

  267.     vertical-align: top;

  268.     margin: 0;

  269.     padding: 0;

  270. }

  271. /* forces calendar days to be certain height */

  272. .calendar-calendar td::after {

  273.   content: "";

  274.   display: inline-block;

  275.   vertical-align: top;  

  276.   min-height: 80px;

  277. }

  278. 

  279. 

  280. .mobile-day-page .calendar-entry {

  281.   font-size: 1.6em;

  282.   margin-bottom: 10px;

  283.   border-bottom: 1px dashed #ccc;

  284.   padding-bottom: 10px;

  285. }

  286. 

  287. .mobile-day-page .name-shift-line,

  288. .mobile-day-page .time-line {

  289.  display: inline-block;

  290. }

  291. 

  292. .mobile-day-page .time-line {

  293.   float: right;

  294.   margin-left: 10px;

  295. }

  296. 

  297. 

  298. .appt-canceled div

  299. {

  300.   text-decoration: line-through;

  301.   background-color: #eee;

  302. }

  303. 

  304. 

  305. 

  306. 

  307. ___schedule_appointment {}

  308. 

  309. 

  310. .small-circle-profile-image {

  311.   display: block;

  312.   width: 150px;

  313.   height: 150px;

  314.   overflow-y: hidden;

  315.   border-radius: 50%;

  316.   margin-left: auto;

  317.   margin-right: auto;

  318. }

  319. 

  320. .small-circle-profile-image img {

  321.   width: 100%;

  322.   height: auto;

  323. }

  324. 

  325. .calendar-mini-calendar {

  326.   display: inline-block;

  327.   width: 400px;

  328.   border: 1px solid #ddd;

  329.   padding: 10px;

  330.   text-align: center;  

  331. }

  332. 

  333. 

  334. .calendar-mini-calendar .month-title {

  335.   padding-left: 30px;

  336.   padding-right: 30px;

  337. }

  338. 

  339. .calendar-mini-calendar table {

  340.   margin-left: auto;

  341.   margin-right: auto;

  342. }

  343. 

  344. .calendar-mini-calendar table td {

  345.   padding: 10px 15px 10px 15px;

  346.   

  347. }

  348. 

  349. 

  350. .calendar-mini-calendar table th,

  351. .calendar-mini-calendar table td

  352.  {

  353.   text-align: center;

  354. }

  355. 

  356. .calendar-mini-calendar table td.mini-past-date {

  357.   z__background-color: #eee;

  358.   

  359. }

  360. 

  361. .calendar-mini-calendar table td.mini-day-today {  

  362.   background-color: lemonchiffon;

  363. }

  364. 

  365. .calendar-mini-calendar table td.mini-day a {

  366.   display: inline-block;

  367.   text-align: center;

  368.   width: 1.1em;  

  369.   background-color: #0095ff;

  370.   padding: 2px 4px 2px 3px;

  371.   border-radius: 50%;

  372.   color: white;

  373. }

  374. 

  375. .calendar-mini-calendar table td.mini-day a:hover {

  376.   text-decoration: none;

  377.   background-color: lightskyblue;

  378. }

  379. 

  380. 

  381. 

  382. p.select-directions {

  383.   text-align: center;

  384. }

  385. 

  386. .select-from-event-types {

  387.   margin-top: 50px;

  388.   text-align: center;

  389. }

  390. 

  391. .select-from-event-types .event-type,

  392. .event-type-box

  393. {

  394.   display: inline-block;

  395.   width: 380px;

  396.   

  397.   min-height: 120px;

  398.   text-align: center;

  399.   margin-right: 50px;

  400.   vertical-align: top;

  401.   font-size: 1.1em;

  402.   padding: 20px;

  403.   overflow-y:hidden;

  404.   text-overflow: ellipsis;

  405.   box-shadow: 1px 1px 10px #ddd;

  406. }

  407. 

  408. .select-from-event-types .event-type:hover {

  409.   text-decoration: none;

  410.   background-color: #f9f9f9;

  411. }

  412. 

  413. .event-type-box {  

  414.   box-shadow: none;

  415.   border: 1px solid #ddd;

  416.   margin-bottom: 10px;

  417.   margin-right: 10px;

  418. }

  419. 

  420. 

  421. .select-from-event-types .event-type .event-type-title,

  422. .event-type-box .event-type-title

  423.  {

  424.   font-weight: bold;

  425.   font-size: 1.1em;

  426.   margin-bottom: 10px;

  427. }

  428. 

  429. .select-from-event-types .event-type .event-type-description {

  430.   color: black;

  431. }

  432. 

  433. .event-select-time {  

  434.   display: inline-block;

  435.   width: 400px;

  436.   height: 400px;

  437.   overflow-y: scroll;

  438.   border: 1px solid #ccc;

  439.   padding: 10px;

  440.   margin-left: auto;

  441.   margin-right: auto;  

  442. }

  443. 

  444. .event-select-time a.select-time {

  445.   display: block;

  446.   width: 300px;

  447.   text-align: center;

  448.   margin-bottom: 10px;

  449.   padding: 20px;

  450.   box-shadow: 1px 1px 10px #ddd;

  451.   margin-left: auto;

  452.   margin-right: auto;

  453. }

  454. 

  455. .event-select-time a.select-time:hover {

  456.   text-decoration: none;

  457.   background-color: #f9f9f9;  

  458. }

  459. 

  460. 

  461. 

  462. .confirm-schedule-appt-type,

  463. .confirm-schedule-appt-datetime

  464.  {

  465.   font-size: 1.1em;

  466.   padding-bottom: 10px;

  467. }

  468. 

  469. 

  470. 

  471. .appointment-summary-view {

  472.   font-size: 1.1em;

  473.   display: block;

  474.   width: 500px;

  475.   margin-top: 30px;

  476.   margin-left: auto;

  477.   margin-right: auto;

  478.   border: 1px solid #ccc;

  479.   padding: 30px;

  480. }

  481. 

  482. 

  483. 

  484. 

  485. 

  486. 

  487. 

  488. 

  489. ___appointment_settings{}

  490. 

  491. table.schedule-event-types {

  492.   width: 90%;

  493. }

  494. 

  495. table.schedule-event-types th {

  496.   

  497. }

  498. 

  499. table.schedule-event-types td,

  500. table.schedule-event-types th

  501.  {

  502.   padding: 10px 20px 10px 20px;

  503. }

  504. 

  505. table td.actions {

  506.   width: 70px;

  507. }

  508. 

  509. 

  510. ___forms{}

  511. 

  512. .calendar-faculty_id {

  513.   font-size: 1.2em;

  514. }

  515. .calendar-faculty_id label {

  516.   display: inline-block;

  517.   margin-right: 20px; 

  518. }

  519. 

  520. 

  521. 

  522. ___unavailable_times_content{}

  523. 

  524. #element-wrapper-days .checkbox-element {

  525.   display: inline-block;

  526.   margin-right: 20px;

  527. }

  528. 

  529. 

  530. 

  531.