dark.css 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482
  1. /*
  2. Theme Name: Dark
  3. Author: Kristan Kenney (@kristankenney)
  4. Website: www.hestiacp.com
  5. */
  6. body {
  7. background-color: #282828;
  8. }
  9. b,
  10. strong {
  11. color: #cacaca;
  12. }
  13. button,
  14. select {
  15. text-shadow: 0 0 0 #d4d4d4 !important;
  16. }
  17. body {
  18. color: #cdcdcd;
  19. }
  20. .body-login, .body-reset {
  21. background: #303030 !important;
  22. background: radial-gradient(circle, rgba(77,77,77,1) 0%, rgba(31,31,31,1) 100%) !important;
  23. }
  24. a {
  25. color: #cdcdcd;
  26. }
  27. .disabled {
  28. }
  29. .l-header {
  30. background: #454545;
  31. border-bottom: 1px solid #505050;
  32. text-shadow: 1px 1px rgba(0,0,0,0.5);
  33. box-shadow: 0px 8px 15px rgba(0,0,0,0.25);
  34. }
  35. .l-menu__item.l-menu__item--active a {
  36. color: #dadada;
  37. background: linear-gradient(to bottom, rgba(15,15,15,0.6) 0%,rgba(45,45,45,0.75) 30%,rgba(60,60,60,1) 95%);
  38. text-shadow: 0px 1px rgba(0,0,0,0.5);
  39. border-left-color: #353535;
  40. border-right-color: #353535;
  41. }
  42. .l-menu__item a {
  43. color: #e7e7e7;
  44. }
  45. .l-menu__item a:hover {
  46. color: #dadada !important;
  47. text-shadow: 1px 1px rgba(0,0,0,0.5) !important;
  48. background: linear-gradient(to bottom, rgba(15,15,15,0.6) 0%,rgba(45,45,45,0.75) 30%,rgba(60,60,60,1) 95%) !important;
  49. box-shadow: none !important;
  50. }
  51. .l-menu__item a:active {
  52. background: linear-gradient(to bottom, rgba(15,15,15,0.7) 0%,rgba(45,45,45,0.85) 30%,rgba(50,50,50,1) 95%) !important;
  53. color: #fff !important;
  54. text-shadow: 0px -1px 1px rgba(0,0,0,0.5) !important;
  55. }
  56. .l-menu__item.l-menu__item--active:hover {
  57. background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.15) 30%,rgba(255,255,255,0.15) 95%) !important;
  58. }
  59. .lang-ar .l-menu__item a {
  60. padding: 11px 11px;
  61. }
  62. .lang-ar .l-menu__item a {
  63. line-height: 35px;
  64. }
  65. .lang-de .l-menu__item a {
  66. padding: 11px 12px;
  67. }
  68. .lang-tw .l-menu__item a {
  69. padding: 13px 18px;
  70. }
  71. .l-profile {
  72. overflow: hidden;
  73. float: right;
  74. }
  75. .l-profile__logout {
  76. color: #e7e7e7 !important;
  77. }
  78. .l-profile__server {
  79. color: #ceefff;
  80. margin-top: 10px;
  81. float: left;
  82. }
  83. .l-profile__notifications {
  84. color: #fff;
  85. cursor: pointer;
  86. font-weight: 600;
  87. padding: 10px 5px 0;
  88. font-size: 1.2rem !important;
  89. line-height: 0.95rem;
  90. border-left: 1px solid transparent !important;
  91. border-right: 1px solid transparent !important;
  92. }
  93. .l-profile__notifications.active.l-profile__notifications.updates:active {
  94. background: linear-gradient(to bottom, rgba(15,15,15,0.6) 0%,rgba(45,45,45,0.75) 30%,rgba(60,60,60,1) 95%) !important;
  95. color: #046c98 !important;
  96. text-shadow: 0px -1px 1px rgba(0,0,0,0.5) !important;
  97. box-shadow: none !important;
  98. transition: 0.2s;
  99. border-left: 1px solid transparent !important;
  100. border-right: 1px solid transparent !important;
  101. }
  102. .l-profile__notifications:hover,.l-profile__notifications.updates:hover {
  103. text-shadow: 1px 1px rgba(0,0,0,0.5) !important;
  104. background: linear-gradient(to bottom, rgba(15,15,15,0.6) 0%,rgba(45,45,45,0.75) 30%,rgba(60,60,60,1) 95%) !important;
  105. border: none !important;
  106. border-left: 1px solid transparent !important;
  107. border-right: 1px solid transparent !important;
  108. box-shadow: none !important;
  109. }
  110. .notification-container {
  111. background-color: rgba(50,50,50,0.99);
  112. text-shadow: 0px 1px rgba(0,0,0,0.5);
  113. color: #dadada;
  114. border: 1px solid #404040;
  115. }
  116. .notification-container .empty .status-icon {
  117. color: #dadada;
  118. }
  119. .notification-container .unseen {
  120. color: #dadada;
  121. }
  122. .notification-container li {
  123. border-bottom: 1px solid #282828;
  124. }
  125. .notification-container .mark-seen {
  126. background-color: #ff3478;
  127. }
  128. .notification-container .unseen .title a,
  129. .notification-container .unseen .title {
  130. color: #fff !important;
  131. }
  132. .notification-container a {
  133. color: #4fabe9;
  134. }
  135. .notification-container a:hover {
  136. color: #0099ff;
  137. }
  138. .notification-container a:active {
  139. color: #0079cb;
  140. }
  141. .alert {
  142. border: 1px solid #212121;
  143. }
  144. .alert.alert-danger {
  145. background-color: #d13535;
  146. }
  147. .alert.alert-danger i.fas {
  148. color: #d13535;
  149. }
  150. .alert.alert-success {
  151. }
  152. .alert.alert-success i.fas {
  153. }
  154. .card {
  155. float: left;
  156. background: #454545;
  157. color: #fafafa;
  158. text-shadow: 0px 1px rgba(0,0,0,0.95) !important;
  159. border: 1px solid #606060;
  160. box-shadow: 0px 1px 4px rgba(0,0,0,0.2),
  161. inset 0px 0px 60px rgba(0,0,0,0.25);
  162. }
  163. .card.disable {
  164. }
  165. .card.disable .card-thumb {
  166. }
  167. .card .card-details {
  168. }
  169. .card .card-details p {
  170. color: #bdbdbd;
  171. }
  172. .card p.card-title {
  173. color: #fafafa;
  174. }
  175. .card .card-thumb {
  176. }
  177. .card .card-thumb img {
  178. }
  179. .card button {
  180. }
  181. .l-stat {
  182. background-color: #282828;
  183. }
  184. .l-stat__col {
  185. }
  186. .l-stat__col a {
  187. border-bottom: 4px solid #282828;
  188. background-color: #282828;
  189. }
  190. .l-stat__col a:hover {
  191. border-bottom: 4px solid #d7d7d7;
  192. }
  193. .l-stat__col a:active, .l-stat__col a:focus {
  194. border-bottom: 4px solid #d11755;
  195. }
  196. .l-stat__col--active a {
  197. border-bottom: 4px solid #e93b76;
  198. }
  199. .l-stat.active .l-stat__col.focus a {
  200. border-bottom: 4px solid #e93b76;
  201. }
  202. .l-stat.active .l-stat__col.focus a .l-stat__col-title {
  203. }
  204. .l-stat__col a:hover .l-stat__col-title {
  205. color: #d7d7d7;
  206. }
  207. .l-stat__col a:active .l-stat__col-title {
  208. }
  209. .l-stat__col-title {
  210. font-weight: 500;
  211. color: #bcbcbc;
  212. text-shadow: 0px 1px rgba(0,0,0,0.4);
  213. }
  214. .l-stat__col--active .l-stat__col-title {
  215. color: #ff558f;
  216. }
  217. .l-stat__col .fas {
  218. color: #707070;
  219. padding: 4px;
  220. }
  221. .l-stat__col--active .fas {
  222. color: #aaaaaa;
  223. }
  224. .l-separator.selected,
  225. .l-separator {
  226. border-top: 1px solid #454545;
  227. }
  228. div.l-content > div.l-separator:nth-of-type(2) {
  229. }
  230. div.l-content > div.l-separator:nth-of-type(4) {
  231. border-bottom: 1px solid #454545;
  232. background-color: #282828;
  233. box-shadow: 0px 4px 6px rgba(0,0,0,0.25) !important;
  234. }
  235. .l-sort {
  236. background-color: #282828;
  237. }
  238. .context-menu.sort-order {
  239. background-color: rgba(40,40,40,0.95);
  240. box-shadow: 0 2px 16px 0 rgba(20, 20, 20, 0.65);
  241. border-radius: 4px;
  242. border: 1px solid rgba(90,90,90,1);
  243. }
  244. .context-menu li {
  245. border-bottom: 1px solid #454545;
  246. color: #dadada;
  247. }
  248. .context-menu.sort-order span.active {
  249. background-color: #454545 !important;
  250. color: #fff;
  251. background: linear-gradient(to bottom, rgba(15,15,15,0.6) 0%,rgba(45,45,45,0.75) 30%,rgba(60,60,60,1) 95%);
  252. text-shadow: 0px 1px rgba(0,0,0,0.8);
  253. }
  254. .context-menu.sort-order span:hover {
  255. color: #fff;
  256. background: linear-gradient(to bottom, rgba(25,25,25,0.6) 0%,rgba(55,55,55,0.75) 30%,rgba(70,70,70,1) 95%);
  257. text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
  258. box-shadow: inset 0px 0px 1px rgba(0,0,0,0.4),
  259. inset -1px -1px 4px rgba(40,40,40,0.4);
  260. }
  261. .context-menu.sort-order span:active,.context-menu.sort-order span:focus {
  262. background: linear-gradient(to bottom, rgba(35,35,35,0.6) 0%,rgba(65,65,65,0.75) 30%,rgba(80,80,80,1) 95%);
  263. color: #fff;
  264. text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
  265. box-shadow: inset 0px 0px 1px rgba(0,0,0,0.4),
  266. inset -1px -1px 4px rgba(40,40,40,0.4);
  267. }
  268. .l-sort-toolbar .sort-by:hover {
  269. color: #d4d4d4;
  270. }
  271. .l-sort-toolbar .sort-by:hover b {
  272. color: #d4d4d4;
  273. }
  274. .l-sort-toolbar .toggle-all:hover {
  275. color: #d4d4d4;
  276. }
  277. .l-sort-toolbar__filter-apply {
  278. border: 1px solid #454545;
  279. background-color: #424242;
  280. text-shadow: 1px 1px rgba(0,0,0,0.9) !important;
  281. box-shadow: 0px 1px 1px rgba(0,0,0,0.4) !important;
  282. color: #cacaca;
  283. font-size: 1em;
  284. }
  285. .l-sort-toolbar__filter-apply:hover {
  286. color: #0099ff;
  287. background-color: #454545;
  288. }
  289. .l-sort-toolbar__filter-apply:active {
  290. color: #0074c2;
  291. text-shadow: 0px -1px rgba(255,255,255,0.2);
  292. box-shadow: inset 1px 1px 0px rgba(0,0,0,0.2);
  293. }
  294. .l-sort-toolbar .vst {
  295. color: #dadada;
  296. }
  297. .l-sort-toolbar .vst:hover {
  298. color: #ff3478;
  299. }
  300. .l-sort-toolbar .vst:active {
  301. }
  302. .l-sort-toolbar .vst.selected {
  303. color: #ff3478;
  304. }
  305. .l-unit-toolbar__buttonstrip {
  306. }
  307. .l-unit-toolbar__buttonstrip a {
  308. }
  309. .l-unit-toolbar__buttonstrip .fas {
  310. }
  311. .subtitle {
  312. color: #ff3478;
  313. }
  314. .l-select {
  315. border: 1px solid #454545;
  316. box-shadow: 0px 1px 1px rgba(0,0,0,0.4) !important;
  317. }
  318. .l-select:after {
  319. }
  320. .l-select select {
  321. background-color: #212121;
  322. box-shadow: 0px 1px 1px rgba(0,0,0,0.4) !important;
  323. }
  324. .l-select select:focus {
  325. }
  326. .lang-ru .l-select select {
  327. }
  328. .l-select select option {
  329. }
  330. .l-sort-toolbar .l-select {
  331. border: 1px solid #454545;
  332. background-color: #454545;
  333. text-shadow: 0px 1px rgba(0,0,0,0.65);
  334. text-shadow: 1px 1px rgba(0,0,0,0.9);
  335. }
  336. .l-unit {
  337. color: #dadada;
  338. }
  339. .table-header {
  340. background: #404040 !important;
  341. border-left: 1px solid #212121 !important;
  342. border-right: 1px solid #212121 !important;
  343. border-bottom: 1px solid #212121 !important;
  344. border-top: 1px solid #454545 !important;
  345. text-shadow: 0px 1px rgba(0,0,0,0.95);
  346. border-bottom-left-radius: 0px !important;
  347. border-bottom-right-radius: 0px !important;
  348. color: #dadada;
  349. box-shadow: inset 0px 1px 1px rgba(0,0,0,0.3) !important;
  350. }
  351. .table-header:hover {
  352. background-color: #404040 !important;
  353. border-left: 1px solid #212121 !important;
  354. border-right: 1px solid #212121 !important;
  355. box-shadow: inset 0px 1px 1px rgba(0,0,0,0.3) !important;
  356. }
  357. .table-header .fas {
  358. }
  359. .units .l-unit {
  360. background-color: #303030;
  361. border-bottom: 1px solid #282828;
  362. border-left: 1px solid #212121;
  363. border-right: 1px solid #212121;
  364. }
  365. .l-unit:hover, .units .l-unit:hover {
  366. box-shadow: 0px 2px 10px rgba(20,20,20,0.20);
  367. background-color: #353535;
  368. text-shadow: 0px 1px rgba(0,0,0,0.5);
  369. border-left: 1px solid #212121;
  370. border-right: 1px solid #212121;
  371. }
  372. .units .l-unit.l-unit--starred {
  373. border-left: 2px solid #ff3478;
  374. }
  375. .units.active .l-unit.focus {
  376. background-color: #353535;
  377. }
  378. .units.active .l-unit.focus .l-unit__name {
  379. }
  380. .units.active .l-unit.focus .l-unit-toolbar__col--right {
  381. }
  382. .units > div:last-child {
  383. }
  384. .l-unit-ft {
  385. color: #cdcdcd;
  386. }
  387. .l-unit:hover .l-unit-toolbar__col--right {
  388. }
  389. .l-unit--blue {
  390. }
  391. .l-unit--suspended {
  392. background: #252525 !important;
  393. color: #606060 !important;
  394. text-shadow: 0px -1px rgba(0,0,0,0.4) !important;
  395. box-shadow: inset 0px 0px 2px rgba(0,0,0,0.2);
  396. }
  397. .l-unit--suspended a {
  398. color: #606060 !important;
  399. text-shadow: 0px -1px rgba(0,0,0,0.4) !important;
  400. }
  401. .units .l-unit.l-unit--outdated {
  402. color: #d4d4d4;
  403. }
  404. .l-unit--suspended .l-unit__name,
  405. .l-unit--suspended b,
  406. .l-unit--outdated .l-unit__name,
  407. .l-unit--outdated b {
  408. color: #606060;
  409. }
  410. .l-unit--outdated .l-unit__name {
  411. }
  412. .l-unit--outdated b {
  413. color: #d4d4d4;
  414. }
  415. .l-unit--suspended .l-percent {
  416. }
  417. .l-unit--suspended .l-percent__fill {
  418. }
  419. .l-unit--suspended .l-unit__name,
  420. .l-unit--suspended .l-unit__name span {
  421. }
  422. .l-unit--suspended.selected .l-unit__name,
  423. .l-unit--suspended.selected .l-unit__name span {
  424. color: #707070;
  425. }
  426. .l-unit--suspended.selected {
  427. background-color: #454545 !important;
  428. color: #707070 !important;
  429. }
  430. .l-unit-ft .subtitle,
  431. .l-unit .subtitle {
  432. color: #ff3478;
  433. }
  434. .l-unit__name {
  435. color: #dadada;
  436. }
  437. .l-unit__stats:hover {
  438. background: transparent !important;
  439. }
  440. .l-unit__stat-col--left a, .l-unit__stat-col--left a:visited {
  441. color: #fafafa;
  442. }
  443. .l-unit__stat-col--left a:hover {
  444. color: #fff;
  445. }
  446. .title b,
  447. .title {
  448. color: #ff3478;
  449. }
  450. .title {
  451. }
  452. /* form styles */
  453. .vst-error {
  454. color: #ff3333;
  455. }
  456. .vst-ok {
  457. color: #53ba55;
  458. }
  459. .vst-ok a {
  460. color: #ffffff;
  461. }
  462. .vst-ok a:hover {
  463. color: #ff3478;
  464. }
  465. .vst-ok a:active {
  466. }
  467. .login-box td,
  468. .data td {
  469. color: #d4d4d4;
  470. }
  471. .data input[type="checkbox"] {
  472. }
  473. .data a {
  474. }
  475. label {
  476. }
  477. label:hover {
  478. color: #d4d4d4 !important;
  479. }
  480. .vst-input {
  481. background-color: #454545;
  482. border: 1px solid #606060;
  483. color: #d4d4d4;
  484. box-shadow: 0px 1px 4px rgba(0,0,0,0.35);
  485. }
  486. .vst-input:hover {
  487. border-color: #0090ff;
  488. background-color: #494949;
  489. }
  490. .vst-input:focus {
  491. background-color: #222222;
  492. border-color: #0080df;
  493. color: #fff;
  494. box-shadow: 0px 1px 6px rgba(0,52,91,0.75);
  495. }
  496. .vst-input:disabled,
  497. .vst-list:disabled {
  498. background-color: #303030;
  499. text-shadow: 1px 1px rgba(0,0,0,0.3);
  500. color: #acacac;
  501. border-color: #606060;
  502. }
  503. .vst-input:focus:disabled {
  504. }
  505. .vst-input:disabled:hover,
  506. .vst-list:disabled:hover {
  507. border-color: #606060 !important;
  508. }
  509. .vst-input.long {
  510. }
  511. .vst-input.short {
  512. }
  513. .vst-input.vst-list-editor {
  514. }
  515. .vst-input.vst-list-editor:focus {
  516. background-color: #222222;
  517. box-shadow: none !important;
  518. }
  519. .vst-list {
  520. background-color: #454545;
  521. border: 1px solid #606060;
  522. color: #d4d4d4;
  523. text-shadow: 0 0 0 #d4d4d4;
  524. box-shadow: 0px 1px 4px rgba(0,0,0,0.35);
  525. }
  526. select.vst-list:-moz-focusring {
  527. }
  528. .vst-list.long-2 {
  529. }
  530. .vst-list option {
  531. }
  532. .vst-list:hover {
  533. border-color: #0090ff;
  534. background-color: #494949;
  535. }
  536. .vst-list:focus {
  537. background-color: #222222;
  538. border-color: #0080df;
  539. color: #fff;
  540. box-shadow: 0px 1px 6px rgba(0,52,91,0.75);
  541. }
  542. .vst-list.flat {
  543. border: 1px solid #454545;
  544. color: #fff;
  545. }
  546. .vst-list.flat:hover {
  547. color: #ff3478;
  548. }
  549. .vst-list.flat option {
  550. color: #d4d4d4;
  551. }
  552. a.vst-text,
  553. a.vst-text b{
  554. color: #fff;
  555. }
  556. a.vst-text:hover,
  557. a.vst-text:hover b{
  558. color: #ff3478;
  559. }
  560. a.vst-text:active,
  561. a.vst-text:active b{
  562. color: #ff3478;
  563. }
  564. .advanced-options {
  565. background: #454545 !important;
  566. border: 1px solid #505050 !important;
  567. text-shadow: 0px 1px rgba(0,0,0,0.4);
  568. box-shadow: inset 0px 0px 2px rgba(0,0,0,0.5),
  569. 0px 2px 6px rgba(0,0,0,0.4) !important;
  570. color: #fff !important;
  571. padding: 4px 0px 0px 18px;
  572. overflow: hidden;
  573. height: 28px;
  574. }
  575. .advanced-options a {
  576. color: #fff !important;
  577. }
  578. .advanced-options .fas {
  579. }
  580. .vst-textinput {
  581. background-color: #454545;
  582. border: 1px solid #606060;
  583. color: #d4d4d4;
  584. box-shadow: 0px 1px 4px rgba(0,0,0,0.35);
  585. }
  586. .vst-textinput:hover {
  587. border: 1px solid #0090ff;
  588. background-color: #494949;
  589. }
  590. .vst-textinput:focus {
  591. background-color: #222222;
  592. border-color: #0080df;
  593. color: #fff !important;
  594. box-shadow: 0px 1px 6px rgba(0,52,91,0.75);
  595. }
  596. .vst-textinput:disabled {
  597. background-color: #454545;
  598. }
  599. .vst-textinput.console{
  600. }
  601. .vst-textinput.short {
  602. }
  603. #advanced-options .console{
  604. }
  605. .generate {
  606. color: #29a9ff;
  607. border-radius: 4px;
  608. }
  609. .generate:hover {
  610. background-color: #ff3478;
  611. border-color: #ff3478;
  612. }
  613. .generate:active {
  614. background-color: #be1f54;
  615. border-color: #be1f54;
  616. }
  617. .vst-advanced {
  618. border-bottom: 0px solid #326b9b;
  619. color: #0094f7;
  620. font-size: 0.8rem;
  621. padding: 4px 12px;
  622. text-decoration: none;
  623. border-radius: 4px;
  624. text-transform: none !important;
  625. }
  626. .login-box .vst-advanced:hover {
  627. color: #ff3478 !important;
  628. background-color: transparent;
  629. border-color: transparent;
  630. border: none !important;
  631. background: none !important;
  632. box-shadow: none !important;
  633. }
  634. .login-box .vst-advanced:active {
  635. color: #be1f54 !important;
  636. border: none !important;
  637. background: none !important;
  638. box-shadow: none !important;
  639. }
  640. .vst-advanced:hover {
  641. color: #fff;
  642. background-color: #ff3478;
  643. border-color: #ff3478;
  644. text-decoration: none;
  645. }
  646. .login-box .vst-advanced:active,
  647. .vst-advanced:active {
  648. color: #fff;
  649. background-color: #be1f54;
  650. border-color: #be1f54;
  651. text-decoration: none;
  652. }
  653. .login-box .vst-advanced {
  654. border-bottom: none;
  655. color: #326b9b;
  656. font-size: 0.85em !important;
  657. padding: 2px 2px 0;
  658. text-decoration: none;
  659. text-transform: uppercase;
  660. border: none !important;
  661. background: none !important;
  662. box-shadow: none !important;
  663. }
  664. .vst-checkbox {
  665. }
  666. .lets-encrypt-note {
  667. }
  668. .additional-control {
  669. color: #0099ff;
  670. }
  671. .additional-control:hover {
  672. background-color: #ff3478;
  673. border-color: #ff3478;
  674. }
  675. .additional-control:active {
  676. }
  677. .additional-control.ftp-remove-user {
  678. }
  679. .additional-control.delete:hover,
  680. .additional-control.ftp-remove-user:hover {
  681. }
  682. .additional-control.delete:active,
  683. .additional-control.ftp-remove-user:active {
  684. }
  685. .additional-control.add:hover {
  686. }
  687. .additional-control.add:active{
  688. }
  689. .additional-control.remove-ns {
  690. }
  691. .data .step-left {
  692. }
  693. .hide-password {
  694. }
  695. .toggle-psw-visibility-icon {
  696. }
  697. .show-passwords-enabled-action {
  698. }
  699. .ftp-path-value,
  700. .hint,
  701. td.hint {
  702. color: #a2a2a2;
  703. font-size: 0.8rem;
  704. }
  705. .ftp-path-prefix { padding-top: 12px; font-size: 0.8rem; color: #555; }
  706. .ui-dialog .ui-dialog-buttonpane button {
  707. box-shadow: 0px 1px 4px rgba(0,0,0,0.1),
  708. inset 0px 0px 1px #000,
  709. inset 0px 0px 3px rgba(0,0,0,0.5) !important;
  710. }
  711. .ui-button, .button, .ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit, .vst-advanced, .to-shortcuts, .to-top {
  712. font-size: 0.85rem !important;
  713. font-weight: 400 !important;
  714. color: #eeeeee !important;
  715. border: 1px solid #707070 !important;
  716. background: rgb(48,48,48) !important;
  717. background: linear-gradient(0deg, rgba(48,48,48,1) 0%, rgba(53,53,53,1) 35%, rgba(69,69,69,1) 100%) !important;
  718. box-shadow: 0px 1px 4px rgba(0,0,0,0.2),
  719. inset 0px 0px 1px rgba(20,20,20,1),
  720. inset 0px 0px 3px rgba(0,0,0, 0.5) !important;
  721. text-shadow: 0px 1px 1px rgba(0,0,0,0.35) !important;
  722. }
  723. .ui-button:hover, .button:hover, .ui-button.cancel:hover, .button.cancel:hover,
  724. .ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit:hover, .vst-advanced:hover, .to-shortcuts:hover, .to-top:hover {
  725. color: #fff !important;
  726. text-shadow: 1px 1px rgba(0,0,0,0.25) !important;
  727. border: 1px solid #0098ff !important;
  728. background: linear-gradient(0deg, rgba(58,58,58,1) 0%, rgba(68,68,68,1) 35%, rgba(79,79,79,1) 100%) !important;
  729. background-color: #454545;
  730. box-shadow: 0px 1px 3px rgba(0,0,0,0.35),
  731. inset 0px 0px 1px rgba(0,0,0,1),
  732. inset 0px 0px 3px rgba(0,0,0,0.65) !important;
  733. transition: 0.2s;
  734. }
  735. .ui-button:focus,.ui-button:active,
  736. .button:active,.button:focus,.ui-button.cancel:focus,.ui-button.cancel:active,
  737. .button.cancel:active,.button.cancel:focus,
  738. .ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit:active, .vst-advanced:active, .to-shortcuts:active, .to-top:active,
  739. .to-shortcuts:focus, .to-top:focus {
  740. border: 1px solid #0066b4 !important;
  741. background: linear-gradient(0deg, rgba(69,69,69,1) 0%, rgba(53,53,53,1) 35%, rgba(48,48,48,1) 100%) !important;
  742. color: #d4d4d4 !important;
  743. text-shadow: 0px -1px 1px rgba(0,0,0,0.55) !important;
  744. box-shadow: 0px 1px 3px rgba(0,0,0,0.3),
  745. inset 0px 0px 1px rgba(0,0,0,1),
  746. inset -1px -1px 4px rgba(30,30,30,0.4) !important;
  747. }
  748. .ui-button-text-only {
  749. text-shadow: 0px 1px rgba(0,0,0,0.5);
  750. }
  751. .ui-dialog .ui-dialog-buttonpane button span.ui-button-text {
  752. }
  753. .ui-dialog .ui-button:hover span {
  754. color: #fafafa !important;
  755. }
  756. .ui-button-text-only .selected {
  757. }
  758. .ui-button.cancel,
  759. .button.cancel {
  760. color: #eeeeee !important;
  761. border: 1px solid #454545 !important;
  762. background: rgb(48,48,48) !important;
  763. background: linear-gradient(0deg, rgba(48,48,48,1) 0%, rgba(53,53,53,1) 35%, rgba(69,69,69,1) 100%) !important;
  764. }
  765. .ui-button-text {
  766. color: #eeeeee !important;
  767. }
  768. .ui-button.cancel:active,
  769. .button.cancel:active {
  770. }
  771. a.button.cancel {
  772. }
  773. .ui-dialog button.cancel {
  774. border: 1px solid #d4d4d4;
  775. background-color: #d4d4d4;
  776. }
  777. .ui-button.danger:hover, .button.danger:hover {
  778. background: rgb(133,0,0);
  779. background: linear-gradient(0deg, rgba(133,0,0,1) 0%, rgba(203,0,0,1) 100%) !important;
  780. color: #fff !important;
  781. text-shadow: 0px 1px rgba(0,0,0,0.45) !important;
  782. border: 1px solid rgb(170, 0, 0) !important;
  783. }
  784. .ui-button.danger:active, .button.danger:active, .ui-button.danger:focus, .button.danger:focus {
  785. background: rgb(133,0,0);
  786. background: linear-gradient(180deg, rgba(133,0,0,1) 0%, rgba(203,0,0,1) 100%) !important;
  787. color: #4d0000 !important;
  788. text-shadow: 0px -1px 1px rgba(255,255,255,0.3) !important;
  789. border: 1px solid rgb(251, 71, 51) !important;
  790. }
  791. .ui-button span {
  792. }
  793. .ui-button:hover span {
  794. color: #d4d4d4 !important;
  795. }
  796. .ui-button:active span {
  797. color: #d4d4d4;
  798. }
  799. .ui-button.cancel span {
  800. }
  801. .ui-button:hover span {
  802. }
  803. .ui-button:active span {
  804. }
  805. .ui-dialog button.cancel span {
  806. color: #fff !important;
  807. }
  808. .unlim-trigger {
  809. }
  810. .optional {
  811. }
  812. .data-active b {
  813. }
  814. .data-suspended b {
  815. }
  816. .data-date {
  817. }
  818. .data-dotted {
  819. }
  820. .mail-infoblock-td {
  821. }
  822. .mail-infoblock {
  823. color: #fff;
  824. border: 1px solid #606060;
  825. margin-top: 87px;
  826. box-shadow: 0px 1px 4px rgba(0,0,0,0.35);
  827. background-color: #454545;
  828. }
  829. .mail-infoblock:hover {
  830. }
  831. .mail-infoblock td {
  832. color: #dadada;
  833. }
  834. .mail-infoblock td:first-child{
  835. }
  836. .mail-infoblock div {
  837. }
  838. .mail-infoblock a {
  839. color: #52b9ff;
  840. }
  841. .mail-infoblock a:hover {
  842. color: #ff3478;
  843. }
  844. .additional-info {
  845. }
  846. .additional-info td {
  847. }
  848. .additional-info td.details {
  849. }
  850. :focus {outline:none;}
  851. ::-moz-focus-inner {border:0;}
  852. .login {
  853. background-color: #282828;
  854. box-shadow: 0px 8px 25px rgba(0,0,0, 0.3), inset 0px 0px 2px rgba(0,0,0,0.25) !important;
  855. }
  856. .login-welcome {
  857. color: #fff !important;
  858. }
  859. .page-title {
  860. color: #dbdbdb !important;
  861. }
  862. .qr-code {
  863. border: 1px solid #3b3b3b;
  864. box-shadow: 0px 1px 4px rgba(0,0,0,0.35);
  865. }
  866. .password-option {
  867. }
  868. .login a.error {
  869. color: #f864fa;
  870. }
  871. .hestiacp {
  872. }
  873. .hestiacp:hover {
  874. }
  875. .hestiacp:active {
  876. color: #ff3478;
  877. }
  878. .login-bottom {
  879. }
  880. .l-unit.selected {
  881. background-color: #454545;
  882. color: #d4d4d4;
  883. box-shadow: 0px 2px 10px rgba(30,30,30,0.35);
  884. text-shadow: 0px 1px rgba(0,0,0,0.5);
  885. border-left: 1px solid #212121;
  886. border-right: 1px solid #212121;
  887. }
  888. .l-unit.selected:hover {
  889. background-color: #555555;
  890. color: #d4d4d4;
  891. box-shadow: none !important;
  892. text-shadow: 0px 1px rgba(0,0,0,0.4);
  893. }
  894. .l-unit.selected b,
  895. .l-unit.selected strong {
  896. color: #d4d4d4;
  897. }
  898. /* MAIN MENU COLLAPSED */
  899. .console-output {
  900. color: #dadada !important;
  901. }
  902. form#vstobjects {
  903. }
  904. form#vstobjects.suspended {
  905. background-color: #282828;
  906. }
  907. .pill {
  908. }
  909. .pill.usage{
  910. box-shadow: inset 0px 1px 1px rgba(0,0,0,0.85), 0px 1px 1px rgba(0,0,0,0.2);
  911. background-color: rgba(15,15,15,0.5);
  912. border: 1px solid rgba(120,120,120,0.95);
  913. text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
  914. color: #909090;
  915. }
  916. .pill.usage b { color: #d8d8d8; }
  917. .badge {
  918. box-shadow: 0px 1px 2px rgba(70,70,70,0.5),
  919. inset 0px 2px 2px rgba(0,0,0,0.65);
  920. text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
  921. border: 1px solid #212121 !important;
  922. }
  923. .badge.large {
  924. }
  925. .badge.raised {
  926. background: radial-gradient(ellipse at center, rgba(40,40,40,0.2) 0%,rgba(80,80,80,0.05) 100%);
  927. }
  928. .l-unit--suspended .badge {
  929. background: #303030 !important;
  930. color: #808080 !important;
  931. text-shadow: 0px -1px rgba(0,0,0,0.4) !important;
  932. box-shadow: 0px 1px 2px rgba(25,25,25,0.3) !important;
  933. }
  934. .pill.gray, .badge.gray {
  935. border: 1px solid #181818;
  936. background-color: #252525;
  937. color: #dadada;
  938. text-shadow: 0px 1px rgba(0,0,0,0.7) !important;
  939. }
  940. .pill.blue, .badge.blue {
  941. }
  942. .pill.purple, .badge.purple {
  943. }
  944. .pill.teal, .badge.teal {
  945. }
  946. .pill.maroon, .badge.maroon {
  947. background-color: #ff3478;
  948. }
  949. .pill.red, .badge.red {
  950. }
  951. .pill.orange, .badge.orange {
  952. }
  953. .pill.green, .badge.green {
  954. }
  955. .pill.lightblue, .badge.lightblue {
  956. }
  957. .status-icon.large {
  958. }
  959. .status-icon.yellow, .status-icon.yellow:hover {
  960. color: #f3e72c;
  961. }
  962. .status-icon.teal, .status-icon.teal:hover {
  963. color: #33cccc;
  964. }
  965. .status-icon.purple, .status-icon.purple:hover {
  966. color: #c364ff;
  967. }
  968. .status-icon.maroon, .status-icon.maroon:hover {
  969. color: #ff3478;
  970. }
  971. .status-icon.red, .status-icon.red:hover {
  972. }
  973. .status-icon.green, .status-icon.green:hover {
  974. color: #37cf39;
  975. }
  976. .status-icon.orange, .status-icon.orange:hover {
  977. }
  978. .status-icon.lightblue, .status-icon.lightblue:hover {
  979. }
  980. .status-icon.highlight, .status-icon.highlight:hover {
  981. color: #dadada;
  982. }
  983. .status-icon.blue, .status-icon.blue:hover {
  984. color: #0092f4;
  985. }
  986. .status-icon.dim {
  987. color: #808080;
  988. text-shadow: 1px 1px rgba(0,0,0,0.3);
  989. }
  990. .l-unit--suspended .status-icon.dim {
  991. color: #808080 !important;
  992. text-shadow: 0px !important;
  993. }
  994. .search-input {
  995. background-color: #212121;
  996. border: 1px solid #454545;
  997. box-shadow: 0px 1px 1px rgba(0,0,0,0.4) !important;
  998. }
  999. .ui-dialog .ui-dialog-buttonpane {
  1000. border-color: #404040 !important;
  1001. background-color: #252525 !important;
  1002. }
  1003. .shortcuts {
  1004. background: rgba(30,30,30,0.95);
  1005. border: 1px solid rgba(255,255,255,0.25);
  1006. box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
  1007. border-bottom: none !important;
  1008. }
  1009. .shortcuts .header {
  1010. border-bottom: 1px solid #353535;
  1011. }
  1012. .shortcuts .title {
  1013. }
  1014. .shortcuts .close {
  1015. }
  1016. .shortcuts .close:hover {
  1017. }
  1018. .shortcuts .close:active {
  1019. }
  1020. .shortcuts .close .fas {
  1021. }
  1022. .shortcuts ul {
  1023. }
  1024. .shortcuts ul li {
  1025. }
  1026. .shortcuts ul li.step-top {
  1027. }
  1028. .shortcuts ul li span {
  1029. }
  1030. .shortcuts ul li span.bigger {
  1031. }
  1032. .description {
  1033. }
  1034. .description ul{
  1035. }
  1036. .description li{
  1037. }
  1038. .description a {
  1039. }
  1040. .description a.purchase {
  1041. }
  1042. .description a.purchase:hover {
  1043. color: #d4d4d4;
  1044. }
  1045. .description a.purchase:active {
  1046. color: #d4d4d4;
  1047. }
  1048. .description a.cancel {
  1049. }
  1050. .description a.cancel:hover {
  1051. }
  1052. .description a.cancel:active {
  1053. }
  1054. .description.cancel-success {
  1055. }
  1056. .description .licence {
  1057. }
  1058. .description .licence input {
  1059. }
  1060. .description span {
  1061. }
  1062. .description .twoco {
  1063. }
  1064. .ui-dialog {
  1065. background-color: rgba(45,45,45,0.95) !important;
  1066. border: 1px solid rgba(80,80,80,0.97) !important;
  1067. box-shadow: inset 0px 1px 3px rgba(0,0,0,0.25),
  1068. 0px 8px 25px rgba(0,0,0,0.9) !important;
  1069. }
  1070. .ui-dialog .ui-dialog-content {
  1071. color: #dadada !important;
  1072. }
  1073. .ui-dialog .ui-dialog-title {
  1074. color: #f12569 !important;
  1075. font-weight: 600;
  1076. }
  1077. .ui-dialog-buttonpane {
  1078. }
  1079. .ui-widget {
  1080. }
  1081. .ui-widget-overlay {
  1082. }
  1083. .helper-container {
  1084. box-shadow: 0px 1px 4px rgba(0,0,0,0.25);
  1085. border: 1px solid #606060;
  1086. background-color: #454545;
  1087. }
  1088. .context-helper:active {
  1089. color: #ff3478;
  1090. }
  1091. .cron-helper-tabs a {
  1092. color: #cacaca;
  1093. }
  1094. .cron-helper-tabs a:hover {
  1095. color: #ff3478 !important;
  1096. }
  1097. .cron-helper-tabs a:active {
  1098. color: #3b9de8 !important;
  1099. }
  1100. .cron-helper-tabs .ui-tabs-selected a {
  1101. color: #ff3478 !important;
  1102. }
  1103. .cron-helper-tabs p {
  1104. color: #dadada;
  1105. }
  1106. .server-info-name {
  1107. color: #fafafa !important;
  1108. }
  1109. .server-info-output {
  1110. background: #282828;
  1111. }
  1112. .icon-server-info {
  1113. color: #707070;
  1114. }
  1115. .ui-widget-header a {
  1116. color: #cacaca !important;
  1117. }
  1118. .graph-rounded {
  1119. border-radius: 8px;
  1120. }
  1121. .body-rrd .units .l-unit {
  1122. background-color: #282828 !important;
  1123. border-left: 1px solid transparent !important;
  1124. border-right: 1px solid transparent !important;
  1125. }
  1126. @media screen and (max-width: 950px) {
  1127. .helper-container {
  1128. display: none;
  1129. }
  1130. }