preset.scss 34 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612
  1. // Load Third Party Libraries
  2. @import "configuration/template/base";
  3. @import "template/modules/bourbon_essentials";
  4. @import "template/modules/buttons";
  5. // Logo
  6. $logo-bg: #323640 !default;
  7. $logo-link: #FFFFFF !default;
  8. // Nav
  9. $nav-bg: #3D424E !default;
  10. $nav-text: #B7B9BD !default;
  11. $nav-link: #ffffff !default;
  12. $nav-selected-bg: #323640 !default;
  13. $nav-selected-link: #ffffff !default;
  14. $nav-hover-bg: #434753 !default;
  15. $nav-hover-link: #ffffff !default;
  16. // Toolbar
  17. $toolbar-bg: #ffffff !default;
  18. $toolbar-text: #3D424E !default;
  19. // Page
  20. $page-bg: #F6F6F6 !default;
  21. $page-text: #6f7b8a !default;
  22. $page-link: #0090D9 !default;
  23. // Content
  24. $content-bg: #ffffff !default;
  25. $content-text: #6f7b8a !default;
  26. $content-link: #0090D9 !default;
  27. $content-link2: #da4b46 !default;
  28. $content-header: #414147 !default;
  29. $content-tabs-bg: #e3e3e3 !default;
  30. $content-tabs-text: #808080 !default;
  31. // Buttons
  32. $button-bg: #0090D9 !default;
  33. $button-text: #ffffff !default;
  34. // Notice
  35. $notice-bg: #06A599 !default;
  36. $notice-text: #ffffff !default;
  37. // Updates
  38. $update-bg: #77559D !default;
  39. $update-text: #ffffff !default;
  40. // Critical
  41. $critical-bg: #F45857 !default;
  42. $critical-text: #ffffff !default;
  43. // Calculated values
  44. $primary-accent: button !default;
  45. $secondary-accent: notice !default;
  46. $tertiary-accent: critical !default;
  47. // Initial values
  48. $primary-accent-bg: $notice-bg;
  49. $primary-accent-fg: $notice-text;
  50. $secondary-accent-bg: $notice-bg;
  51. $secondary-accent-fg: $notice-text;
  52. $tertiary-accent-bg: $notice-bg;
  53. $tertiary-accent-fg: $notice-text;
  54. $element-map: (
  55. button: $button-bg $button-text,
  56. notice: $notice-bg $notice-text,
  57. content: $content-bg $content-text,
  58. tabs: $content-tabs-bg $content-tabs-text,
  59. update: $update-bg $update-text,
  60. critical: $critical-bg $critical-text,
  61. page: $page-bg $page-text,
  62. nav: $nav-bg $nav-text,
  63. toolbar: $toolbar-bg $toolbar-text,
  64. logo: $logo-bg $logo-link
  65. );
  66. // Set based on configuration
  67. @each $element, $element-parts in $element-map {
  68. @if $primary-accent == $element {
  69. $primary-accent-bg: nth($element-parts, 1);
  70. $primary-accent-fg: nth($element-parts, 2);
  71. }
  72. }
  73. @each $element, $element-parts in $element-map {
  74. @if $secondary-accent == $element {
  75. $secondary-accent-bg: nth($element-parts, 1);
  76. $secondary-accent-fg: nth($element-parts, 2);
  77. }
  78. }
  79. @each $element, $element-parts in $element-map {
  80. @if $tertiary-accent == $element {
  81. $tertiary-accent-bg: nth($element-parts, 1);
  82. $tertiary-accent-fg: nth($element-parts, 2);
  83. }
  84. }
  85. $form-border: #f00;
  86. $form-field-bg: #00f;
  87. $form-field-text: #0f0;
  88. $underline: #ff0;
  89. $subtle-text: #0ff;
  90. $ir-slider-bg: #f0f;
  91. @if (lightness($content-bg) < 50) {
  92. $form-border: lighten($content-bg, 15%);
  93. $form-field-bg: lighten($content-bg, 1%);
  94. $ir-slider-bg: lighten($content-bg, 2%);
  95. $form-field-text: lighten($content-text, 5%);
  96. $underline: lighten($content-bg, 3%);
  97. $subtle-text: darken($content-text, 10%);
  98. } @else {
  99. $form-border: darken($content-bg, 10%);
  100. $form-field-bg: darken($content-bg, 1%);
  101. $ir-slider-bg: darken($content-bg, 2%);
  102. $form-field-text: darken($content-text, 5%);
  103. $underline: darken($content-bg, 3%);
  104. $subtle-text: lighten($content-text, 10%);
  105. }
  106. $form-border-width: 1px;
  107. // Core
  108. body {
  109. background: $page-bg;
  110. color: $page-text;
  111. }
  112. a {
  113. color: $page-link;
  114. &:hover {
  115. color: darken($page-link, 5%);
  116. }
  117. }
  118. // Typography
  119. blockquote {
  120. border-left: 10px solid darken($content-bg, 10%);
  121. background: darken($content-bg, 2%);
  122. p {
  123. color: darken($page-text, 5%);
  124. }
  125. cite {
  126. color: $page-text;
  127. }
  128. }
  129. code {
  130. background: $code-bg;
  131. color: darken($code-text,10%);
  132. }
  133. pre {
  134. background: $pre-bg;
  135. border: 1px solid $core-border-color;
  136. code {
  137. color: $pre-text;
  138. }
  139. }
  140. hr {
  141. border-bottom: 2px solid $underline;
  142. }
  143. .label {
  144. background: $page-link;
  145. color: $white;
  146. }
  147. .badge {
  148. background: $update-bg;
  149. color: $update-text;
  150. }
  151. .light-border {
  152. border-color: $underline !important;
  153. }
  154. .subtle-text {
  155. color: $subtle-text !important;
  156. }
  157. // Tables
  158. td {
  159. border-bottom: 1px solid $underline;
  160. }
  161. tr {
  162. td {
  163. &.gpm-details {
  164. background-color: darken($content-bg,2%);
  165. }
  166. }
  167. }
  168. // Tabs
  169. .tab-bar {
  170. background: $content-tabs-bg;
  171. color: $content-tabs-text;
  172. li {
  173. &.active {
  174. span, a {
  175. background: $content-bg;
  176. color: $content-text;
  177. }
  178. }
  179. }
  180. span, a {
  181. color: $content-tabs-text;
  182. &:hover {
  183. color: lighten($content-tabs-text, 10%);
  184. background: lighten($content-tabs-bg,10%);
  185. }
  186. }
  187. }
  188. // Buttons
  189. .button {
  190. @include button-color($button-bg);
  191. &.dropdown-toggle {
  192. border-left: 1px solid darken($button-bg, 5%);
  193. }
  194. &.secondary {
  195. @include button-color(shade($button-bg, 20%));
  196. &.dropdown-toggle {
  197. border-left: 1px solid darken(shade($button-bg, 20%), 5%);
  198. }
  199. }
  200. }
  201. .button-group {
  202. .dropdown-menu {
  203. background-color: $button-bg;
  204. box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  205. .divider {
  206. background-color: $button-bg;
  207. }
  208. li > a {
  209. color: $button-text;
  210. &:focus, &:hover {
  211. color: $button-text;
  212. background-color: darken($button-bg, 5%);
  213. }
  214. }
  215. &.language-switcher {
  216. a.active {
  217. background-color: lighten($button-bg, 10%);
  218. }
  219. }
  220. }
  221. }
  222. #admin-main .admin-block a.gumroad-button {
  223. background: $critical-bg !important;
  224. color: $critical-text !important;
  225. }
  226. #admin-login-wrapper {
  227. background: radial-gradient(circle at center, lighten($nav-bg, 10%) 40%, darken($nav-bg, 10%) 100%);
  228. }
  229. #admin-login {
  230. background: $nav-bg;
  231. &.wide form {
  232. label {
  233. color: $nav-text;
  234. }
  235. input {
  236. @include placeholder {
  237. color: rgba($nav-text, 0.6);
  238. }
  239. }
  240. }
  241. .wrapper-spacer {
  242. h3 {
  243. color: rgba(white, 0.4);
  244. border-bottom: 3px solid rgba($nav-link, 0.1);
  245. }
  246. }
  247. .instructions, p {
  248. color: rgba($nav-text,0.8);
  249. }
  250. h1 {
  251. background: darken($nav-bg, 5%) url(../images/logo.svg) 50% 50% no-repeat;
  252. }
  253. h5 {
  254. color: $nav-text;
  255. }
  256. form {
  257. input {
  258. background: lighten($nav-bg, 3%);
  259. color: $nav-link;
  260. border: 1px solid shade($nav-bg, 20%);
  261. @include placeholder {
  262. @if (lightness($nav-bg) < 50) {
  263. color: shade($nav-text, 15%);
  264. } @else {
  265. color: tint($nav-text, 15%);
  266. }
  267. }
  268. }
  269. }
  270. }
  271. #admin-sidebar {
  272. background: $nav-bg;
  273. a {
  274. color: rgba($nav-link, 0.9);
  275. &:hover {
  276. color: $nav-link;
  277. }
  278. }
  279. }
  280. #admin-logo {
  281. background-color: $logo-bg;
  282. .grav-logo {
  283. path {
  284. fill: rgba($logo-link, 0.9) !important;
  285. }
  286. &:hover {
  287. path {
  288. fill: $logo-link !important;
  289. }
  290. }
  291. }
  292. a, i {
  293. color: shade($logo-link, 10%);
  294. &:hover {
  295. color: $logo-link;
  296. }
  297. }
  298. }
  299. #open-handle {
  300. background-color: darken($logo-bg, 5%);
  301. border-left: 1px solid lighten($logo-bg, 5%);
  302. i {
  303. color: darken($logo-link, 50%);
  304. &:hover {
  305. color: darken($logo-link, 20%);
  306. }
  307. }
  308. }
  309. #admin-nav-quick-tray {
  310. background: darken($nav-bg, 2%);
  311. border-bottom: 1px solid darken($nav-bg, 3%);
  312. color: $nav-link;
  313. i:hover {
  314. @if (lightness($nav-bg) < 50) {
  315. color: lighten($nav-link, 10%);
  316. } @else {
  317. color: darken($nav-link, 10%);
  318. }
  319. }
  320. }
  321. .block-userinfo {
  322. img {
  323. border: 4px solid $form-border;
  324. }
  325. }
  326. #offline-status {
  327. background-color: $update-bg;
  328. color: $update-text;
  329. }
  330. #admin-user-details, .admin-user-details {
  331. border-bottom: 1px solid lighten($nav-bg, 5%);
  332. &:hover img {
  333. box-shadow: 0px 0px 0 50px lighten($nav-bg, 3%);
  334. }
  335. .admin-user-names {
  336. h4, h5 {
  337. color: $nav-link;
  338. }
  339. }
  340. }
  341. #admin-menu {
  342. li {
  343. .badges {
  344. .count {
  345. color: $nav-link;
  346. background-color: darken($nav-bg, 5%);
  347. }
  348. .updates {
  349. color: $notice-text;
  350. background-color: $notice-bg;
  351. }
  352. }
  353. a {
  354. &:hover {
  355. background: $nav-hover-bg;
  356. color: $nav-hover-link;
  357. .fa {
  358. color: $nav-hover-link;
  359. }
  360. }
  361. }
  362. &.selected {
  363. a {
  364. background: $nav-selected-bg;
  365. color: $nav-selected-link;
  366. border-left: 9px solid shade($button-bg, 15%);
  367. .fa {
  368. color: $nav-selected-link;
  369. }
  370. }
  371. }
  372. }
  373. }
  374. #admin-main {
  375. .grav-update {
  376. background: $update-bg;
  377. color: $update-text;
  378. a.button, span.button, button.button {
  379. @include button-color(shade($update-bg, 20%), $update-text, true);
  380. }
  381. }
  382. .titlebar {
  383. background: $toolbar-bg;
  384. color: $toolbar-text;
  385. .button-bar {
  386. .button {
  387. @include button-color($button-bg, $button-text, false);
  388. }
  389. }
  390. }
  391. .lines-button {
  392. background: rgba($black, 0.1); // move this
  393. .lines, .lines:before, .lines:after {
  394. background: $toolbar-text;
  395. }
  396. }
  397. .admin-block {
  398. background: $content-bg;
  399. color: $content-text;
  400. a {
  401. color: $content-link;
  402. &:hover {
  403. color: darken($content-link, 5%);
  404. }
  405. }
  406. h1 {
  407. color: $content-header;
  408. border-bottom: 1px solid $underline;
  409. }
  410. .button {
  411. @include button-color($button-bg);
  412. }
  413. }
  414. .danger, .success {
  415. &.button-bar {
  416. background: darken($content-bg, 3%);
  417. }
  418. }
  419. .danger {
  420. .button {
  421. @include button-color($critical-bg);
  422. }
  423. }
  424. // Notifications
  425. .content-padding {
  426. div[class*=notifications-container] {
  427. .alert.note {
  428. background: $content-bg;
  429. color: $content-text;
  430. &.alert {
  431. border-bottom: 2px solid darken($content-bg, 5%);
  432. }
  433. a:not(.button) {
  434. color: $content-link;
  435. &:hover {
  436. color: darken($content-link, 5%);
  437. }
  438. }
  439. }
  440. .alert.warning {
  441. background: $critical_bg;
  442. color: $critical_text;
  443. &.alert {
  444. border-bottom: 2px solid darken($critical_bg, 5%);
  445. }
  446. a {
  447. color: $critical_text;
  448. &:hover {
  449. color: lighten($critical_text, 10%);
  450. }
  451. }
  452. }
  453. }
  454. }
  455. #notifications {
  456. .badge.alert {
  457. &.note {
  458. background: $content_link;
  459. color: $content_bg;
  460. }
  461. &.warning {
  462. background: $critical_bg;
  463. color: $critical_text;
  464. }
  465. }
  466. }
  467. }
  468. .sidebar-mobile-open {
  469. #admin-main {
  470. .lines-button {
  471. .lines, .lines:before, .lines:after {
  472. background: $logo-link;
  473. }
  474. }
  475. }
  476. }
  477. #admin-dashboard {
  478. .admin-block {
  479. li {
  480. border-bottom: 1px solid $underline;
  481. }
  482. }
  483. .dashboard-item {
  484. }
  485. .primary-accent {
  486. @include linear-gradient(darken($primary-accent-bg, 7%), $primary-accent-bg);
  487. p {
  488. color: rgba($primary-accent-fg, 0.95);
  489. }
  490. .stat {
  491. i {
  492. color: rgba($primary-accent-fg, 0.75);
  493. }
  494. }
  495. .numeric {
  496. em {
  497. color: rgba($primary-accent-fg, .85);
  498. }
  499. }
  500. .chart-loader {
  501. color: shade($primary-accent-bg, 20%);
  502. }
  503. }
  504. .secondary-accent {
  505. @include linear-gradient(darken($secondary-accent-bg, 7%), $secondary-accent-bg);
  506. p {
  507. color: rgba($secondary-accent-fg, 0.95);
  508. }
  509. .stat {
  510. i {
  511. color: rgba($secondary-accent-fg, 0.75);
  512. }
  513. }
  514. .numeric {
  515. em {
  516. color: rgba($secondary-accent-fg, .85);
  517. }
  518. }
  519. .chart-loader {
  520. color: shade($secondary-accent-bg, 20%);
  521. }
  522. }
  523. }
  524. // Forms
  525. form {
  526. h1, h3 {
  527. border-bottom: 3px solid $underline;
  528. }
  529. h1, h2, h3, h4, h5 {
  530. color: $content-header;
  531. }
  532. .note {
  533. color: $critical-bg;
  534. }
  535. .required {
  536. color: $content-link2;
  537. }
  538. .overlay {
  539. background: darken($content-bg, 5%);
  540. }
  541. .form-border {
  542. border: 1px solid $form-border;
  543. }
  544. .form-field-colors {
  545. background-color: $form-field-bg;
  546. color: $form-field-text;
  547. }
  548. .form-select-wrapper, .selectize-control.single .selectize-input {
  549. &:after {
  550. color: lighten($content-text, 15%);
  551. }
  552. }
  553. .selectize-control {
  554. &.single, &.multi {
  555. .selectize-input {
  556. &, &.full, &.items, &.active {
  557. color: $form-field-text;
  558. border-color: $form-border;
  559. background-color: $form-field-bg;
  560. }
  561. input {
  562. color: $form-field-text;
  563. }
  564. a.remove {
  565. color: $page-bg !important;
  566. }
  567. }
  568. }
  569. }
  570. .form-input-wrapper {
  571. .form-input-addon {
  572. border: 1px solid $form-border;
  573. background: $content-bg;
  574. }
  575. }
  576. .selectize-control.multi .selectize-input {
  577. > div {
  578. color: $content-bg;
  579. background: $content-text;
  580. &.active {
  581. background: $notice-bg;
  582. color: $notice-text;
  583. }
  584. }
  585. }
  586. select {
  587. border: $form-border-width solid $form-border;
  588. background: $form-field-bg;
  589. color: $form-field-text;
  590. }
  591. input[type=text],
  592. input[type=password],
  593. input[type=email],
  594. input[type=date],
  595. input[type=tel],
  596. input[type=time],
  597. input[type=week],
  598. input[type=month],
  599. input[type=number],
  600. input[type=color],
  601. input[type=url] {
  602. border: $form-border-width solid $form-border;
  603. background: $form-field-bg;
  604. color: $form-field-text;
  605. }
  606. input[readonly=readonly] {
  607. background: $content-bg;
  608. }
  609. textarea {
  610. color: $form-field-text;
  611. border: $form-border-width solid $form-border;
  612. background: $form-field-bg;
  613. }
  614. .form-frontmatter-wrapper {
  615. border: $form-border-width solid $form-border;
  616. }
  617. .button-bar {
  618. background: lighten($form-border,7%);
  619. }
  620. .checkboxes {
  621. label:before {
  622. background: $form-field-bg;
  623. border: $form-border-width solid $form-border;
  624. }
  625. }
  626. input, textarea, select {
  627. @include placeholder {
  628. @if (lightness($form-field-bg) < 50) {
  629. color: darken($form-field-text, 25%);
  630. } @else {
  631. color: lighten($form-field-text, 25%);
  632. }
  633. }
  634. }
  635. .g-colorpicker {
  636. width: 230px;
  637. .g-colorpicker-preview-wrap {
  638. border-color: $form-border;
  639. height: 43px;
  640. width: 43px;
  641. }
  642. input {
  643. height: 43px;
  644. }
  645. }
  646. .form-input-file {
  647. border: 2px dashed $form-border;
  648. p {
  649. color: $form-field-text;
  650. }
  651. ul {
  652. color: $primary-accent-fg;
  653. background: $primary-accent-bg;
  654. }
  655. }
  656. .file-thumbnail-remove {
  657. background: $button-bg;
  658. .fa {
  659. color: $button-text;
  660. }
  661. &:hover {
  662. background: $button-text;
  663. .fa {
  664. color: $button-bg;
  665. }
  666. }
  667. }
  668. // Range
  669. input[type=range] {
  670. &::-webkit-slider-runnable-track {
  671. background: $ir-slider-bg;
  672. border: 1px solid $form-border;
  673. }
  674. &::-webkit-slider-thumb {
  675. border: 1px solid $form-border;
  676. background: $button-bg;
  677. }
  678. &:focus::-webkit-slider-runnable-track {
  679. background: $ir-slider-bg;
  680. }
  681. &::-moz-range-track {
  682. background: $ir-slider-bg;
  683. border: 1px solid $form-border;
  684. }
  685. &::-moz-range-progress {
  686. background: $ir-slider-bg;
  687. }
  688. &::-moz-range-thumb {
  689. border: 1px solid $form-border;
  690. background: $button-bg;
  691. }
  692. &::-ms-fill-lower, &::-ms-fill-upper {
  693. background: $ir-slider-bg;
  694. border: 1px solid $form-border;
  695. }
  696. &::-ms-thumb {
  697. border: 1px solid $form-border;
  698. background: $button-bg;
  699. }
  700. &:focus::-ms-fill-lower, &:focus::-ms-fill-upper {
  701. background: $ir-slider-bg;
  702. }
  703. }
  704. }
  705. // Display RESET
  706. form {
  707. .form-display-wrapper {
  708. table {
  709. border: 1px solid $form-border;
  710. th {
  711. background-color: lighten($form-border, 6%);
  712. border-bottom: 3px solid $form-border;
  713. border-right: 1px solid $form-border;
  714. }
  715. td {
  716. border-right: 1px solid $form-border;
  717. }
  718. tr {
  719. border-bottom: 1px solid $form-border;
  720. }
  721. }
  722. }
  723. }
  724. .grav-editor-resizer {
  725. background-color: rgba(213,213,213,1);
  726. @include linear-gradient(top, rgba(213,213,213,1) 0%, rgba(213,213,213,1) 20%, rgba(237,237,237,1) 20%, rgba(237,237,237,1) 40%, rgba(213,213,213,1) 40%, rgba(213,213,213,1) 60%, rgba(237,237,237,1) 60%, rgba(237,237,237,1) 80%, rgba(213,213,213,1) 80%, rgba(213,213,213,1) 100%);
  727. }
  728. .form-order-wrapper {
  729. ul.orderable {
  730. li {
  731. border: 1px solid $form-border;
  732. background: lighten($content-bg, 2%);
  733. color: $content-text;
  734. &.drag-handle {
  735. background: $form-field-bg;
  736. color: $form-field-text;
  737. }
  738. &[data-active-id] {
  739. border-color: $content-link;
  740. }
  741. }
  742. &.disabled li {
  743. opacity: 0.7;
  744. }
  745. }
  746. }
  747. .form-list-wrapper {
  748. ul[data-collection-holder] {
  749. > li {
  750. border: 1px solid $form-border;
  751. background: lighten($content-bg, 4%);
  752. color: lighten($content-text, 10%);
  753. .item-actions {
  754. color: darken($content-text, 10%);
  755. }
  756. }
  757. }
  758. .collection-sort {
  759. background: #e9e9e9;
  760. border-right: 1px solid #ddd;
  761. }
  762. }
  763. .form-fieldset {
  764. background-color: darken($content-bg, 1%);
  765. border: 1px solid $form-border;
  766. }
  767. .form-fieldset--label {
  768. background-color: darken($content-bg, 4%);
  769. &:hover,
  770. .form-fieldset input:checked + & {
  771. background-color: darken($content-bg, 6%);
  772. }
  773. }
  774. #admin-main {
  775. #admin-topbar {
  776. background: $content-tabs-bg;
  777. }
  778. .form-tabs {
  779. background: $content-tabs-bg;
  780. .tabs-nav {
  781. a {
  782. color: $content-tabs-text;
  783. &:hover {
  784. color: darken($content-tabs-text, 5%);
  785. background: darken($content-tabs-bg,5%);
  786. }
  787. &.active {
  788. background: $content-bg;
  789. color: $content-text;
  790. }
  791. }
  792. }
  793. &.subtle {
  794. background: $content-bg;
  795. .tabs-nav {
  796. background: linear-gradient(to bottom, rgba($content-bg,0), shade($content-bg,3%));
  797. }
  798. a {
  799. color: shade($content-text, 10%);
  800. border: 0 solid transparent;
  801. &:hover {
  802. color: shade($content-text, 20%);
  803. background: linear-gradient(to bottom, rgba($content-bg,0), shade($content-bg,7%));
  804. }
  805. border-bottom: 1px solid $form-border;
  806. &.active {
  807. border-top: 1px solid $form-border;
  808. border-left: 1px solid $form-border;
  809. border-right: 1px solid $form-border;
  810. border-bottom: 0;
  811. &:hover {
  812. background: $content-bg;
  813. }
  814. &:first-child {
  815. border-left: 0;
  816. }
  817. &:last-child {
  818. border-right: 0;
  819. }
  820. }
  821. }
  822. }
  823. .tabs-content {
  824. background: $content-bg;
  825. }
  826. }
  827. }
  828. .switch-grav {
  829. background-color: $form-field-bg;
  830. border: $form-border-width solid $form-border;
  831. label {
  832. color: $content-text;
  833. transition: background-color 0.5s ease;
  834. }
  835. &.switch-toggle input.highlight:checked + label {
  836. background: $button-bg;
  837. color: $button-text;
  838. }
  839. &.switch-toggle input:checked + label {
  840. color: $content-bg;
  841. background: $content-text;
  842. }
  843. }
  844. // Toaster
  845. .toast {
  846. background-color: #030303;
  847. }
  848. .toast-success {
  849. background-color: $update-bg;
  850. .button {
  851. background: lighten($update-bg, 5%);
  852. @include button-color(lighten($update-bg, 10%));
  853. }
  854. }
  855. .toast-error {
  856. background-color: $critical-bg;
  857. .button {
  858. background-color: darken($critical-bg, 10);
  859. @include button-color(darken($critical-bg, 20));
  860. }
  861. }
  862. .toast-info {
  863. background-color: $notice-bg;
  864. .button {
  865. background-color: darken($notice-bg, 10);
  866. @include button-color(darken($notice-bg, 20));
  867. }
  868. }
  869. // Info
  870. .info {
  871. background: $update-bg;
  872. color: $update-text;
  873. a {
  874. color: darken($update-text, 10%);
  875. &:hover {
  876. color: $update-text;
  877. }
  878. }
  879. a.button, span.button, button.button {
  880. @include button-color(shade($update-bg, 20%), $update-text, true);
  881. }
  882. }
  883. .info-reverse {
  884. color: $update-bg;
  885. }
  886. .notice, .note {
  887. background: $notice-bg;
  888. color: $notice-text;
  889. a {
  890. color: darken($notice-text, 10%);
  891. &:hover {
  892. color: $notice-text;
  893. }
  894. }
  895. a.button, span.button, button.button {
  896. @include button-color(shade($notice-bg, 20%), $notice-text, true);
  897. }
  898. }
  899. .notice-reverse, .note-reverse {
  900. color: $notice-bg;
  901. }
  902. .error, .warning {
  903. background: $critical-bg;
  904. color: $critical-text;
  905. a {
  906. color: darken($critical-text, 10%);
  907. &:hover {
  908. color: $critical-text;
  909. }
  910. }
  911. a.button, span.button, button.button {
  912. @include button-color(shade($critical-bg, 20%), $critical-text, true);
  913. }
  914. }
  915. .error-reverse, .warning-reverse {
  916. color: $critical-bg;
  917. }
  918. .primary-accent {
  919. background: darken($primary-accent-bg, 5%);
  920. color: $primary-accent-fg;
  921. .button-bar {
  922. background: darken($primary-accent-bg, 7%);
  923. }
  924. .button {
  925. @include button-color($primary-accent-bg, $primary-accent-fg);
  926. }
  927. }
  928. .secondary-accent {
  929. background: darken($secondary-accent-bg, 5%);
  930. color: $secondary-accent-fg;
  931. .button-bar {
  932. background: darken($secondary-accent-bg, 7%);
  933. }
  934. .button {
  935. @include button-color($secondary-accent-bg, $secondary-accent-fg);
  936. }
  937. }
  938. .card-item {
  939. border: 1px solid darken($content-bg, 5%);
  940. background: $white;
  941. .gpm-actions {
  942. background: darken($content-bg, 2%);
  943. }
  944. &.active-theme {
  945. border: 1px solid $notice-bg;
  946. .gpm-actions {
  947. background: $notice-bg;
  948. color: $notice-text;
  949. }
  950. }
  951. }
  952. .user-details {
  953. h2 {
  954. color: $content-header;
  955. span {
  956. color: $content-text;
  957. }
  958. }
  959. .gravatar {
  960. color: lighten($content-text,20%);
  961. a {
  962. color: $content-text !important;
  963. }
  964. }
  965. }
  966. #admin-main .grav-editor-toolbar .dropdown-menu {
  967. box-shadow: 0 3px 6px rgba(0, 0, 0, .075);
  968. border: 1px solid $form-border;
  969. background: lighten($content-bg, 5%);
  970. }
  971. #admin-main .grav-editor-toolbar {
  972. border: 1px solid $form-border;
  973. border-top-right-radius: $border-radius;
  974. border-top-left-radius: $border-radius;
  975. background: lighten($content-bg, 5%);
  976. ul {
  977. a {
  978. color: $content-text;
  979. &:hover, &:focus {
  980. background: darken($content-bg, 3%);
  981. color: $form-field-text;
  982. border-top: 1px solid $form-border;
  983. }
  984. }
  985. .editor-active {
  986. a {
  987. cursor: auto;
  988. background: white;
  989. border-top: 1px solid $form-border;
  990. border-left: 1px solid $form-border;
  991. border-right: 1px solid $form-border;
  992. &:hover {
  993. background: $white;
  994. border-top: 0;
  995. border-bottom: 1px solid $white;
  996. }
  997. }
  998. &:last-child a, &:last-child a:hover {
  999. border-right: 1px solid transparent;
  1000. }
  1001. }
  1002. .button-disabled a {
  1003. color: rgba($content-text, 0.5);
  1004. &:hover, &:focus {
  1005. background: lighten($content-bg, 5%);
  1006. color: $content-text;
  1007. border-left: 1px solid transparent;
  1008. border-right: 1px solid transparent;
  1009. }
  1010. }
  1011. }
  1012. }
  1013. #admin-main .grav-editor-hide-toolbar + div {
  1014. border: 1px solid $form-border;
  1015. }
  1016. .grav-editor-content, .grav-editor-preview {
  1017. border: 1px solid $form-border;
  1018. border-top: 0;
  1019. }
  1020. .grav-mdeditor-content {
  1021. border: 1px solid $form-border;
  1022. }
  1023. [data-mode=split] {
  1024. .grav-mdeditor-code {
  1025. border-right: 1px solid $form-border;
  1026. }
  1027. }
  1028. #admin-main {
  1029. .grav-editor-preview {
  1030. h1, h2, h3, h4, h5, h6 {
  1031. color: darken($content-text, 10%);
  1032. }
  1033. }
  1034. }
  1035. .primary-accent {
  1036. .ct-chart {
  1037. .ct-series {
  1038. &.ct-series-a {
  1039. .ct-bar {
  1040. stroke: rgba($primary-accent-fg, 0.85) !important;
  1041. }
  1042. .ct-slice-donut {
  1043. stroke: $primary-accent-fg !important;
  1044. }
  1045. }
  1046. &.ct-series-b {
  1047. .ct-slice-donut {
  1048. stroke: rgba($primary-accent-fg, 0.2) !important;
  1049. }
  1050. }
  1051. }
  1052. }
  1053. }
  1054. .secondary-accent {
  1055. .ct-chart {
  1056. .ct-series {
  1057. &.ct-series-a {
  1058. .ct-bar {
  1059. stroke: rgba($secondary-accent-fg, 0.85) !important;
  1060. }
  1061. .ct-slice-donut {
  1062. stroke: $secondary-accent-fg !important;
  1063. }
  1064. }
  1065. &.ct-series-b {
  1066. .ct-slice-donut {
  1067. stroke: rgba($secondary-accent-fg, 0.2) !important;
  1068. }
  1069. }
  1070. }
  1071. }
  1072. }
  1073. .dropzone {
  1074. background: $form-field-bg;
  1075. border: 1px $form-border solid;
  1076. &.dz-drag-hover {
  1077. border-color: darken($form-border, 10%);
  1078. background: rgba(0,0,0,0.04);
  1079. }
  1080. .dz-preview {
  1081. border:1px solid darken($content-bg,5%);
  1082. .dz-success-mark, .dz-error-mark {
  1083. color: $white;
  1084. }
  1085. .dz-success-mark {
  1086. background-color: lighten($button-bg,10%);
  1087. }
  1088. .dz-error-mark {
  1089. background-color: $critical-bg;
  1090. }
  1091. .dz-progress {
  1092. background: #d7d7d7;
  1093. .dz-upload {
  1094. background-color: lighten($button-bg,10%);
  1095. }
  1096. }
  1097. .dz-error-message {
  1098. background: lighten($content-bg,3%);
  1099. color: $critical-bg;
  1100. }
  1101. .dz-details {
  1102. background: lighten($content-bg,3%);
  1103. }
  1104. &:hover {
  1105. .dz-details {
  1106. box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.4);
  1107. }
  1108. }
  1109. .dz-remove, .dz-unset, .dz-view, .dz-insert, .dz-metadata {
  1110. background: darken($content-bg,5%);
  1111. &:hover {
  1112. &:after {
  1113. color: $content-link;
  1114. }
  1115. }
  1116. &:after {
  1117. color: $content-text;
  1118. }
  1119. }
  1120. .dz-remove {
  1121. &:hover {
  1122. &:after {
  1123. color: $critical-bg;
  1124. }
  1125. }
  1126. }
  1127. }
  1128. &.dz-clickable {
  1129. .dz-message, .dz-message span {
  1130. color: lighten($content-text,30%);
  1131. }
  1132. }
  1133. }
  1134. .gpm {
  1135. > table > tbody {
  1136. > tr {
  1137. border-bottom: 1px solid $underline;
  1138. &:hover {
  1139. background: lighten($content-bg, 2%);
  1140. }
  1141. }
  1142. }
  1143. .gpm-name {
  1144. color: lighten($content-text, 15%);
  1145. }
  1146. .gpm-version {
  1147. color: lighten($content-text, 10%);
  1148. }
  1149. .gpm-ribbon, .badge.update {
  1150. background: $update-bg;
  1151. a, & {
  1152. color: $update-text !important;
  1153. &:hover {
  1154. background: shade($update-bg, 15%);
  1155. }
  1156. }
  1157. }
  1158. .gpm-update {
  1159. .gpm-name {
  1160. color: $button-bg;
  1161. }
  1162. }
  1163. .gpm-item-info {
  1164. border-bottom: 3px solid $underline;
  1165. .gpm-item-icon {
  1166. color: darken($content-bg, 2%);
  1167. }
  1168. }
  1169. .gpm-actions {
  1170. .disabled {
  1171. color: lighten($content-text, 10%);
  1172. }
  1173. }
  1174. .gpm-testing {
  1175. background-color: $critical-bg;
  1176. color: $critical-text;
  1177. }
  1178. }
  1179. .pages-list {
  1180. border-top: 1px solid $underline;
  1181. .row {
  1182. border-bottom: 1px solid $underline;
  1183. &:hover {
  1184. background: lighten($content-bg, 2%);
  1185. }
  1186. p.page-route {
  1187. color: $content-text;
  1188. .spacer {
  1189. color: $content-text;
  1190. }
  1191. }
  1192. .badge.lang {
  1193. background-color: $content-tabs-bg;
  1194. color: $content-tabs-text;
  1195. }
  1196. .badge.lang.info {
  1197. background-color: $update-bg;
  1198. color: $update-text;
  1199. }
  1200. }
  1201. .page-home {
  1202. color: $subtle-text;
  1203. }
  1204. .page-info {
  1205. color: $subtle-text;
  1206. }
  1207. }
  1208. #admin-topbar {
  1209. #admin-lang-toggle {
  1210. z-index: 3;
  1211. button {
  1212. @include button-color($update-bg);
  1213. }
  1214. .dropdown-menu {
  1215. background: $update-bg;
  1216. button {
  1217. background: transparent;
  1218. color: $white;
  1219. }
  1220. }
  1221. }
  1222. .switch-grav {
  1223. background-color: lighten($content-tabs-bg,10%);
  1224. }
  1225. .switch-toggle {
  1226. input:checked + label {
  1227. color: $white;
  1228. }
  1229. input + label {
  1230. color: $content-tabs-text;
  1231. }
  1232. input.highlight:checked + label {
  1233. background: $button-bg;
  1234. }
  1235. }
  1236. }
  1237. body .selectize-dropdown .optgroup-header {
  1238. color: $black;
  1239. border-bottom: 1px solid #eee;
  1240. background-color: #fafafa;
  1241. }
  1242. body .bootstrap-datetimepicker-widget {
  1243. &.dropdown-menu {
  1244. border-color: $form-border;
  1245. }
  1246. table {
  1247. td span:hover, th:hover, td.day:hover {
  1248. background: darken($content-bg, 5%) !important;
  1249. }
  1250. .active {
  1251. color: $content-link !important;
  1252. &:hover {
  1253. color: darken($content-link, 10%);
  1254. }
  1255. }
  1256. }
  1257. }
  1258. #phpinfo {
  1259. th {
  1260. background: $form-field-bg;
  1261. }
  1262. td {
  1263. word-wrap: break-word;
  1264. &:first-child {
  1265. color: $button-bg;
  1266. }
  1267. }
  1268. }
  1269. .remodal {
  1270. background: $content-bg;
  1271. color: $content-text;
  1272. // box-shadow: 0 10px 20px rgba(0,0,0,0.5);
  1273. }
  1274. .remodal-close {
  1275. color: $content-text;
  1276. }
  1277. .remodal-close:hover,
  1278. .remodal-close:focus {
  1279. color: darken($content-text, 20%);
  1280. }
  1281. .gm-scrollbar .thumb {
  1282. @if (lightness($page-bg) < 50) {
  1283. background-color: rgba($white, 0.2);
  1284. &:hover, &:active {
  1285. background-color: rgba($white, 0.3);
  1286. }
  1287. } @else {
  1288. background-color: rgba($black, 0.2);
  1289. &:hover, &:active {
  1290. background-color: rgba($black, 0.3);
  1291. }
  1292. }
  1293. }
  1294. #admin-sidebar .gm-scrollbar .thumb {
  1295. @if (lightness($nav-bg) < 50) {
  1296. background-color: rgba($white, 0.2);
  1297. &:hover, &:active {
  1298. background-color: rgba($white, 0.3);
  1299. }
  1300. } @else {
  1301. background-color: rgba($black, 0.2);
  1302. &:hover, &:active {
  1303. background-color: rgba($black, 0.3);
  1304. }
  1305. }
  1306. }
  1307. .preview-wrapper {
  1308. iframe {
  1309. @if (lightness($page-bg) < 50) {
  1310. border: 1px solid lighten($page-bg, 3%)
  1311. } @else {
  1312. border: 1px solid darken($page-bg, 3%)
  1313. }
  1314. }
  1315. }
  1316. .permission-container {
  1317. overflow: hidden;
  1318. }
  1319. // Range-field
  1320. @import "template/modules/input-range";