You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

765 lines
8.8 KiB

6 years ago
5 years ago
  1. html,
  2. body {
  3. /*font-family: 'Open Sans', serif;*/
  4. font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  5. background: #F9F9F9;
  6. }
  7. footer {
  8. background-color: #2a2e2f !important;
  9. padding: 2rem 1.5rem 3rem !important;
  10. }
  11. .footer a {
  12. color: white;
  13. }
  14. .footer h2 {
  15. margin-bottom: 10px;
  16. }
  17. .footer p,
  18. strong {
  19. color: lemonchiffon;
  20. }
  21. .navbar {
  22. background-color: #2a2e2f;
  23. }
  24. .navbar.has-shadow {
  25. box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  26. }
  27. .navbar-burger,
  28. .navbar-item {
  29. color: white;
  30. }
  31. a.navbar-burger:hover {
  32. background-color: #fafafa;
  33. color: #3273dc;
  34. }
  35. .navbar-menu.is-active .navbar-item,
  36. .navbar-menu.is-active .navbar-link {
  37. color: #4a4a4a;
  38. }
  39. .navbar-menu.is-active .navbar-dropdown .navbar-item {
  40. color: #fafafa;
  41. }
  42. .navbar-menu.is-active .navbar-dropdown .navbar-item:hover,
  43. .navbar-menu.is-active .navbar-item:hover,
  44. .navbar-menu.is-active .navbar-link:hover {
  45. color: #3273dc;
  46. }
  47. .topNav {
  48. border-top: 5px solid #3498DB;
  49. }
  50. .topNav .container {
  51. border-bottom: 1px solid #E6EAEE;
  52. }
  53. .container .columns {
  54. margin: 2rem 0;
  55. }
  56. aside.menu {
  57. padding-top: 3rem;
  58. }
  59. aside.menu .menu-list {
  60. line-height: 1.5;
  61. }
  62. aside.menu .menu-label {
  63. padding-left: 10px;
  64. font-weight: 700;
  65. }
  66. .button.is-primary.is-alt {
  67. background: #00c6ff;
  68. background: -webkit-linear-gradient(to bottom, #0072ff, #00c6ff);
  69. background: linear-gradient(to bottom, #0072ff, #00c6ff);
  70. font-weight: 700;
  71. font-size: 14px;
  72. height: 3rem;
  73. line-height: 2.8;
  74. }
  75. .media-left img {
  76. border-radius: 50%;
  77. }
  78. .media-content p {
  79. font-size: 14px;
  80. line-height: 2.3;
  81. font-weight: 700;
  82. color: #8F99A3;
  83. }
  84. article.post {
  85. margin: 1rem;
  86. padding-bottom: 1rem;
  87. border-bottom: 1px solid #E6EAEE;
  88. }
  89. article.post:last-child {
  90. padding-bottom: 0;
  91. border-bottom: none;
  92. }
  93. .menu-list li {
  94. padding: 5px;
  95. }
  96. .tag:not(body).is-grey {
  97. background-color: #eee;
  98. color: #666;
  99. }
  100. .button-margin {
  101. width: 5cm; /* Set a width for alignment */
  102. margin-bottom: 15px;
  103. }
  104. p {
  105. font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif;
  106. }
  107. .tabs-details {
  108. margin-right: 1px;
  109. }
  110. .project-image {
  111. background-image: url('/static/assets/images/cat.png');
  112. background-size: cover;
  113. background-repeat: no-repeat;
  114. background-position: center center;
  115. }
  116. .is-shady {
  117. animation: flyintoright .4s backwards;
  118. background: #fff;
  119. box-shadow: rgba(0, 0, 0, .1) 0 1px 0;
  120. border-radius: 4px;
  121. /*display: inline-block;*/
  122. /*margin: 10px;*/
  123. position: relative;
  124. transition: all .2s ease-in-out;
  125. }
  126. .is-shady:hover {
  127. box-shadow: 0 10px 16px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .19);
  128. }
  129. .menu-list a.active {
  130. background-color: #3273dc;
  131. color: #fff;
  132. }
  133. .select-height {
  134. height: 100% !important;
  135. max-height: 200px !important;
  136. }
  137. .pagination-link,
  138. .pagination-next,
  139. .pagination-previous {
  140. background-color: white;
  141. margin-top: 20px;
  142. }
  143. .card-header-title {
  144. padding: 1.5rem;
  145. }
  146. .navbar-link::after {
  147. border-color: white;
  148. }
  149. .navbar-link {
  150. color: white;
  151. }
  152. .navbar-dropdown {
  153. background-color: #2a2e2f;
  154. border-top: 0;
  155. }
  156. .navbar-dropdown .navbar-item {
  157. color: white;
  158. }
  159. .has-background-royalblue {
  160. background-color:royalblue !important;
  161. }
  162. /* Padding Zero */
  163. .p0 {
  164. padding: 0!important
  165. }
  166. /* Padding Top */
  167. .pt10 {
  168. padding-top: 10px!important
  169. }
  170. .pt15 {
  171. padding-top: 15px!important
  172. }
  173. .pt20 {
  174. padding-top: 20px!important
  175. }
  176. .pt30 {
  177. padding-top: 30px!important
  178. }
  179. .pt40 {
  180. padding-top: 40px!important
  181. }
  182. .pt50 {
  183. padding-top: 50px!important
  184. }
  185. .pt60 {
  186. padding-top: 60px!important
  187. }
  188. .pt70 {
  189. padding-top: 70px!important
  190. }
  191. .pt80 {
  192. padding-top: 80px!important
  193. }
  194. .pt90 {
  195. padding-top: 90px!important
  196. }
  197. .pt100 {
  198. padding-top: 100px!important
  199. }
  200. .pt110 {
  201. padding-top: 110px!important
  202. }
  203. .pt120 {
  204. padding-top: 120px!important
  205. }
  206. .pt130 {
  207. padding-top: 130px!important
  208. }
  209. .pt140 {
  210. padding-top: 140px!important
  211. }
  212. /* Padding Bottom */
  213. .pb0 {
  214. padding-bottom: 0px!important
  215. }
  216. .pb10 {
  217. padding-bottom: 10px!important
  218. }
  219. .pb15 {
  220. padding-bottom: 15px!important
  221. }
  222. .pb20 {
  223. padding-bottom: 20px!important
  224. }
  225. .pb30 {
  226. padding-bottom: 30px!important
  227. }
  228. .pb40 {
  229. padding-bottom: 40px!important
  230. }
  231. .pb50 {
  232. padding-bottom: 50px!important
  233. }
  234. .pb60 {
  235. padding-bottom: 60px!important
  236. }
  237. .pb70 {
  238. padding-bottom: 70px!important
  239. }
  240. .pb80 {
  241. padding-bottom: 80px!important
  242. }
  243. .pb90 {
  244. padding-bottom: 90px!important
  245. }
  246. .pb100 {
  247. padding-bottom: 100px!important
  248. }
  249. .pb110 {
  250. padding-bottom: 110px!important
  251. }
  252. .pb120 {
  253. padding-bottom: 120px!important
  254. }
  255. .pb130 {
  256. padding-bottom: 130px!important
  257. }
  258. .pb140 {
  259. padding-bottom: 140px!important
  260. }
  261. /* Padding Left */
  262. .pl0 {
  263. padding-left: 0px!important
  264. }
  265. .pl3 {
  266. padding-left: 3px!important
  267. }
  268. .pl5 {
  269. padding-left: 5px!important
  270. }
  271. .pl10 {
  272. padding-left: 10px!important
  273. }
  274. .pl20 {
  275. padding-left: 20px!important
  276. }
  277. .pl30 {
  278. padding-left: 30px;
  279. }
  280. .pl40 {
  281. padding-left: 40px;
  282. }
  283. .pl50 {
  284. padding-left: 50px;
  285. }
  286. .pl60 {
  287. padding-left: 60px;
  288. }
  289. .pl70 {
  290. padding-left: 70px;
  291. }
  292. .pl80 {
  293. padding-left: 80px;
  294. }
  295. .pl90 {
  296. padding-left: 90px;
  297. }
  298. .pl100 {
  299. padding-left: 100px;
  300. }
  301. .pl15r {
  302. padding-left: 1.5rem !important;
  303. }
  304. /* Padding Right */
  305. .pr0 {
  306. padding-right: 0px!important
  307. }
  308. .pr5 {
  309. padding-right: 5px!important
  310. }
  311. .pr10 {
  312. padding-right: 10px!important
  313. }
  314. .pr20 {
  315. padding-right: 20px!important
  316. }
  317. .pr30 {
  318. padding-right: 30px!important
  319. }
  320. .pr40 {
  321. padding-right: 40px;
  322. }
  323. .pr50 {
  324. padding-right: 50px;
  325. }
  326. .pr60 {
  327. padding-right: 60px;
  328. }
  329. .pr70 {
  330. padding-right: 70px;
  331. }
  332. .pr80 {
  333. padding-right: 80px;
  334. }
  335. .pr90 {
  336. padding-right: 90px;
  337. }
  338. .pr100 {
  339. padding-right: 100px;
  340. }
  341. .pr110 {
  342. padding-right: 110px;
  343. }
  344. .pr120 {
  345. padding-right: 120px;
  346. }
  347. @media (min-width:1200px) {
  348. .pl-lg-50 {
  349. padding-left: 50px;
  350. }
  351. .pl-lg-80 {
  352. padding-left: 80px;
  353. }
  354. }
  355. @media (min-width:992px) {
  356. .pt-md-50 {
  357. padding-top: 50px;
  358. }
  359. }
  360. .pbrem075 {
  361. padding-bottom: 0.75rem;
  362. }
  363. .tweaked-margin {
  364. margin-left: -0.4rem !important;
  365. margin-right: 0.3rem !important;
  366. }
  367. /* Margin Auto */
  368. .mr-auto {
  369. margin: auto;
  370. float: none;
  371. }
  372. /* Margin Top */
  373. .mt0 {
  374. margin-top: 0!important
  375. }
  376. .mt5 {
  377. margin-top: 5px!important
  378. }
  379. .mt10 {
  380. margin-top: 10px!important
  381. }
  382. .mt20 {
  383. margin-top: 20px!important
  384. }
  385. .mt30 {
  386. margin-top: 30px!important
  387. }
  388. .mt40 {
  389. margin-top: 40px!important
  390. }
  391. .mt50 {
  392. margin-top: 50px!important
  393. }
  394. .mt60 {
  395. margin-top: 60px!important
  396. }
  397. .mt70 {
  398. margin-top: 70px!important
  399. }
  400. .mt80 {
  401. margin-top: 80px!important
  402. }
  403. .mt90 {
  404. margin-top: 90px!important
  405. }
  406. .mt100 {
  407. margin-top: 100px!important
  408. }
  409. .mt110 {
  410. margin-top: 110px!important
  411. }
  412. .mt120 {
  413. margin-top: 120px!important
  414. }
  415. /* Margin Bottom */
  416. .mb0 {
  417. margin-bottom: 0!important
  418. }
  419. .mb5 {
  420. margin-bottom: 5px!important
  421. }
  422. .mb10 {
  423. margin-bottom: 10px!important
  424. }
  425. .mb15 {
  426. margin-bottom: 15px!important
  427. }
  428. .mb20 {
  429. margin-bottom: 20px!important
  430. }
  431. .mb30 {
  432. margin-bottom: 30px!important
  433. }
  434. .mb40 {
  435. margin-bottom: 40px!important
  436. }
  437. .mb50 {
  438. margin-bottom: 50px
  439. }
  440. .mb60 {
  441. margin-bottom: 60px
  442. }
  443. .mb70 {
  444. margin-bottom: 70px
  445. }
  446. .mb80 {
  447. margin-bottom: 80px
  448. }
  449. .mb90 {
  450. margin-bottom: 90px
  451. }
  452. .mb100 {
  453. margin-bottom: 100px
  454. }
  455. .mb110 {
  456. margin-bottom: 110px
  457. }
  458. .mb120 {
  459. margin-bottom: 120px
  460. }
  461. /* Margin Left */
  462. .ml0 {
  463. margin-left: 0!important;
  464. }
  465. .ml15 {
  466. margin-left: 5px;
  467. }
  468. .ml10 {
  469. margin-left: 10px;
  470. }
  471. .ml20 {
  472. margin-left: 20px;
  473. }
  474. .ml30 {
  475. margin-left: 30px;
  476. }
  477. .ml40 {
  478. margin-left: 40px;
  479. }
  480. .ml50 {
  481. margin-left: 50px;
  482. }
  483. .ml60 {
  484. margin-left: 60px;
  485. }
  486. .ml70 {
  487. margin-left: 70px;
  488. }
  489. .ml80 {
  490. margin-left: 80px;
  491. }
  492. .ml90 {
  493. margin-left: 90px;
  494. }
  495. .ml100 {
  496. margin-left: 100px;
  497. }
  498. .ml110 {
  499. margin-left: 110px;
  500. }
  501. /* Margin Right */
  502. .mr0 {
  503. margin-right: 0!important
  504. }
  505. .mr5 {
  506. margin-right: 5px!important
  507. }
  508. .mr10 {
  509. margin-right: 10px!important
  510. }
  511. .mr20 {
  512. margin-right: 20px!important
  513. }
  514. .mr30 {
  515. margin-right: 30px!important
  516. }
  517. .mr40 {
  518. margin-right: 40px!important
  519. }
  520. .mr50 {
  521. margin-right: 50px!important
  522. }
  523. .mr60 {
  524. margin-right: 60px!important
  525. }
  526. .mr70 {
  527. margin-right: 70px!important
  528. }
  529. .mr80 {
  530. margin-right: 80px!important
  531. }
  532. .mr90 {
  533. margin-right: 90px!important
  534. }
  535. .mr100 {
  536. margin-right: 100px;
  537. }
  538. .mr110 {
  539. margin-right: 110px;
  540. }
  541. .dataset-item__main {
  542. display: inline-block;
  543. -webkit-box-flex: 2;
  544. -ms-flex: 2 2 66%;
  545. flex: 2 2 66%;
  546. overflow: hidden;
  547. margin: 0 8px 0 8px;
  548. }
  549. .dataset-item__main-title {
  550. font-size: 16px;
  551. font-weight: 500;
  552. line-height: 22px;
  553. }
  554. .dataset-item__main-subtitle {
  555. color: rgba(0,0,0,.55);
  556. font-size: 12px;
  557. font-weight: 400;
  558. line-height: 22px;
  559. overflow: hidden;
  560. text-overflow: ellipsis;
  561. white-space: nowrap;
  562. }
  563. .dataset-item__main-info {
  564. color: rgba(0,0,0,.4);
  565. font-size: 12px;
  566. font-weight: 400;
  567. line-height: 22px;
  568. }
  569. .is-vertical {
  570. vertical-align:middle !important;
  571. }
  572. .project-thumbnail {
  573. border-radius: 4px;
  574. }
  575. .thumbnail-wrapper {
  576. width:66px;
  577. height:66px;
  578. display:inline-block;
  579. }
  580. [v-cloak] { display: none; }