dark.css 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491
  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. background-color: #760000;
  404. }
  405. .l-unit--outdated.selected {
  406. background: #b70000 !important;
  407. color: #fff !important;
  408. text-shadow: none !important;
  409. }
  410. .l-unit--outdated.selected b {
  411. color: #fff !important;
  412. }
  413. .l-unit--suspended .l-unit__name,
  414. .l-unit--suspended b,
  415. .l-unit--outdated .l-unit__name,
  416. .l-unit--outdated b {
  417. color: #606060;
  418. }
  419. .l-unit--outdated .l-unit__name {
  420. }
  421. .l-unit--outdated b {
  422. color: #d4d4d4;
  423. }
  424. .l-unit--suspended .l-percent {
  425. }
  426. .l-unit--suspended .l-percent__fill {
  427. }
  428. .l-unit--suspended .l-unit__name,
  429. .l-unit--suspended .l-unit__name span {
  430. }
  431. .l-unit--suspended.selected .l-unit__name,
  432. .l-unit--suspended.selected .l-unit__name span {
  433. color: #707070;
  434. }
  435. .l-unit--suspended.selected {
  436. background-color: #454545 !important;
  437. color: #707070 !important;
  438. }
  439. .l-unit-ft .subtitle,
  440. .l-unit .subtitle {
  441. color: #ff3478;
  442. }
  443. .l-unit__name {
  444. color: #dadada;
  445. }
  446. .l-unit__stats:hover {
  447. background: transparent !important;
  448. }
  449. .l-unit__stat-col--left a, .l-unit__stat-col--left a:visited {
  450. color: #fafafa;
  451. }
  452. .l-unit__stat-col--left a:hover {
  453. color: #fff;
  454. }
  455. .title b,
  456. .title {
  457. color: #ff3478;
  458. }
  459. .title {
  460. }
  461. /* form styles */
  462. .vst-error {
  463. color: #ff3333;
  464. }
  465. .vst-ok {
  466. color: #53ba55;
  467. }
  468. .vst-ok a {
  469. color: #ffffff;
  470. }
  471. .vst-ok a:hover {
  472. color: #ff3478;
  473. }
  474. .vst-ok a:active {
  475. }
  476. .login-box td,
  477. .data td {
  478. color: #d4d4d4;
  479. }
  480. .data input[type="checkbox"] {
  481. }
  482. .data a {
  483. }
  484. label {
  485. }
  486. label:hover {
  487. color: #d4d4d4 !important;
  488. }
  489. .vst-input {
  490. background-color: #454545;
  491. border: 1px solid #606060;
  492. color: #d4d4d4;
  493. box-shadow: 0px 1px 4px rgba(0,0,0,0.35);
  494. }
  495. .vst-input:hover {
  496. border-color: #0090ff;
  497. background-color: #494949;
  498. }
  499. .vst-input:focus {
  500. background-color: #222222;
  501. border-color: #0080df;
  502. color: #fff;
  503. box-shadow: 0px 1px 6px rgba(0,52,91,0.75);
  504. }
  505. .vst-input:disabled,
  506. .vst-list:disabled {
  507. background-color: #303030;
  508. text-shadow: 1px 1px rgba(0,0,0,0.3);
  509. color: #acacac;
  510. border-color: #606060;
  511. }
  512. .vst-input:focus:disabled {
  513. }
  514. .vst-input:disabled:hover,
  515. .vst-list:disabled:hover {
  516. border-color: #606060 !important;
  517. }
  518. .vst-input.long {
  519. }
  520. .vst-input.short {
  521. }
  522. .vst-input.vst-list-editor {
  523. }
  524. .vst-input.vst-list-editor:focus {
  525. background-color: #222222;
  526. box-shadow: none !important;
  527. }
  528. .vst-list {
  529. background-color: #454545;
  530. border: 1px solid #606060;
  531. color: #d4d4d4;
  532. text-shadow: 0 0 0 #d4d4d4;
  533. box-shadow: 0px 1px 4px rgba(0,0,0,0.35);
  534. }
  535. select.vst-list:-moz-focusring {
  536. }
  537. .vst-list.long-2 {
  538. }
  539. .vst-list option {
  540. }
  541. .vst-list:hover {
  542. border-color: #0090ff;
  543. background-color: #494949;
  544. }
  545. .vst-list:focus {
  546. background-color: #222222;
  547. border-color: #0080df;
  548. color: #fff;
  549. box-shadow: 0px 1px 6px rgba(0,52,91,0.75);
  550. }
  551. .vst-list.flat {
  552. border: 1px solid #454545;
  553. color: #fff;
  554. }
  555. .vst-list.flat:hover {
  556. color: #ff3478;
  557. }
  558. .vst-list.flat option {
  559. color: #d4d4d4;
  560. }
  561. a.vst-text,
  562. a.vst-text b{
  563. color: #fff;
  564. }
  565. a.vst-text:hover,
  566. a.vst-text:hover b{
  567. color: #ff3478;
  568. }
  569. a.vst-text:active,
  570. a.vst-text:active b{
  571. color: #ff3478;
  572. }
  573. .advanced-options {
  574. background: #454545 !important;
  575. border: 1px solid #505050 !important;
  576. text-shadow: 0px 1px rgba(0,0,0,0.4);
  577. box-shadow: inset 0px 0px 2px rgba(0,0,0,0.5),
  578. 0px 2px 6px rgba(0,0,0,0.4) !important;
  579. color: #fff !important;
  580. padding: 4px 0px 0px 18px;
  581. overflow: hidden;
  582. height: 28px;
  583. }
  584. .advanced-options a {
  585. color: #fff !important;
  586. }
  587. .advanced-options .fas {
  588. }
  589. .vst-textinput {
  590. background-color: #454545;
  591. border: 1px solid #606060;
  592. color: #d4d4d4;
  593. box-shadow: 0px 1px 4px rgba(0,0,0,0.35);
  594. }
  595. .vst-textinput:hover {
  596. border: 1px solid #0090ff;
  597. background-color: #494949;
  598. }
  599. .vst-textinput:focus {
  600. background-color: #222222;
  601. border-color: #0080df;
  602. color: #fff !important;
  603. box-shadow: 0px 1px 6px rgba(0,52,91,0.75);
  604. }
  605. .vst-textinput:disabled {
  606. background-color: #454545;
  607. }
  608. .vst-textinput.console{
  609. }
  610. .vst-textinput.short {
  611. }
  612. #advanced-options .console{
  613. }
  614. .generate {
  615. color: #29a9ff;
  616. border-radius: 4px;
  617. }
  618. .generate:hover {
  619. background-color: #ff3478;
  620. border-color: #ff3478;
  621. }
  622. .generate:active {
  623. background-color: #be1f54;
  624. border-color: #be1f54;
  625. }
  626. .vst-advanced {
  627. border-bottom: 0px solid #326b9b;
  628. color: #0094f7;
  629. font-size: 0.8rem;
  630. padding: 4px 12px;
  631. text-decoration: none;
  632. border-radius: 4px;
  633. text-transform: none !important;
  634. }
  635. .login-box .vst-advanced:hover {
  636. color: #ff3478 !important;
  637. background-color: transparent;
  638. border-color: transparent;
  639. border: none !important;
  640. background: none !important;
  641. box-shadow: none !important;
  642. }
  643. .login-box .vst-advanced:active {
  644. color: #be1f54 !important;
  645. border: none !important;
  646. background: none !important;
  647. box-shadow: none !important;
  648. }
  649. .vst-advanced:hover {
  650. color: #fff;
  651. background-color: #ff3478;
  652. border-color: #ff3478;
  653. text-decoration: none;
  654. }
  655. .login-box .vst-advanced:active,
  656. .vst-advanced:active {
  657. color: #fff;
  658. background-color: #be1f54;
  659. border-color: #be1f54;
  660. text-decoration: none;
  661. }
  662. .login-box .vst-advanced {
  663. border-bottom: none;
  664. color: #326b9b;
  665. font-size: 0.85em !important;
  666. padding: 2px 2px 0;
  667. text-decoration: none;
  668. text-transform: uppercase;
  669. border: none !important;
  670. background: none !important;
  671. box-shadow: none !important;
  672. }
  673. .vst-checkbox {
  674. }
  675. .lets-encrypt-note {
  676. }
  677. .additional-control {
  678. color: #0099ff;
  679. }
  680. .additional-control:hover {
  681. background-color: #ff3478;
  682. border-color: #ff3478;
  683. }
  684. .additional-control:active {
  685. }
  686. .additional-control.ftp-remove-user {
  687. }
  688. .additional-control.delete:hover,
  689. .additional-control.ftp-remove-user:hover {
  690. }
  691. .additional-control.delete:active,
  692. .additional-control.ftp-remove-user:active {
  693. }
  694. .additional-control.add:hover {
  695. }
  696. .additional-control.add:active{
  697. }
  698. .additional-control.remove-ns {
  699. }
  700. .data .step-left {
  701. }
  702. .hide-password {
  703. }
  704. .toggle-psw-visibility-icon {
  705. }
  706. .show-passwords-enabled-action {
  707. }
  708. .ftp-path-value,
  709. .hint,
  710. td.hint {
  711. color: #a2a2a2;
  712. font-size: 0.8rem;
  713. }
  714. .ftp-path-prefix { padding-top: 12px; font-size: 0.8rem; color: #555; }
  715. .ui-dialog .ui-dialog-buttonpane button {
  716. box-shadow: 0px 1px 4px rgba(0,0,0,0.1),
  717. inset 0px 0px 1px #000,
  718. inset 0px 0px 3px rgba(0,0,0,0.5) !important;
  719. }
  720. .ui-button, .button, .ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.submit, .vst-advanced, .to-shortcuts, .to-top {
  721. font-size: 0.85rem !important;
  722. font-weight: 400 !important;
  723. color: #eeeeee !important;
  724. border: 1px solid #707070 !important;
  725. background: rgb(48,48,48) !important;
  726. background: linear-gradient(0deg, rgba(48,48,48,1) 0%, rgba(53,53,53,1) 35%, rgba(69,69,69,1) 100%) !important;
  727. box-shadow: 0px 1px 4px rgba(0,0,0,0.2),
  728. inset 0px 0px 1px rgba(20,20,20,1),
  729. inset 0px 0px 3px rgba(0,0,0, 0.5) !important;
  730. text-shadow: 0px 1px 1px rgba(0,0,0,0.35) !important;
  731. }
  732. .ui-button:hover, .button:hover, .ui-button.cancel:hover, .button.cancel:hover,
  733. .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 {
  734. color: #fff !important;
  735. text-shadow: 1px 1px rgba(0,0,0,0.25) !important;
  736. border: 1px solid #0098ff !important;
  737. background: linear-gradient(0deg, rgba(58,58,58,1) 0%, rgba(68,68,68,1) 35%, rgba(79,79,79,1) 100%) !important;
  738. background-color: #454545;
  739. box-shadow: 0px 1px 3px rgba(0,0,0,0.35),
  740. inset 0px 0px 1px rgba(0,0,0,1),
  741. inset 0px 0px 3px rgba(0,0,0,0.65) !important;
  742. transition: 0.2s;
  743. }
  744. .ui-button:focus,.ui-button:active,
  745. .button:active,.button:focus,.ui-button.cancel:focus,.ui-button.cancel:active,
  746. .button.cancel:active,.button.cancel:focus,
  747. .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,
  748. .to-shortcuts:focus, .to-top:focus {
  749. border: 1px solid #0066b4 !important;
  750. background: linear-gradient(0deg, rgba(69,69,69,1) 0%, rgba(53,53,53,1) 35%, rgba(48,48,48,1) 100%) !important;
  751. color: #d4d4d4 !important;
  752. text-shadow: 0px -1px 1px rgba(0,0,0,0.55) !important;
  753. box-shadow: 0px 1px 3px rgba(0,0,0,0.3),
  754. inset 0px 0px 1px rgba(0,0,0,1),
  755. inset -1px -1px 4px rgba(30,30,30,0.4) !important;
  756. }
  757. .ui-button-text-only {
  758. text-shadow: 0px 1px rgba(0,0,0,0.5);
  759. }
  760. .ui-dialog .ui-dialog-buttonpane button span.ui-button-text {
  761. }
  762. .ui-dialog .ui-button:hover span {
  763. color: #fafafa !important;
  764. }
  765. .ui-button-text-only .selected {
  766. }
  767. .ui-button.cancel,
  768. .button.cancel {
  769. color: #eeeeee !important;
  770. border: 1px solid #454545 !important;
  771. background: rgb(48,48,48) !important;
  772. background: linear-gradient(0deg, rgba(48,48,48,1) 0%, rgba(53,53,53,1) 35%, rgba(69,69,69,1) 100%) !important;
  773. }
  774. .ui-button-text {
  775. color: #eeeeee !important;
  776. }
  777. .ui-button.cancel:active,
  778. .button.cancel:active {
  779. }
  780. a.button.cancel {
  781. }
  782. .ui-dialog button.cancel {
  783. border: 1px solid #d4d4d4;
  784. background-color: #d4d4d4;
  785. }
  786. .ui-button.danger:hover, .button.danger:hover {
  787. background: rgb(133,0,0);
  788. background: linear-gradient(0deg, rgba(133,0,0,1) 0%, rgba(203,0,0,1) 100%) !important;
  789. color: #fff !important;
  790. text-shadow: 0px 1px rgba(0,0,0,0.45) !important;
  791. border: 1px solid rgb(170, 0, 0) !important;
  792. }
  793. .ui-button.danger:active, .button.danger:active, .ui-button.danger:focus, .button.danger:focus {
  794. background: rgb(133,0,0);
  795. background: linear-gradient(180deg, rgba(133,0,0,1) 0%, rgba(203,0,0,1) 100%) !important;
  796. color: #4d0000 !important;
  797. text-shadow: 0px -1px 1px rgba(255,255,255,0.3) !important;
  798. border: 1px solid rgb(251, 71, 51) !important;
  799. }
  800. .ui-button span {
  801. }
  802. .ui-button:hover span {
  803. color: #d4d4d4 !important;
  804. }
  805. .ui-button:active span {
  806. color: #d4d4d4;
  807. }
  808. .ui-button.cancel span {
  809. }
  810. .ui-button:hover span {
  811. }
  812. .ui-button:active span {
  813. }
  814. .ui-dialog button.cancel span {
  815. color: #fff !important;
  816. }
  817. .unlim-trigger {
  818. }
  819. .optional {
  820. }
  821. .data-active b {
  822. }
  823. .data-suspended b {
  824. }
  825. .data-date {
  826. }
  827. .data-dotted {
  828. }
  829. .mail-infoblock-td {
  830. }
  831. .mail-infoblock {
  832. color: #fff;
  833. border: 1px solid #606060;
  834. margin-top: 87px;
  835. box-shadow: 0px 1px 4px rgba(0,0,0,0.35);
  836. background-color: #454545;
  837. }
  838. .mail-infoblock:hover {
  839. }
  840. .mail-infoblock td {
  841. color: #dadada;
  842. }
  843. .mail-infoblock td:first-child{
  844. }
  845. .mail-infoblock div {
  846. }
  847. .mail-infoblock a {
  848. color: #52b9ff;
  849. }
  850. .mail-infoblock a:hover {
  851. color: #ff3478;
  852. }
  853. .additional-info {
  854. }
  855. .additional-info td {
  856. }
  857. .additional-info td.details {
  858. }
  859. :focus {outline:none;}
  860. ::-moz-focus-inner {border:0;}
  861. .login {
  862. background-color: #282828;
  863. box-shadow: 0px 8px 25px rgba(0,0,0, 0.3), inset 0px 0px 2px rgba(0,0,0,0.25) !important;
  864. }
  865. .login-welcome {
  866. color: #fff !important;
  867. }
  868. .page-title {
  869. color: #dbdbdb !important;
  870. }
  871. .qr-code {
  872. border: 1px solid #3b3b3b;
  873. box-shadow: 0px 1px 4px rgba(0,0,0,0.35);
  874. }
  875. .password-option {
  876. }
  877. .login a.error {
  878. color: #f864fa;
  879. }
  880. .hestiacp {
  881. }
  882. .hestiacp:hover {
  883. }
  884. .hestiacp:active {
  885. color: #ff3478;
  886. }
  887. .login-bottom {
  888. }
  889. .l-unit.selected {
  890. background-color: #454545;
  891. color: #d4d4d4;
  892. box-shadow: 0px 2px 10px rgba(30,30,30,0.35);
  893. text-shadow: 0px 1px rgba(0,0,0,0.5);
  894. border-left: 1px solid #212121;
  895. border-right: 1px solid #212121;
  896. }
  897. .l-unit.selected:hover {
  898. background-color: #555555;
  899. color: #d4d4d4;
  900. box-shadow: none !important;
  901. text-shadow: 0px 1px rgba(0,0,0,0.4);
  902. }
  903. .l-unit.selected b,
  904. .l-unit.selected strong {
  905. color: #d4d4d4;
  906. }
  907. /* MAIN MENU COLLAPSED */
  908. .console-output {
  909. color: #dadada !important;
  910. }
  911. form#vstobjects {
  912. }
  913. form#vstobjects.suspended {
  914. background-color: #282828;
  915. }
  916. .pill {
  917. }
  918. .pill.usage{
  919. box-shadow: inset 0px 1px 1px rgba(0,0,0,0.85), 0px 1px 1px rgba(0,0,0,0.2);
  920. background-color: rgba(15,15,15,0.5);
  921. border: 1px solid rgba(120,120,120,0.95);
  922. text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
  923. color: #909090;
  924. }
  925. .pill.usage b { color: #d8d8d8; }
  926. .badge {
  927. box-shadow: 0px 1px 2px rgba(70,70,70,0.5),
  928. inset 0px 2px 2px rgba(0,0,0,0.65);
  929. text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
  930. border: 1px solid #212121 !important;
  931. }
  932. .badge.large {
  933. }
  934. .badge.raised {
  935. background: radial-gradient(ellipse at center, rgba(40,40,40,0.2) 0%,rgba(80,80,80,0.05) 100%);
  936. }
  937. .l-unit--suspended .badge {
  938. background: #303030 !important;
  939. color: #808080 !important;
  940. text-shadow: 0px -1px rgba(0,0,0,0.4) !important;
  941. box-shadow: 0px 1px 2px rgba(25,25,25,0.3) !important;
  942. }
  943. .pill.gray, .badge.gray {
  944. border: 1px solid #181818;
  945. background-color: #252525;
  946. color: #dadada;
  947. text-shadow: 0px 1px rgba(0,0,0,0.7) !important;
  948. }
  949. .pill.blue, .badge.blue {
  950. }
  951. .pill.purple, .badge.purple {
  952. }
  953. .pill.teal, .badge.teal {
  954. }
  955. .pill.maroon, .badge.maroon {
  956. background-color: #ff3478;
  957. }
  958. .pill.red, .badge.red {
  959. }
  960. .pill.orange, .badge.orange {
  961. }
  962. .pill.green, .badge.green {
  963. }
  964. .pill.lightblue, .badge.lightblue {
  965. }
  966. .status-icon.large {
  967. }
  968. .status-icon.yellow, .status-icon.yellow:hover {
  969. color: #f3e72c;
  970. }
  971. .status-icon.teal, .status-icon.teal:hover {
  972. color: #33cccc;
  973. }
  974. .status-icon.purple, .status-icon.purple:hover {
  975. color: #c364ff;
  976. }
  977. .status-icon.maroon, .status-icon.maroon:hover {
  978. color: #ff3478;
  979. }
  980. .status-icon.red, .status-icon.red:hover {
  981. }
  982. .status-icon.green, .status-icon.green:hover {
  983. color: #37cf39;
  984. }
  985. .status-icon.orange, .status-icon.orange:hover {
  986. }
  987. .status-icon.lightblue, .status-icon.lightblue:hover {
  988. }
  989. .status-icon.highlight, .status-icon.highlight:hover {
  990. color: #dadada;
  991. }
  992. .status-icon.blue, .status-icon.blue:hover {
  993. color: #0092f4;
  994. }
  995. .status-icon.dim {
  996. color: #808080;
  997. text-shadow: 1px 1px rgba(0,0,0,0.3);
  998. }
  999. .l-unit--suspended .status-icon.dim {
  1000. color: #808080 !important;
  1001. text-shadow: 0px !important;
  1002. }
  1003. .search-input {
  1004. background-color: #212121;
  1005. border: 1px solid #454545;
  1006. box-shadow: 0px 1px 1px rgba(0,0,0,0.4) !important;
  1007. }
  1008. .ui-dialog .ui-dialog-buttonpane {
  1009. border-color: #404040 !important;
  1010. background-color: #252525 !important;
  1011. }
  1012. .shortcuts {
  1013. background: rgba(30,30,30,0.95);
  1014. border: 1px solid rgba(255,255,255,0.25);
  1015. box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
  1016. border-bottom: none !important;
  1017. }
  1018. .shortcuts .header {
  1019. border-bottom: 1px solid #353535;
  1020. }
  1021. .shortcuts .title {
  1022. }
  1023. .shortcuts .close {
  1024. }
  1025. .shortcuts .close:hover {
  1026. }
  1027. .shortcuts .close:active {
  1028. }
  1029. .shortcuts .close .fas {
  1030. }
  1031. .shortcuts ul {
  1032. }
  1033. .shortcuts ul li {
  1034. }
  1035. .shortcuts ul li.step-top {
  1036. }
  1037. .shortcuts ul li span {
  1038. }
  1039. .shortcuts ul li span.bigger {
  1040. }
  1041. .description {
  1042. }
  1043. .description ul{
  1044. }
  1045. .description li{
  1046. }
  1047. .description a {
  1048. }
  1049. .description a.purchase {
  1050. }
  1051. .description a.purchase:hover {
  1052. color: #d4d4d4;
  1053. }
  1054. .description a.purchase:active {
  1055. color: #d4d4d4;
  1056. }
  1057. .description a.cancel {
  1058. }
  1059. .description a.cancel:hover {
  1060. }
  1061. .description a.cancel:active {
  1062. }
  1063. .description.cancel-success {
  1064. }
  1065. .description .licence {
  1066. }
  1067. .description .licence input {
  1068. }
  1069. .description span {
  1070. }
  1071. .description .twoco {
  1072. }
  1073. .ui-dialog {
  1074. background-color: rgba(45,45,45,0.95) !important;
  1075. border: 1px solid rgba(80,80,80,0.97) !important;
  1076. box-shadow: inset 0px 1px 3px rgba(0,0,0,0.25),
  1077. 0px 8px 25px rgba(0,0,0,0.9) !important;
  1078. }
  1079. .ui-dialog .ui-dialog-content {
  1080. color: #dadada !important;
  1081. }
  1082. .ui-dialog .ui-dialog-title {
  1083. color: #f12569 !important;
  1084. font-weight: 600;
  1085. }
  1086. .ui-dialog-buttonpane {
  1087. }
  1088. .ui-widget {
  1089. }
  1090. .ui-widget-overlay {
  1091. }
  1092. .helper-container {
  1093. box-shadow: 0px 1px 4px rgba(0,0,0,0.25);
  1094. border: 1px solid #606060;
  1095. background-color: #454545;
  1096. }
  1097. .context-helper:active {
  1098. color: #ff3478;
  1099. }
  1100. .cron-helper-tabs a {
  1101. color: #cacaca;
  1102. }
  1103. .cron-helper-tabs a:hover {
  1104. color: #ff3478 !important;
  1105. }
  1106. .cron-helper-tabs a:active {
  1107. color: #3b9de8 !important;
  1108. }
  1109. .cron-helper-tabs .ui-tabs-selected a {
  1110. color: #ff3478 !important;
  1111. }
  1112. .cron-helper-tabs p {
  1113. color: #dadada;
  1114. }
  1115. .server-info-name {
  1116. color: #fafafa !important;
  1117. }
  1118. .server-info-output {
  1119. background: #282828;
  1120. }
  1121. .icon-server-info {
  1122. color: #707070;
  1123. }
  1124. .ui-widget-header a {
  1125. color: #cacaca !important;
  1126. }
  1127. .graph-rounded {
  1128. border-radius: 8px;
  1129. }
  1130. .body-rrd .units .l-unit {
  1131. background-color: #282828 !important;
  1132. border-left: 1px solid transparent !important;
  1133. border-right: 1px solid transparent !important;
  1134. }
  1135. @media screen and (max-width: 950px) {
  1136. .helper-container {
  1137. display: none;
  1138. }
  1139. }