cascade.scss 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598
  1. /*
  2. ATTENTION: This file is not compiled when building gluon.
  3. The compiled version is at ../files/lib/gluon/web/www/static/gluon/cascade.css
  4. Use sass like this to update it:
  5. sass --sourcemap=none -C -t compressed sass/cascade.scss files/lib/gluon/web/www/static/gluon/cascade.css
  6. When commiting changes to this file make sure to commit the respective
  7. changes to the compilid version within the same commit!
  8. */
  9. @charset "utf-8";
  10. $ffyellow: #ffb400;
  11. $ffmagenta: #dc0067;
  12. $ffzusatz: #009ee0;
  13. $red: #ee3300;
  14. @mixin button {
  15. &::-moz-focus-inner {
  16. padding: 0;
  17. border: 0;
  18. }
  19. display: inline-block;
  20. zoom: 1;
  21. line-height: normal;
  22. white-space: nowrap;
  23. vertical-align: baseline;
  24. text-align: center;
  25. cursor: pointer;
  26. user-select: none;
  27. font-size: 100%;
  28. padding: 0.5em 1em;
  29. color: rgba(0, 0, 0, 0.80);
  30. border: none rgba(0, 0, 0, 0);
  31. background-color: #E6E6E6;
  32. text-decoration: none;
  33. border-radius: 2px;
  34. /* Transitions */
  35. transition: 0.1s linear box-shadow;
  36. &:active {
  37. box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
  38. }
  39. &:focus {
  40. outline: 0;
  41. }
  42. &:hover, &:focus {
  43. background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
  44. }
  45. &[disabled] {
  46. border: none;
  47. background-image: none;
  48. opacity: 0.40;
  49. cursor: not-allowed;
  50. box-shadow: none;
  51. }
  52. }
  53. @mixin button-primary {
  54. background-color: $ffzusatz;
  55. color: #fff;
  56. }
  57. .lang_he {
  58. direction: RTL;
  59. unicode-bidi: embed;
  60. }
  61. .hidden {
  62. display: none;
  63. }
  64. html {
  65. min-height: 100%;
  66. height: auto;
  67. position:relative;
  68. }
  69. body, input, select, option {
  70. font-family: 'Open Sans', Arial, sans-serif;
  71. font-size: 12pt;
  72. }
  73. body {
  74. color: rgb(77, 78, 83);
  75. line-height: 1.5em;
  76. margin: 0;
  77. display: flex;
  78. flex-direction: column;
  79. min-height: 100vh;
  80. background-color: #f3f3f3;
  81. }
  82. a img {
  83. border: none;
  84. text-decoration: none;
  85. }
  86. .tabmenu1 {
  87. text-align: center;
  88. }
  89. ul.tabmenu {
  90. list-style: none;
  91. padding: 0;
  92. margin: 2em 0;
  93. display: inline-flex;
  94. }
  95. ul.tabmenu li {
  96. white-space: nowrap;
  97. margin: 0 0.5em;
  98. padding: 0;
  99. text-align: center;
  100. a {
  101. display: block;
  102. text-decoration: none;
  103. padding: 1em;
  104. margin: 0;
  105. color: #333;
  106. border-radius: 2em;
  107. &:hover {
  108. background: lighten($ffyellow, 35);
  109. }
  110. }
  111. &.active a {
  112. font-weight: bold;
  113. background: white;
  114. color: #333;
  115. }
  116. }
  117. abbr,
  118. acronym {
  119. font-style: normal;
  120. font-variant: normal;
  121. }
  122. abbr[title],
  123. acronym[title] {
  124. border-bottom: 1px dotted;
  125. cursor: help;
  126. }
  127. a:link abbr[title],
  128. a:visited abbr[title],
  129. a:link acronym[title],
  130. a:visited acronym[title] {
  131. cursor: pointer;
  132. }
  133. code {
  134. font-family: monospace;
  135. white-space: pre;
  136. }
  137. #maincontent ul {
  138. margin-left: 2em;
  139. }
  140. .clear {
  141. clear: both;
  142. }
  143. .error {
  144. color: #ff0000;
  145. background-color: white;
  146. }
  147. #menubar {
  148. display: flex;
  149. background: $ffmagenta;
  150. color: #ffffff;
  151. }
  152. #menubar a:link.topcat,
  153. #menubar a:visited.topcat {
  154. position: relative;
  155. display: block;
  156. padding: 0.5em;
  157. text-decoration: none;
  158. font-size: 80%;
  159. font-weight: normal;
  160. color: white;
  161. &:hover, &:focus {
  162. background: $ffyellow;
  163. color: black;
  164. }
  165. &.active {
  166. background: $ffyellow;
  167. color: black;
  168. font-weight: bold;
  169. }
  170. }
  171. #menubar div.hostinfo {
  172. position: relative;
  173. margin: 0;
  174. padding: 0.5em;
  175. flex: 1;
  176. font-weight: bold;
  177. font-size: 80%;
  178. }
  179. #menubar div.hostinfo a {
  180. &:link, &:visited {
  181. text-decoration: none;
  182. font-weight: bold;
  183. color: white;
  184. &:hover, &:focus {
  185. text-decoration: underline;
  186. }
  187. }
  188. }
  189. #topmenu {
  190. list-style: none;
  191. margin: 0;
  192. padding: 0;
  193. }
  194. #topmenu li {
  195. display: inline-block;
  196. }
  197. #maincontent {
  198. padding: 0 1em 2em;
  199. max-width: 60em;
  200. min-width: 40em;
  201. margin: 1em auto;
  202. }
  203. #maincontent p {
  204. margin-bottom: 1em;
  205. }
  206. .gluon-section {
  207. margin: 0;
  208. padding: 0;
  209. border: none;
  210. margin-bottom: 1.3em;
  211. }
  212. .gluon-section:last-child {
  213. margin-bottom: 0.7em;
  214. }
  215. .gluon-section legend {
  216. font-size: 1.4em;
  217. font-weight: bold;
  218. position: relative;
  219. padding: 0;
  220. margin-bottom: 0.5em;
  221. }
  222. .gluon-section h2 {
  223. margin: 0em 0 0.5em -0.5em !important;
  224. }
  225. .gluon-section h3 {
  226. text-decoration: none !important;
  227. font-weight: bold !important;
  228. color: #555555 !important;
  229. margin: 0.25em !important;
  230. font-size: 100% !important;
  231. }
  232. .gluon-section-descr {
  233. margin-bottom: 2em;
  234. }
  235. input:placeholder {
  236. color: #aaaaaa;
  237. }
  238. input:-webkit-input-placeholder {
  239. color: #aaaaaa;
  240. }
  241. input:-moz-placeholder {
  242. color: #aaaaaa;
  243. }
  244. input:-ms-input-placeholder {
  245. color: #aaaaaa;
  246. }
  247. input[type=checkbox] {
  248. display: none;
  249. & + label {
  250. display: inline-block;
  251. width: 1em;
  252. height: 1em;
  253. margin: 0;
  254. }
  255. &:checked + label:after {
  256. content: '✔';
  257. color: $ffmagenta;
  258. vertical-align: middle;
  259. position: absolute;
  260. top: 50%;
  261. left: 0;
  262. margin-top: -0.5em;
  263. width: 100%;
  264. text-align: center;
  265. font-size: 1.7em;
  266. }
  267. }
  268. input[type=submit],
  269. input[type=reset],
  270. input[type=image],
  271. input[type=button] {
  272. cursor: pointer;
  273. }
  274. select,
  275. input,
  276. textarea,
  277. input[type=checkbox] + label {
  278. color: darken($ffzusatz, 30);
  279. border: none;
  280. background: lighten($ffyellow, 30);
  281. border-radius: 3pt;
  282. padding: 0.5em;
  283. margin-top: 1px;
  284. margin-bottom: 2px;
  285. }
  286. input[type=image] {
  287. border: none;
  288. }
  289. select,
  290. input[type=text],
  291. input[type=password] {
  292. width: 20em;
  293. }
  294. input.gluon-button {
  295. @include button;
  296. margin-left: 0.5em;
  297. background-repeat: no-repeat;
  298. }
  299. input.gluon-button-reset {
  300. background-color: $red;
  301. color: #fff;
  302. }
  303. input.gluon-button-submit {
  304. @include button-primary;
  305. }
  306. .gluon-input-invalid {
  307. background: $red !important;
  308. color: white;
  309. }
  310. div.gluon-section-remove input {
  311. border-bottom: none;
  312. }
  313. textarea {
  314. margin-left: -1px;
  315. margin-bottom: 0.5em;
  316. }
  317. .gluon-section .gluon-rowstyle-1 h3 {
  318. background-color: #eeeeff;
  319. color: #555555;
  320. }
  321. .gluon-rowstyle-2 {
  322. color: #000000;
  323. }
  324. div.gluon-value {
  325. display: flex;
  326. flex-direction: row;
  327. margin-bottom: 0.5em;
  328. }
  329. .gluon-section-node .gluon-value:last-child {
  330. margin-bottom: 0;
  331. }
  332. .gluon-value-title {
  333. flex: 2;
  334. text-align: right;
  335. padding-right: 1em;
  336. font-weight: bold;
  337. }
  338. div.gluon-value-field {
  339. flex: 3;
  340. position: relative;
  341. input, select, input + label {
  342. position: relative;
  343. top: -0.39em;
  344. }
  345. }
  346. div.gluon-value-field-long {
  347. flex: 10;
  348. position: relative;
  349. input, select, input + label {
  350. position: relative;
  351. top: -0.39em;
  352. }
  353. }
  354. div.gluon-value-field-long-after {
  355. flex: 2;
  356. }
  357. div.gluon-value-description {
  358. font-size: 8pt;
  359. }
  360. div.gluon-section-create {
  361. clear: left;
  362. white-space: nowrap;
  363. vertical-align: top;
  364. }
  365. div.gluon-section-create .gluon-button {
  366. margin: 0.25em;
  367. }
  368. input.gluon-section-create-name {
  369. margin-right: -0.25em;
  370. }
  371. div.gluon-map-descr {
  372. margin-bottom: 1em;
  373. }
  374. .gluon-map-descr:empty, .gluon-section-descr:empty {
  375. display: none;
  376. }
  377. .gluon-map-descr, .gluon-section-descr, .gluon-page-actions {
  378. padding: 1em;
  379. background: #ececec;
  380. }
  381. .gluon-page-actions {
  382. text-align: right;
  383. display: flex;
  384. flex-flow: row-reverse;
  385. }
  386. div.gluon-optionals {
  387. padding: 0.25em;
  388. border-bottom: 1px dotted #bbbbbb;
  389. }
  390. div.gluon-section-remove {
  391. float: right;
  392. }
  393. .gluon-section-node {
  394. clear: both;
  395. position: relative;
  396. border: none;
  397. }
  398. .gluon-section-node-tabbed {
  399. border-top-left-radius: 0;
  400. }
  401. div.gluon-error {
  402. font-size: 95%;
  403. font-weight: bold;
  404. color: #ff0000;
  405. background-color: #ffffff;
  406. }
  407. .gluon-value-error input,
  408. .gluon-value-error select {
  409. background-color: #ffcccc;
  410. }
  411. .gluon-section-error {
  412. color: red;
  413. background-color: white;
  414. font-size: 95%;
  415. border: 1px dotted red;
  416. margin: 3px;
  417. padding: 3px;
  418. }
  419. .gluon-value-field var {
  420. color: #2222FF;
  421. }
  422. .gluon-add:after, .gluon-remove:after {
  423. cursor: pointer;
  424. display: inline-block;
  425. text-align: center;
  426. vertical-align: middle;
  427. font-size: 180%;
  428. width: 1.2em;
  429. height: 1em;
  430. }
  431. .gluon-add {
  432. color: #008000;
  433. position: relative;
  434. left: 21em;
  435. input + & {
  436. left: 0;
  437. top: -0.35em;
  438. }
  439. &:first-child {
  440. top: 0.04em;
  441. left: -0.08em;
  442. }
  443. &:after {
  444. content: '+';
  445. }
  446. }
  447. .gluon-remove {
  448. color: #800000;
  449. position: relative;
  450. top: -0.42em;
  451. &:after {
  452. content: '–';
  453. }
  454. }
  455. .left {
  456. text-align: left !important;
  457. }
  458. .right {
  459. text-align: right !important;
  460. }
  461. .inline {
  462. display: inline;
  463. }
  464. .error500 {
  465. border: 1px dotted #ff0000;
  466. background-color: #ffffff;
  467. color: #000000;
  468. padding: 0.5em;
  469. }
  470. .errorbox {
  471. border: 1px solid #FF0000;
  472. background-color: #FFCCCC;
  473. padding: 5px;
  474. margin-bottom: 5px;
  475. }
  476. .errorbox a {
  477. color: #000000 !important;
  478. }
  479. .the-key {
  480. text-align: left;
  481. font-size: 1.4em;
  482. background: lighten($ffyellow, 35);
  483. border: 3pt dashed $ffmagenta;
  484. margin-bottom: 0.5em;
  485. padding: 0.5em
  486. }