screwdriver.css 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170
  1. @charset "UTF-8";
  2. /*=== FONTS */
  3. @font-face {
  4. font-family: "OpenSans";
  5. src: url("../fonts/openSans.woff") format("woff");
  6. }
  7. /*=== GENERAL */
  8. /*============*/
  9. html, body {
  10. height: 100%;
  11. font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif;
  12. background: #fafafa;
  13. font-size: 92%;
  14. }
  15. /*=== Links */
  16. a {
  17. color: #D18114;
  18. outline: none;
  19. }
  20. /*=== Forms */
  21. .form-group{
  22. width: 100%;
  23. float: left;
  24. height: auto;
  25. display: inline-block;
  26. }
  27. legend {
  28. margin: 20px 0 5px;
  29. padding: 5px 0;
  30. border-bottom: 1px solid #ddd;
  31. font-size: 1.4em;
  32. }
  33. label {
  34. min-height: 25px;
  35. padding: 5px 0;
  36. cursor: pointer;
  37. }
  38. textarea {
  39. width: 360px;
  40. height: 100px;
  41. }
  42. input, select, textarea {
  43. min-height: 25px;
  44. padding: 5px;
  45. background: #fff;
  46. border: 1px solid #ccc;
  47. border-radius: 3px;
  48. color: #222;
  49. line-height: 25px;
  50. vertical-align: middle;
  51. box-shadow: 0 2px 2px #eee inset, 0 1px #fff;
  52. }
  53. option {
  54. padding: 0 .5em;
  55. }
  56. input:focus, select:focus, textarea:focus {
  57. color: #0F0F0F;
  58. box-shadow: 0 0 3px #E7AB34;
  59. border: solid 1px #E7AB34;
  60. }
  61. input:invalid, select:invalid {
  62. border-color: #f00;
  63. box-shadow: 0 0 2px 2px #fdd inset;
  64. }
  65. input:disabled, select:disabled {
  66. background: #eee;
  67. }
  68. input.extend {
  69. transition: width 200ms linear;
  70. -moz-transition: width 200ms linear;
  71. -webkit-transition: width 200ms linear;
  72. -o-transition: width 200ms linear;
  73. -ms-transition: width 200ms linear;
  74. }
  75. /*=== Tables */
  76. table {
  77. border-collapse: collapse;
  78. }
  79. tr, th, td {
  80. padding: 0.5em;
  81. border: 1px solid #ddd;
  82. }
  83. th {
  84. background: #f6f6f6;
  85. }
  86. form td,
  87. form th {
  88. font-weight: normal;
  89. text-align: center;
  90. }
  91. /*=== COMPONENTS */
  92. /*===============*/
  93. /*=== Forms */
  94. .form-group.form-actions {
  95. padding: 5px 0;
  96. background: #f4f4f4;
  97. border-top: 1px solid #ddd;
  98. }
  99. .form-group.form-actions .btn {
  100. margin: 0 10px;
  101. border-radius: 4px;
  102. box-shadow:0 1px rgba(255,255,255,0.08) inset;
  103. }
  104. .form-group .group-name {
  105. padding: 10px 0;
  106. text-align: right;
  107. }
  108. .form-group .group-controls {
  109. min-height: 25px;
  110. padding: 5px 0;
  111. }
  112. .form-group table {
  113. margin: 10px 0 0 220px;
  114. }
  115. /*=== Buttons */
  116. form#add_rss .stick input, .dropdown-menu select{
  117. background:#393939;
  118. box-shadow: 0 2px 2px #171717 inset,0 1px rgba(255,255,255,0.08);
  119. border-left:solid 1px #171717;
  120. border-top:solid 1px #171717;
  121. border-bottom:solid 1px #171717;
  122. border-right:none;
  123. color:#fff;
  124. }
  125. form#add_rss .stick .btn{
  126. background:linear-gradient(180deg, #222 0%, #171717 100%) #171717;
  127. background: -webkit-linear-gradient(top, #222 0%, #171717 100%);
  128. box-shadow:0 1px rgba(255,255,255,0.08), 0px 1px rgba(255, 255, 255, 0.08) inset;
  129. border-right:solid 1px #171717;
  130. border-top:solid 1px #171717;
  131. border-bottom:solid 1px #171717;
  132. border-left:none;
  133. }
  134. form#add_rss .stick .btn.dropdown-toggle{
  135. border-right:solid 1px #171717;
  136. border-top:solid 1px #171717;
  137. border-bottom:solid 1px #171717;
  138. border-left:solid 1px #171717;
  139. }
  140. .stick {
  141. vertical-align: middle;
  142. font-size: 0;
  143. }
  144. .stick input,
  145. .stick .btn {
  146. border-radius: 0;
  147. }
  148. .stick .btn:first-child,.stick input:first-child {
  149. border-radius: 6px 0 0 6px;
  150. }
  151. .stick .btn-important:first-child {
  152. }
  153. .stick .btn:last-child, .stick input:last-child {
  154. border-radius: 0 6px 6px 0;
  155. }
  156. .stick .btn + .btn,
  157. .stick .btn + input,
  158. .stick .btn + .dropdown > .btn,
  159. .stick input + .btn,
  160. .stick input + input,
  161. .stick input + .dropdown > .btn,
  162. .stick .dropdown + .btn,
  163. .stick .dropdown + input,
  164. .stick .dropdown + .dropdown > .btn {
  165. border-left: none;
  166. }
  167. .stick .btn + .dropdown > .btn {
  168. border-left: none;
  169. border-radius: 0 3px 3px 0;
  170. }
  171. .btn {
  172. display: inline-block;
  173. min-height: 37px;
  174. min-width: 15px;
  175. margin: 0;
  176. padding: 5px 10px;
  177. color:#222;
  178. border: solid 1px #ccc;
  179. border-radius: 4px;
  180. background: linear-gradient(0deg, #EDE7DE 0%, #FFF 100%) #EDE7DE;
  181. background: -webkit-linear-gradient(bottom, #EDE7DE 0%, #FFF 100%);
  182. text-shadow: 0px -1px rgba(255,255,255,0.08);
  183. font-size: 0.9rem;
  184. vertical-align: middle;
  185. cursor: pointer;
  186. overflow: hidden;
  187. }
  188. a.btn {
  189. min-height: 25px;
  190. line-height: 25px;
  191. }
  192. .btn:hover {
  193. text-shadow: 0 0 2px #fff;
  194. text-decoration:none;
  195. }
  196. .btn.active,.btn:active,.dropdown-target:target ~ .btn.dropdown-toggle {
  197. background: linear-gradient(180deg, #EDE7DE 0%, #FFF 100%) #EDE7DE;
  198. background: -webkit-linear-gradient(top, #EDE7DE 0%, #FFF 100%);
  199. }
  200. #loginButton.btn{
  201. border:none;
  202. box-shadow: 0px 1px rgba(255, 255, 255, 0.08) inset,0 -1px #171717,0px 1px rgba(255, 255, 255, 0.08);
  203. }
  204. .nav_menu .btn.active, .nav_menu .btn:active, .nav_menu .dropdown-target:target ~ .btn.dropdown-toggle{
  205. box-shadow: 0px 2px #E2972A;
  206. border-radius: 0;
  207. background:transparent;
  208. }
  209. .nav_menu .btn {
  210. border: 0;
  211. background:transparent;
  212. }
  213. .read_all {
  214. color:#222;
  215. }
  216. .btn.dropdown-toggle[href="#dropdown-configure"]{
  217. background: linear-gradient(0deg, #EDE7DE 0%, #FFF 100%) #EDE7DE;
  218. background: -webkit-linear-gradient(bottom, #EDE7DE 0%, #FFF 100%);
  219. border-radius: 4px;
  220. border: solid 1px #ccc;
  221. box-shadow: 0 1px #fff;
  222. }
  223. .btn.dropdown-toggle:active {
  224. background:transparent;
  225. }
  226. .btn-important {
  227. background: linear-gradient(180deg, #E4992C 0%, #D18114 100%) #E4992C;
  228. background: -webkit-linear-gradient(top, #E4992C 0%, #D18114 100%);
  229. color: #FFF;
  230. box-shadow: 0 1px rgba(255,255,255,0.08) inset;
  231. border-radius: 4px;
  232. text-shadow: 0px -1px rgba(255,255,255,0.08);
  233. font-weight: normal;
  234. }
  235. .btn-important:hover {
  236. }
  237. .btn-important:active {
  238. background: linear-gradient(0deg, #E4992C 0%, #D18114 100%) #E4992C;
  239. background: -webkit-linear-gradient(bottom, #E4992C 0%, #D18114 100%);
  240. }
  241. .btn-attention {
  242. background: #E95B57;
  243. background: linear-gradient(to bottom, #E95B57, #BD362F);
  244. background: -webkit-linear-gradient(top, #E95B57 0%, #BD362F 100%);
  245. color: #fff;
  246. border: 1px solid #C44742;
  247. text-shadow: 0px -1px 0px #666;
  248. }
  249. .btn-attention:hover {
  250. background: linear-gradient(to bottom, #D14641, #BD362F);
  251. background: -webkit-linear-gradient(top, #D14641 0%, #BD362F 100%);
  252. }
  253. .btn-attention:active {
  254. background: #BD362F;
  255. box-shadow: none;
  256. }
  257. .btn[type="reset"]{
  258. color: #fff;
  259. background:linear-gradient(180deg, #222 0%, #171717 100%) #171717;
  260. background: -webkit-linear-gradient(top, #222 0%, #171717 100%);
  261. box-shadow:0 -1px rgba(255,255,255,0.08) inset;
  262. }
  263. /*=== Navigation */
  264. .nav-list .nav-header,
  265. .nav-list .item {
  266. height: 2.5em;
  267. line-height: 2.5em;
  268. font-size: 0.9rem;
  269. }
  270. .nav-list .item:hover {
  271. text-shadow: 0 0 2px rgba(255,255,255,0.28);
  272. color:#fff;
  273. }
  274. .nav-list .item.active {
  275. background: linear-gradient(180deg, #222 0%, #171717 100%) repeat scroll 0% 0% #171717;
  276. background: -webkit-linear-gradient(180deg, #222 0%, #171717 100%);
  277. border-width: medium medium 1px;
  278. border-style: none none solid;
  279. border-color: -moz-use-text-color -moz-use-text-color #171717;
  280. box-shadow: -1px 2px 2px #171717, 0px 1px rgba(255, 255, 255, 0.08) inset;
  281. margin: 0;
  282. }
  283. .nav-list .item.active a {
  284. color: #D18114;
  285. }
  286. .nav-list .disable {
  287. color: #aaa;
  288. background: #fafafa;
  289. text-align: center;
  290. }
  291. .nav-list .item > a {
  292. padding: 0 10px;
  293. color:#ccc;
  294. }
  295. .nav-list a:hover {
  296. text-decoration: none;
  297. }
  298. .nav-list .item.empty a {
  299. color: #f39c12;
  300. }
  301. .nav-list .item.active.empty a {
  302. color: #fff;
  303. background: linear-gradient(180deg, #E4992C 0%, #D18114 100%) #E4992C;
  304. background: -webkit-linear-gradient(180deg, #E4992C 0%, #D18114 100%);
  305. }
  306. .nav-list .item.error a {
  307. color: #BD362F;
  308. }
  309. .nav-list .item.active.error a {
  310. color: #fff;
  311. background: #BD362F;
  312. }
  313. .nav-list .nav-header {
  314. padding: 0 10px;
  315. color: #222;
  316. background: transparent;
  317. }
  318. .nav-list .nav-form {
  319. padding: 3px;
  320. text-align: center;
  321. }
  322. .nav-head {
  323. margin: 0;
  324. background: linear-gradient(0deg, #EDE7DE 0%, #FFF 100%) #EDE7DE;
  325. background: -webkit-linear-gradient(bottom, #EDE7DE 0%, #FFF 100%);
  326. text-align: right;
  327. }
  328. .nav-head .item {
  329. padding: 5px 10px;
  330. font-size: 0.9rem;
  331. line-height: 1.5rem;
  332. }
  333. /*=== Horizontal-list */
  334. .horizontal-list {
  335. margin: 0;
  336. padding: 0;
  337. }
  338. .horizontal-list .item {
  339. vertical-align: middle;
  340. }
  341. /*=== Dropdown */
  342. .dropdown-menu {
  343. margin: 5px 0 0;
  344. padding: 5px 0;
  345. border: 1px solid #171717;
  346. border-radius: 4px;
  347. box-shadow: 0 0 3px #000;
  348. font-size: 0.8rem;
  349. text-align: left;
  350. background: #222;
  351. }
  352. .dropdown-menu:after {
  353. content: "";
  354. position: absolute;
  355. top: -6px;
  356. right: 13px;
  357. width: 10px;
  358. height: 10px;
  359. background: #222;
  360. border-top: 1px solid #171717;
  361. border-left: 1px solid #171717;
  362. z-index: -10;
  363. transform: rotate(45deg);
  364. -moz-transform: rotate(45deg);
  365. -webkit-transform: rotate(45deg);
  366. -ms-transform: rotate(45deg);
  367. }
  368. .dropdown-header {
  369. display:none;
  370. }
  371. .dropdown-menu > .item {
  372. }
  373. .dropdown-menu > .item > a {
  374. padding: 0 25px;
  375. line-height: 2.5em;
  376. color:#ccc;
  377. }
  378. .dropdown-menu > .item > span {
  379. padding: 0 25px;
  380. line-height: 2em;
  381. }
  382. .dropdown-menu > .item:hover {
  383. background: #171717;
  384. color: #fff;
  385. }
  386. .dropdown-menu > .item[aria-checked="true"] > a:before {
  387. font-weight: bold;
  388. margin: 0 0 0 -14px;
  389. }
  390. .dropdown-menu > .item:hover > a {
  391. color: #fff;
  392. text-decoration: none;
  393. }
  394. .dropdown-menu .input select,
  395. .dropdown-menu .input input {
  396. margin: 0 auto 5px;
  397. padding: 2px 5px;
  398. border-radius: 3px;
  399. }
  400. .separator {
  401. margin: 5px 0;
  402. border-bottom: 1px solid #171717;
  403. box-shadow: 0 1px rgba(255,255,255,0.08);
  404. }
  405. /*=== Alerts */
  406. .alert {
  407. margin: 15px auto;
  408. padding: 10px 15px;
  409. background: #f4f4f4;
  410. border: 1px solid #ccc;
  411. border-right: 1px solid #aaa;
  412. border-bottom: 1px solid #aaa;
  413. border-radius: 5px;
  414. color: #aaa;
  415. text-shadow: 0 0 1px #eee;
  416. font-size: 0.9em;
  417. }
  418. .alert-head {
  419. font-size: 1.15em;
  420. }
  421. .alert > a {
  422. color: inherit;
  423. text-decoration: underline;
  424. }
  425. .alert-warn {
  426. background: #ffe;
  427. border: 1px solid #eeb;
  428. color: #c95;
  429. }
  430. .alert-success {
  431. background: #dfd;
  432. border: 1px solid #cec;
  433. color: #484;
  434. }
  435. .alert-error {
  436. background: #fdd;
  437. border: 1px solid #ecc;
  438. color: #844;
  439. }
  440. /*=== Pagination */
  441. .pagination {
  442. background: #fafafa;
  443. text-align: center;
  444. color: #333;
  445. font-size: 0.8em;
  446. }
  447. .content .pagination {
  448. margin: 0;
  449. padding: 0;
  450. }
  451. .pagination .item.pager-current {
  452. font-weight: bold;
  453. font-size: 1.5em;
  454. }
  455. .pagination .item a {
  456. display: block;
  457. color: #333;
  458. font-style: italic;
  459. line-height: 3em;
  460. text-decoration: none;
  461. }
  462. .pagination .item a:hover {
  463. background: #ddd;
  464. }
  465. .pagination:first-child .item {
  466. border-bottom: 1px solid #aaa;
  467. }
  468. .pagination:last-child .item {
  469. border-top: 1px solid #ddd;
  470. }
  471. .pagination .loading,
  472. .pagination a:hover.loading {
  473. background: url("loader.gif") center center no-repeat #fff;
  474. font-size: 0;
  475. }
  476. /*=== STRUCTURE */
  477. /*===============*/
  478. /*=== Header */
  479. .header {
  480. height: 55px;
  481. background: linear-gradient(0deg, #EDE7DE 0%, #FFF 100%) #EDE7DE;
  482. background: -webkit-linear-gradient(bottom, #EDE7DE 0%, #FFF 100%);
  483. }
  484. .header > .item {
  485. padding: 0;
  486. vertical-align: middle;
  487. text-align: center;
  488. }
  489. .header > .item.title .logo {
  490. display: none;
  491. }
  492. .header > .item.title{
  493. width: 250px;
  494. }
  495. .header > .item.title h1 {
  496. margin: 0.5em 0;
  497. }
  498. .header > .item.title h1 a {
  499. text-decoration: none;
  500. font-size: 38px;
  501. color:#ccc;
  502. text-shadow: 0 1px #fff, 0 -1px rgba(162, 162, 162, 1);
  503. }
  504. .header > .item.search input {
  505. width: 230px;
  506. }
  507. .header .item.search input:focus {
  508. width: 350px;
  509. }
  510. /*=== Body */
  511. #global {
  512. background:#EDE7DE;
  513. height: calc(100% - 85px);
  514. }
  515. .aside {
  516. border-radius: 0px 12px 0px 0px;
  517. box-shadow: 0px -1px #FFF, 0 2px 2px #171717 inset;
  518. border-top: 1px solid #CCC;
  519. background: #222;
  520. width: 235px;
  521. }
  522. .aside.aside_flux {
  523. padding: 10px 0 50px;
  524. background: #222;
  525. }
  526. /*=== Aside main page (categories) */
  527. .categories {
  528. text-align: center;
  529. }
  530. .categories .btn-important {
  531. border: none;
  532. }
  533. .category {
  534. width: 235px;
  535. margin: 10px auto 0;
  536. text-align: left;
  537. }
  538. #aside_flux ul.feeds{
  539. box-shadow: 0 4px 4px #171717 inset, 0 1px rgba(255,255,255,0.08),0 -1px rgba(255,255,255,0.08);
  540. }
  541. ul.feeds{
  542. background:#171717;
  543. padding:8px 0;
  544. box-shadow: 0 4px 4px #EDE7DE inset;
  545. }
  546. ul.feeds.active{
  547. box-shadow: 0 0 0 #171717 inset, 0 -2px 2px #111 inset,0 1px rgba(255,255,255,0.08),0 -1px rgba(255,255,255,0);
  548. }
  549. .category.stick.active{
  550. background: linear-gradient(180deg, #222 0%, #171717 100%) #171717;
  551. background: -webkit-linear-gradient(top, #222 0%, #171717 100%);
  552. box-shadow: 0px 1px #171717, 0px 1px rgba(255, 255, 255, 0.08) inset;
  553. }
  554. .category .btn {
  555. color: #fff;
  556. border: none;
  557. background: transparent;
  558. }
  559. .category .btn:first-child {
  560. position: relative;
  561. width: 213px;
  562. background: transparent;
  563. }
  564. .category.stick .btn:first-child {
  565. width: 176px;
  566. }
  567. .category .btn:first-child:not([data-unread="0"]):after {
  568. position: absolute;
  569. top: 3px; right: 3px;
  570. padding: 1px 5px;
  571. background: transparent;
  572. color: #fff;
  573. text-shadow: 0 1px rgba(255,255,255,0.08);
  574. }
  575. /*=== Aside main page (feeds) */
  576. .categories .feeds .item.active {
  577. background: linear-gradient(180deg, #222 0%, #171717 100%) #171717;
  578. background: -webkit-linear-gradient(top, #222 0%, #171717 100%);
  579. border-radius: 4px;
  580. margin: 0px 8px;
  581. box-shadow: 0px 1px #171717, 0px 1px rgba(255, 255, 255, 0.08) inset, 0 2px 2px #111;
  582. }
  583. .categories .feeds .item.active .feed {
  584. color: #fff;
  585. }
  586. .categories .feeds .item.empty .feed {
  587. color: #e67e22;
  588. }
  589. .categories .feeds .item.empty.active {
  590. background: #e67e22;
  591. }
  592. .categories .feeds .item.empty.active .feed {
  593. color: #fff;
  594. }
  595. .categories .feeds .item.error .feed {
  596. color: #BD362F;
  597. }
  598. .categories .feeds .item .feed {
  599. margin: 0;
  600. width: 165px;
  601. line-height: 3em;
  602. font-size: 0.8em;
  603. text-align: left;
  604. text-decoration: none;
  605. color:#ccc;
  606. }
  607. .categories .feeds .feed:not([data-unread="0"]) {
  608. font-weight: bold;
  609. }
  610. .categories .feeds .dropdown-menu:after {
  611. left: 2px;
  612. }
  613. .categories .feeds .item .dropdown-target:target ~ .dropdown-toggle > .icon,
  614. .categories .feeds .item:hover .dropdown-toggle > .icon,
  615. .categories .feeds .item.active .dropdown-toggle > .icon {
  616. background-color: transparent;
  617. border-radius: 3px;
  618. vertical-align: middle;
  619. }
  620. /*=== Configuration pages */
  621. .post {
  622. padding: 10px 50px;
  623. font-size: 0.9em;
  624. }
  625. .post form {
  626. margin: 10px 0;
  627. }
  628. .post.content {
  629. max-width: 550px;
  630. }
  631. /*=== Prompt (centered) */
  632. .prompt {
  633. text-align: center;
  634. color: #FFF;
  635. background: #222;
  636. padding: 14px 0px;
  637. box-shadow: 0px -1px #FFF, 0px 1px #FFF, 0px 2px 2px #171717 inset, 0px -2px 2px #171717 inset;
  638. text-shadow: 0 -1px #171717, 0 1px rgba(255,255,255,0.08);
  639. }
  640. .prompt label {
  641. text-align: left;
  642. }
  643. .prompt form {
  644. margin: 10px auto 20px auto;
  645. width: 180px;
  646. }
  647. .prompt input {
  648. margin: 5px auto;
  649. width: 100%;
  650. }
  651. .prompt p {
  652. margin: 20px 0;
  653. }
  654. .prompt input#username,.prompt input#passwordPlain{
  655. border:none;
  656. box-shadow: 0px 1px rgba(255, 255, 255, 0.08) inset,0 -1px #171717,0px 1px rgba(255, 255, 255, 0.08);
  657. background:#EDE7DE;
  658. }
  659. .prompt input#username:focus,.prompt input#passwordPlain:focus{
  660. border: solid 1px #E7AB34;
  661. box-shadow: 0 0 3px #E7AB34;
  662. }
  663. /*=== New article notification */
  664. #new-article {
  665. background: #0084CC;
  666. text-align: center;
  667. font-size: 0.9em;
  668. }
  669. #new-article:hover {
  670. background: #0066CC;
  671. }
  672. #new-article > a {
  673. line-height: 3em;
  674. color: #fff;
  675. font-weight: bold;
  676. }
  677. #new-article > a:hover {
  678. text-decoration: none;
  679. }
  680. /*=== Day indication */
  681. .day {
  682. padding: 0 10px;
  683. font-style:italic;
  684. line-height: 3em;
  685. background: #fff;
  686. text-align: center;
  687. }
  688. #new-article + .day {
  689. border-top: none;
  690. }
  691. .day .name {
  692. display: none;
  693. }
  694. /*=== Index menu */
  695. .nav_menu {
  696. background: #EDE7DE;
  697. border-bottom: 1px solid #ccc;
  698. box-shadow:0 -1px #fff inset;
  699. text-align: center;
  700. padding: 5px 0;
  701. }
  702. /*=== Feed articles */
  703. .flux_content {
  704. background: #FFF;
  705. border-radius: 10px;
  706. }
  707. .flux {
  708. background: #EDE7DE;
  709. }
  710. .flux:hover {
  711. background: #F9F7F4;
  712. }
  713. .flux:not(.current):hover .item.title {
  714. background: #F9F7F4;
  715. }
  716. .flux.current .flux .item.title a {
  717. text-shadow:0 0 2px #ccc;
  718. }
  719. .flux.not_read:not(.current):hover .item.title {
  720. opacity:0.85;
  721. }
  722. .flux.favorite {
  723. background: #FFF6DA;
  724. }
  725. .flux.favorite:not(.current):hover{
  726. background: #F9F7F4;
  727. }
  728. .flux.favorite:not(.current):hover .item.title {
  729. background: #F9F7F4;
  730. }
  731. .flux.current {
  732. background: linear-gradient(0deg, #EDE7DE 0%, #FFF 100%) #EDE7DE;
  733. background: -webkit-linear-gradient(bottom, #EDE7DE 0%, #FFF 100%);
  734. box-shadow: 0 -1px #fff inset, 0 2px #ccc;
  735. border-radius: 10px;
  736. margin: 3px 6px;
  737. }
  738. .flux .item.title {
  739. opacity: 0.35;
  740. }
  741. .flux.favorite .item.title {
  742. opacity: 1;
  743. }
  744. .flux.not_read .item.title {
  745. opacity: 1;
  746. }
  747. .flux.current .item.title a {
  748. color: #0f0f0f;
  749. }
  750. .flux .item.title a {
  751. color: #333;
  752. }
  753. .flux_header {
  754. border-top: 1px solid #ddd;
  755. font-size: 0.8rem;
  756. cursor: pointer;
  757. }
  758. .flux_header .title {
  759. font-size: 0.9rem;
  760. }
  761. .flux .website .favicon {
  762. padding: 5px;
  763. }
  764. .flux .date {
  765. color: #666;
  766. font-size: 0.7rem;
  767. }
  768. .flux .bottom {
  769. font-size: 0.8rem;
  770. text-align: center;
  771. }
  772. /*=== Content of feed articles */
  773. .content {
  774. padding: 20px 10px;
  775. }
  776. .content > h1.title > a {
  777. color: #000;
  778. }
  779. .content hr {
  780. margin: 30px 10px;
  781. height: 1px;
  782. background: #ddd;
  783. border: 0;
  784. box-shadow: 0 2px 5px #ccc;
  785. }
  786. .content pre {
  787. margin: 10px auto;
  788. padding: 10px 20px;
  789. overflow: auto;
  790. background: #222;
  791. color: #fff;
  792. font-size: 0.9rem;
  793. border-radius: 3px;
  794. }
  795. .content code {
  796. padding: 2px 5px;
  797. color: #dd1144;
  798. background: #fafafa;
  799. border: 1px solid #eee;
  800. border-radius: 3px;
  801. }
  802. .content pre code {
  803. background: transparent;
  804. color: #fff;
  805. border: none;
  806. }
  807. .content blockquote {
  808. display: block;
  809. margin: 0;
  810. padding: 5px 20px;
  811. border-top: 1px solid #ddd;
  812. border-bottom: 1px solid #ddd;
  813. background: #fafafa;
  814. color: #333;
  815. }
  816. .content blockquote p {
  817. margin: 0;
  818. }
  819. /*=== Notification and actualize notification */
  820. .notification {
  821. padding: 0 0 0 5px;
  822. text-align: center;
  823. background:#222;
  824. border: none;
  825. border-radius: 0 0 12px 12px;
  826. box-shadow: 0px 0px 4px rgba(0,0,0,0.45), 0 -1px rgba(255,255,255,0.08) inset, 0 2px 2px #171717 inset;
  827. color:#fff;
  828. font-weight: bold;
  829. font-size: 0.9em;
  830. line-height: 3em;
  831. position:absolute;
  832. top:0;
  833. z-index: 10;
  834. vertical-align: middle;
  835. }
  836. .notification.good {
  837. color: #c95;
  838. }
  839. .notification.bad {
  840. background: #fdd;
  841. color: #844;
  842. }
  843. .notification a.close {
  844. padding: 0 15px;
  845. line-height: 3em;
  846. }
  847. .notification#actualizeProgress {
  848. line-height: 2em;
  849. }
  850. /*=== "Load more" part */
  851. #bigMarkAsRead {
  852. text-align: center;
  853. text-decoration: none;
  854. text-shadow: 0 -1px 0 #aaa;
  855. color: #666;
  856. background: #EDE7DE;
  857. }
  858. #bigMarkAsRead:hover {
  859. color: #000;
  860. background: #EDE7DE;
  861. background: radial-gradient(circle at 50% -25% , #ccc 0%, #EDE7DE 50%);
  862. }
  863. #bigMarkAsRead:hover .bigTick {
  864. text-shadow: 0 0 10px #666;
  865. }
  866. /*=== Navigation menu (for articles) */
  867. #nav_entries {
  868. background: linear-gradient(180deg, #222 0%, #171717 100%) #222;
  869. background: -webkit-linear-gradient(top, #222 0%, #171717 100%);
  870. border-top: 1px solid #171717;
  871. text-align: center;
  872. line-height: 3em;
  873. table-layout: fixed;
  874. box-shadow: 0 1px rgba(255,255,255,0.08) inset, 0 -2px 2px #171717;
  875. width:235px;
  876. }
  877. /*=== READER VIEW */
  878. /*================*/
  879. #stream.reader .flux {
  880. padding: 0 0 50px;
  881. border: none;
  882. background: #f0f0f0;
  883. color: #333;
  884. }
  885. #stream.reader .flux .author {
  886. margin: 0 0 10px;
  887. font-size: 90%;
  888. color: #666;
  889. }
  890. /*=== GLOBAL VIEW */
  891. /*================*/
  892. #stream.global{
  893. background:#222;
  894. padding: 24px 0;
  895. box-shadow: 0 1px #fff, 0 -2px 2px #171717 inset, 0 2px 2px #171717 inset;
  896. }
  897. #stream.global .box-category {
  898. background: #fff;
  899. border-radius: 4px 4px 0 0;
  900. text-align: left;
  901. box-shadow: 0 0 4px #171717;
  902. overflow:hidden;
  903. }
  904. #stream.global .category {
  905. margin: 0;
  906. }
  907. #stream.global .btn {
  908. width: auto;
  909. height: 2em;
  910. margin: 0;
  911. padding: 0 10px;
  912. background: linear-gradient(0deg, #EDE7DE 0%, #fff 100%) #171717;
  913. background: -webkit-linear-gradient(bottom, #EDE7DE 0%, #fff 100%);
  914. border: none;
  915. box-shadow: 0px -1px #fff inset,0 -2px #ccc inset;
  916. border-radius: none;
  917. line-height: 2em;
  918. font-size: 1.2rem;
  919. color:#888;
  920. text-shadow:0 1px #ccc;
  921. }
  922. #stream.global .btn:not([data-unread="0"]) {
  923. color: #222;
  924. font-weight: bold;
  925. }
  926. #stream.global .btn:first-child:not([data-unread="0"]):after {
  927. top: 0;
  928. right: 5px;
  929. border: 0;
  930. background: none;
  931. color: #222;
  932. font-weight: bold;
  933. box-shadow: none;
  934. text-shadow: none;
  935. }
  936. #stream.global .box-category .feeds {
  937. max-height: 250px;
  938. color:#222;
  939. background:#EDE7DE;
  940. }
  941. #stream.global .box-category .feeds .item {
  942. padding: 2px 10px;
  943. font-size: 0.9rem;
  944. overflow:hidden;
  945. }
  946. #stream.global .box-category .feed {
  947. color:#222;
  948. }
  949. /*=== PANEL */
  950. /*===========*/
  951. #panel {
  952. box-shadow: 0px 0px 4px #000;
  953. border-radius: 8px;
  954. }
  955. /*=== DIVERS */
  956. /*===========*/
  957. .aside.aside_feed .nav-form input,.aside.aside_feed .nav-form select {
  958. width: 130px;
  959. }
  960. .aside.aside_feed .nav-form .dropdown .dropdown-menu {
  961. right: -20px;
  962. }
  963. .aside.aside_feed .nav-form .dropdown .dropdown-menu:after {
  964. right: 33px;
  965. }
  966. /*=== STATISTICS */
  967. /*===============*/
  968. .stat {
  969. margin: 10px 0 20px;
  970. }
  971. .stat th,
  972. .stat td,
  973. .stat tr {
  974. border: none;
  975. }
  976. .stat > table td,
  977. .stat > table th {
  978. border-bottom: 1px solid #ccc;
  979. background: rgba(255,255,255,0.38);
  980. box-shadow: 0 1px #fff;
  981. text-align: center;
  982. }
  983. /*=== LOGS */
  984. /*=========*/
  985. .logs {
  986. border: 1px solid #aaa;
  987. border-radius: 5px;
  988. overflow: hidden;
  989. }
  990. .log {
  991. padding: 5px 10px;
  992. background: #fafafa;
  993. color: #333;
  994. font-size: 0.8rem;
  995. }
  996. .log+.log {
  997. border-top: 1px solid #aaa;
  998. }
  999. .log .date {
  1000. display: block;
  1001. font-weight: bold;
  1002. }
  1003. .log.error {
  1004. background: #fdd;
  1005. color: #844;
  1006. }
  1007. .log.warning {
  1008. background: #ffe;
  1009. color: #c95;
  1010. }
  1011. .log.notice {
  1012. background: #f4f4f4;
  1013. color: #aaa;
  1014. }
  1015. .log.debug {
  1016. background: #333;
  1017. color: #eee;
  1018. }
  1019. /*=== MOBILE */
  1020. /*===========*/
  1021. @media screen and (max-width: 840px) {
  1022. .header {
  1023. display: table;
  1024. }
  1025. .nav-login {
  1026. display: none;
  1027. }
  1028. .aside {
  1029. width: 0;
  1030. border-top: none;
  1031. box-shadow: 3px 0 3px #000;
  1032. transition: width 200ms linear;
  1033. -moz-transition: width 200ms linear;
  1034. -webkit-transition: width 200ms linear;
  1035. -o-transition: width 200ms linear;
  1036. -ms-transition: width 200ms linear;
  1037. }
  1038. .aside:target {
  1039. width: 235px;
  1040. }
  1041. .aside .toggle_aside,
  1042. #panel .close {
  1043. position: absolute;
  1044. display: block;
  1045. top: 0; right: 0;
  1046. width: 30px;
  1047. height: 30px;
  1048. line-height: 30px;
  1049. text-align: center;
  1050. background: #171717;
  1051. box-shadow: 0 1px rgba(255,255,255,0.08);
  1052. border-radius: 0 8px 0 8px;
  1053. }
  1054. .aside .btn-important {
  1055. display: inline-block;
  1056. margin: 20px 0 0;
  1057. }
  1058. .nav_menu .btn {
  1059. margin: 5px 10px;
  1060. }
  1061. .nav_menu .stick {
  1062. margin: 0 10px;
  1063. }
  1064. .nav_menu .stick .btn {
  1065. margin: 5px 0;
  1066. }
  1067. .nav_menu .search {
  1068. display: inline-block;
  1069. max-width: 97%;
  1070. }
  1071. .nav_menu .search input {
  1072. max-width: 97%;
  1073. width: 90px;
  1074. }
  1075. .nav_menu .search input:focus {
  1076. width: 400px;
  1077. }
  1078. .day .name {
  1079. display: none;
  1080. }
  1081. .pagination {
  1082. margin: 0 0 3.5em;
  1083. }
  1084. .notification a.close {
  1085. display: block;
  1086. left: 0;
  1087. background: transparent;
  1088. }
  1089. .notification a.close:hover {
  1090. opacity: 0.5;
  1091. }
  1092. .notification a.close .icon {
  1093. display: none;
  1094. }
  1095. .nav_menu .search {
  1096. display: none;
  1097. }
  1098. #nav_entries {
  1099. width: 100%;
  1100. }
  1101. }
  1102. @media (max-width: 700px) {
  1103. .header{
  1104. display: none;
  1105. }
  1106. .nav-login {
  1107. display: inline-block;
  1108. width: 100%;
  1109. }
  1110. .nav_menu .search {
  1111. display: inline-block;
  1112. }
  1113. .aside .btn-important {
  1114. display: none;
  1115. }
  1116. }