style.css 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. :root {
  2. --w-70: 70%;
  3. --primary-color: #1c4587;
  4. --bg-grey: #EDEEF1;
  5. }
  6. /* login css */
  7. .login-container {
  8. background-color: var(--bg-grey);
  9. }
  10. .login-header {
  11. font-size: 30px;
  12. font-weight: 100;
  13. }
  14. .login-form {
  15. padding: 50px;
  16. }
  17. .login-form label {
  18. font-size: 14px;
  19. color: #454859;
  20. }
  21. .login-form .form-control {
  22. height: calc(1.5em + 0.75rem + 0.3px);;
  23. }
  24. .bg-holder {
  25. background-image: url(/login-rhs.jpg);
  26. background-size: cover;
  27. }
  28. .login-container .logo {
  29. font-size: 35px;
  30. font-weight: 800;
  31. color: rgb(13, 89, 175);
  32. }
  33. .login-container small {
  34. font-size: 12px;
  35. color: #999;
  36. }
  37. /* end of login */
  38. .w-70 {
  39. width: var(--w-70);
  40. }
  41. .stag-primary-bg {
  42. background-color: var(--primary-color) !important;
  43. color: #fff;
  44. }
  45. .stag-primary-border {
  46. border-color: var(--primary-color) !important;
  47. }
  48. .navbar-brand {
  49. font-size: 25px;
  50. font-weight: 900;
  51. }
  52. .nav-item {
  53. margin-right: 10px;
  54. }
  55. .sidebar .nav-link {
  56. padding: .25rem 1rem;
  57. }
  58. .sidebar .nav-item {
  59. margin-right: 0;
  60. }
  61. .navbar-dark .nav-item .nav-link {
  62. color: #fff;
  63. }
  64. .dropdown-menu {
  65. margin-top: 7px;
  66. border-radius: 0;
  67. }
  68. .dropdown-item:not(:last-child) {
  69. border-bottom:1px solid #ddd;
  70. }
  71. main {
  72. padding:0 1rem;
  73. }
  74. /* ability to toggle the video pane (rhs) */
  75. .stag_rhs_toggle, .stag_rhs_toggle:hover {
  76. position: fixed;
  77. bottom: 0;
  78. right: 0;
  79. padding: 0.25rem 0.75rem;
  80. border-top-left-radius: 6px;
  81. background-color: var(--primary-color);
  82. color: #fff;
  83. z-index: 2;
  84. }
  85. body.stag_rhs_collapsed .v-split,
  86. body.stag_rhs_collapsed .app-right-panel {
  87. display: none !important;
  88. }
  89. .delete-column {
  90. width: 60px;
  91. }
  92. .m-negator {
  93. margin-left: -1.25rem !important;
  94. margin-right: -1.25rem !important;
  95. }
  96. .pl-3-5 {
  97. padding-left: 1.25rem !important;
  98. }
  99. .lh-24px {
  100. height: 24px;
  101. line-height: 24px;
  102. }
  103. .mcp-theme-1 *:not(i) {
  104. font-family: Verdana, sans-serif;
  105. font-size: 13px;
  106. }
  107. .mcp-theme-1 .font-size-11 {
  108. font-size: 11px;
  109. }
  110. .mcp-theme-1 .font-size-13 {
  111. font-size: 13px;
  112. }
  113. .mcp-theme-1 .font-underline {
  114. text-decoration: underline;
  115. }
  116. .mcp-theme-1 .on-hover-opaque {
  117. opacity: 0.6;
  118. }
  119. .mcp-theme-1 .on-hover-opaque:hover {
  120. opacity: 1;
  121. }
  122. .mcp-theme-1 a, .mcp-theme-1 a:link {
  123. color: rgb(13, 89, 175);
  124. }
  125. .mcp-theme-1 .btn.btn-primary {
  126. background: rgb(13, 89, 175);
  127. border-color: rgb(13, 89, 175);
  128. box-shadow: none;
  129. }
  130. .mcp-theme
  131. .mcp-theme-1 .nav-item {
  132. margin: 0;
  133. }
  134. .mcp-theme-1 .nav-link:hover {
  135. background: #e3e3e394;
  136. }
  137. .mcp-theme-1 .text-sm {
  138. font-size: 85%;
  139. }
  140. .mcp-theme-1 .text-sm-incl-children,
  141. .mcp-theme-1 .text-sm-incl-children *:not(i) {
  142. font-size: 0.8rem;
  143. }
  144. .mcp-theme-1 .minutes-label {
  145. width: 40px;
  146. }
  147. .mcp-theme-1 .memo-textarea {
  148. min-width: 200px;
  149. height: 60px;
  150. }
  151. .main-row {
  152. display: flex;
  153. flex-wrap: nowrap;
  154. margin-right: -15px;
  155. margin-left: -15px;
  156. }
  157. .main-row > .sidebar {
  158. width: 180px;
  159. min-width: 180px;
  160. }
  161. .main-row > main {
  162. flex-grow: 1;
  163. }
  164. html, body {
  165. height: 100%;
  166. }
  167. body>nav.navbar {
  168. height: 55px;
  169. }
  170. .stag-content {
  171. height: calc(100% - 55px);
  172. }
  173. [moe][large] form {
  174. width: 450px;
  175. }
  176. .moe-disabled[moe] {
  177. cursor: not-allowed;
  178. }
  179. .moe-disabled[moe] [start][show] {
  180. opacity: 0.5;
  181. pointer-events: none;
  182. }
  183. .mcp-theme-1 .stag-no-wrap-td {
  184. max-width: 260px;
  185. }
  186. .mcp-theme-1 .stag-no-wrap {
  187. max-width: 250px;
  188. overflow: hidden;
  189. text-overflow: ellipsis;
  190. white-space: nowrap;
  191. display: block;
  192. }
  193. .mcp-theme-1 .form-control.form-control-sm {
  194. min-width: 200px;
  195. }
  196. .mcp-theme-1 [large] .form-control.form-control-sm {
  197. min-width: unset;
  198. }
  199. [wide] .form-control.form-control-sm {
  200. min-width: 350px;
  201. }
  202. .mcp-theme-1 .min-width-200px {
  203. min-width: 200px;
  204. }
  205. .mcp-theme-1 .width-100px {
  206. width: 100px;
  207. min-width: unset !important;
  208. max-width: unset !important;
  209. }
  210. .mcp-theme-1 .max-width-300px {
  211. max-width: 300px;
  212. }
  213. .cancelled-item {
  214. opacity: 0.5;
  215. }
  216. .cancelled-item:not(.always-clickable) * {
  217. pointer-events: none;
  218. }
  219. .note-content {
  220. max-height: 300px;
  221. overflow-y: auto;
  222. }
  223. .note-content:not([auto-edit]) {
  224. padding: 1rem;
  225. padding-bottom: 0;
  226. cursor: pointer;
  227. position: relative;
  228. }
  229. .note-content:not(.cancelled):not([auto-edit]):not(.readonly):before {
  230. content: '(click to change)';
  231. display: block;
  232. color: #535353;
  233. padding-bottom: 0.3rem;
  234. }
  235. .mcp-theme-1 .ql-container, .mcp-theme-1 .ql-toolbar {
  236. border-left: 0;
  237. border-right: 0;
  238. }
  239. .mcp-theme-1 .ql-editor[contenteditable] {
  240. min-height: 100px;
  241. }
  242. .ql-container p {
  243. margin-top: 1rem;
  244. }
  245. .note-content ul {
  246. list-style: none !important;
  247. }
  248. .ql-editor ul > li::before {
  249. content: '';
  250. }
  251. .m-neg-4 {
  252. margin-left: -1.25rem;
  253. margin-right: -1.25rem;
  254. }
  255. .mcp-theme-1 .ql-toolbar .ql-formats * {
  256. font-size: 12px !important;
  257. }
  258. .mcp-theme-1 .ql-toolbar.ql-snow {
  259. padding: 3px;
  260. background: #f7f7f7;
  261. }
  262. .mcp-theme-1 .ql-snow .ql-picker {
  263. height: 22px;
  264. }
  265. .mcp-theme-1 .ql-snow.ql-toolbar button {
  266. height: 22px;
  267. width: 26px;
  268. }
  269. .rte-holder .ql-container p {
  270. margin-top: 0;
  271. margin-bottom: 1rem;
  272. }
  273. .note-section:not(.edit) .if-not-edit {
  274. display: block !important;
  275. }
  276. .note-section:not(.edit) div.if-not-edit {
  277. padding-left: 1rem;
  278. }
  279. .note-section.edit .if-edit {
  280. display: block !important;
  281. }
  282. .c-pointer {
  283. cursor: pointer;
  284. }
  285. .inset-comment p:last-child {
  286. margin-bottom: 0 !important;
  287. }
  288. .note-section.edit {
  289. background: #f0f8ff7d;
  290. outline: 2px solid #9de3ff;
  291. }
  292. .note-section.edit .ql-editor,
  293. .note-section.edit .btn-default {
  294. background-color: #fff !important;
  295. }
  296. /*.note-section-item-row:not(:first-child) {
  297. padding-top: 10px;
  298. border-top: 1px solid #ccc;
  299. }*/
  300. /* override med ac css */
  301. #searchResults {
  302. z-index: 100001 !important;
  303. }
  304. input.search_field, textarea.search_field {
  305. background-position: right 7px center !important;
  306. padding-right: 23px !important;
  307. }
  308. .ansList:focus, .search_field:focus {
  309. background-color: #fff !important;
  310. }
  311. @media (min-width: 1000px) {
  312. .navbar.navbar-dark {
  313. height: 55px;
  314. position: fixed;
  315. top: 0;
  316. left: 0;
  317. width: 100%;
  318. z-index: 9999;
  319. }
  320. .main-row > .sidebar {
  321. width: 180px;
  322. min-width: 180px;
  323. position: fixed;
  324. left: 0;
  325. top: 55px;
  326. z-index: 9999;
  327. height: calc(100% - 55px);
  328. overflow-y: auto;
  329. }
  330. .main-row {
  331. padding-left: 180px;
  332. }
  333. .navbar.navbar-dark+[role="main"] {
  334. padding-top: 55px;
  335. }
  336. }
  337. .font-smaller {
  338. font-size: 11px !important;
  339. }
  340. .text-ellipsis {
  341. white-space: nowrap;
  342. overflow: hidden;
  343. text-overflow: ellipsis;
  344. }
  345. .outline-0 {
  346. outline: none !important;
  347. }
  348. .note-widget-item:hover {
  349. background: #eee;
  350. }
  351. .note-widget-title {
  352. background: #ccc !important;
  353. color: #333 !important;
  354. font-size: 12px !important;
  355. font-weight: bold !important;
  356. }