widget.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. .clockContainer .daydate{
  2. font-size: 10px;
  3. }
  4. .clockContainer{
  5. background-color:#343a40;
  6. width:100%;
  7. height:100%;
  8. min-height: 263px;
  9. box-sizing:border-box;
  10. text-align:center;
  11. padding:20px;
  12. }
  13. .clock {
  14. height: 200px;
  15. width: 200px;
  16. margin: 30px auto auto auto;
  17. position:relative;
  18. background-color:#343a40;
  19. }
  20. .progress > svg {
  21. height: 100%;
  22. display: block;
  23. }
  24. .progressbar-text{
  25. position:absolute;
  26. left:0px;
  27. top:60px;
  28. width:100%;
  29. text-align:center;
  30. font-weight:200;
  31. color:#ffffff!important;
  32. }
  33. .progressbar-text .dayName,.progressbar-text .dayDate{
  34. font-size:15px;
  35. color:#cecece;
  36. margin: 10px 0;
  37. font-weight:400;
  38. }
  39. .progressbar-text .dayName{
  40. font-weight:bold;
  41. color:#ffffff;
  42. margin-top: 0px ;
  43. }
  44. /* profile widget */
  45. .profileContainer{
  46. padding-bottom: 10px;
  47. height:100%;
  48. position: relative;
  49. text-align: center;
  50. }
  51. .profileContainer .profile-buttons{
  52. position: absolute;
  53. bottom: 10px;
  54. width: 100%;
  55. }
  56. .profileContainer .profile-buttons a.btn{
  57. font-weight: bold;
  58. color:#666666;
  59. font-size: 12px;
  60. padding: 0 .5rem;
  61. transition: color 0.2s ease-in-out;
  62. }
  63. .profileContainer .profile-buttons a.btn:hover{
  64. color: #007bff;
  65. }
  66. .profileContainer .profileHeader{
  67. background-color: #007bff;
  68. /*background-image: url('../img/default-background.jpg');*/
  69. border-bottom:5px solid rgba(255, 255, 255,0.5);
  70. height:100px;
  71. width:100%;
  72. background-size: cover;
  73. background-image: none;
  74. }
  75. .profileContainer .profileImage{
  76. margin-top: -60px;
  77. display: block;
  78. text-align: center;
  79. }
  80. .profileContainer .profileImage > a {
  81. border-radius: 120px;
  82. position: relative;
  83. display: inline-block;
  84. }
  85. .profileContainer .profileImage .edit-overlay {
  86. opacity: 0;
  87. position: absolute;
  88. top: 0;
  89. transition: all 0.1s ease-in-out;
  90. }
  91. .profileContainer .profileImage .edit-overlay:after {
  92. content: "\f044";
  93. font-family: "Font Awesome 5 Free";
  94. font-weight: 400;
  95. position: absolute;
  96. top: 50%;
  97. left: 50%;
  98. font-size: 2em;
  99. color: grey;
  100. transform: translateX(-40%) translateY(-50%);
  101. }
  102. .profileContainer .profileImage > a:hover .edit-overlay {
  103. opacity: 0.85;
  104. background: #dedede;
  105. }
  106. .profileContainer .profileImage .edit-overlay,
  107. .profileContainer .profileImage img {
  108. border-radius: 120px;
  109. height: 120px;
  110. width: 120px;
  111. border: 4px solid #ffffff;
  112. }
  113. .profileContainer .profileImage img {
  114. /*width: auto;*/
  115. }
  116. .profileContainer h3{
  117. text-align: center;
  118. margin-bottom: 0px;
  119. font-size: 20px;
  120. margin-top: 6px;
  121. }
  122. .profileContainer small,
  123. .profileContainer small *{
  124. text-align: center;
  125. font-size: 15px;
  126. font-style: italic;
  127. color:#cecece;
  128. }
  129. .profileToken{
  130. display: block;
  131. }
  132. .profileToken input{
  133. padding: 2px 4px;
  134. font-size: 90%;
  135. color: #c7254e;
  136. background-color: #f9f2f4;
  137. border-radius: 4px;
  138. border:none;
  139. text-align: center;
  140. }
  141. .widgetHtmlContainer h4.noContent{
  142. text-align: center;
  143. margin-top: 120px;
  144. color:#cecece;
  145. }