THIS IS A TEST INSTANCE ONLY! REPOSITORIES CAN BE DELETED AT ANY TIME!

test
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.

1414 lines
33KB

  1. /**
  2. * Bootstrap theme: Yobi UI
  3. *
  4. * Override bootstrap::
  5. * 기본 글자 크기 12px로 설정
  6. * (bootstrap 2.3.1 : 14px,
  7. * bootstrap 2.2.1 : 12px)
  8. */
  9. body { font-size:13px; }
  10. label, input, button, select, textarea { font-size:12px; }
  11. select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
  12. input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"],
  13. input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"],
  14. .uneditable-input { font-size:12px; }
  15. .btn-group > .btn,
  16. .btn-group > .dropdown-menu,
  17. .btn-group > .popover {
  18. font-size: 12px;
  19. }
  20. .blind {
  21. overflow: hidden;
  22. position: absolute;
  23. top: 0;
  24. left: 0;
  25. width: 0;
  26. height: 0;
  27. font-size: 0;
  28. line-height: 0;
  29. }
  30. /* box-shadow, border-radius */
  31. form { margin:0 0 2px; }
  32. textarea, input[type="text"], input[type="password"], input[type="datetime"],
  33. input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
  34. input[type="week"], input[type="number"], input[type="email"], input[type="url"],
  35. input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
  36. .box-shadow(none);
  37. .border-radius(2px);
  38. &:focus {
  39. .box-shadow(none);
  40. border-color:@primary !important;
  41. }
  42. }
  43. /** popover **/
  44. .popover {
  45. line-height:1;
  46. .border-radius(2px);
  47. .box-shadow(-2px 2px 1px rgba(0,0,0,0.1));
  48. }
  49. .popover-content {
  50. padding:9px 10px;
  51. line-height:120%;
  52. }
  53. /** yobi.ui.Dropdown **/
  54. .dropdown-toggle {
  55. display:inline-block;
  56. position:relative;
  57. margin-bottom: 0;
  58. margin-left: .3em;
  59. padding:0px; padding-left:12px;
  60. text-align : left;
  61. vertical-align: middle;
  62. white-space : nowrap;
  63. color: #333;
  64. background : @yobi-btn-default;
  65. text-shadow: none;
  66. line-height: 20px;
  67. font-size: 14px;
  68. outline:0 none;
  69. border: 1px solid rgba(0,0,0,.15);
  70. .border-radius(3px) !important;
  71. .box-shadow(0 1px 0 rgba(0,0,0,.05));
  72. .transition(all 0.3s ease);
  73. &.small .d-label { width: 29px; }
  74. &.medium .d-label { width: 58px; }
  75. &.large .d-label { width: 116px; }
  76. &.auto {
  77. width:100%;
  78. padding-right:28px;
  79. .d-label {
  80. width: 100%;
  81. display:block;
  82. .text-overflow;
  83. }
  84. .d-caret {
  85. position:absolute;
  86. top:0;
  87. right:0;
  88. bottom:0;
  89. background:inherit;
  90. }
  91. }
  92. .d-label {
  93. float:left; margin:0;
  94. padding:4px 0; padding-right:9px;
  95. width:116px; overflow:hidden;
  96. .inline-block;
  97. }
  98. .d-caret {
  99. float:right; margin:0;
  100. padding:4px 9px;
  101. .caret {
  102. border-top-color:#4f4f4f;
  103. }
  104. &.nlb { border-left:none; }
  105. }
  106. &.blue {
  107. background:@blue2; border-bottom:1px solid rgba(0,0,0,0.25);
  108. .d-caret .caret { border-top-color:#fff; }
  109. }
  110. &.orange {
  111. background:@orange; border-bottom:1px solid rgba(0,0,0,0.25);
  112. .d-caret .caret { border-top-color:#fff; }
  113. }
  114. }
  115. @-moz-document url-prefix() {
  116. *>.dropdown-toggle {
  117. padding:3px 0 !important;
  118. }
  119. }
  120. .btn-group.open .btn.dropdown-toggle {
  121. background:darken(@white, 5%);
  122. &.blue { background:darken(@blue2, 5%); }
  123. &.orange { background:darken(@orange, 5%); }
  124. }
  125. .dropdown-menu {
  126. padding:0; width:inherit; overflow:hidden;
  127. border:1px solid rgba(0,0,0,0.2);
  128. .box-shadow(-2px 2px 1px rgba(0,0,0,0.1));
  129. .border-radius(2px);
  130. }
  131. .dropdown-menu li {
  132. margin-bottom:1px;
  133. &:hover {
  134. .usf-group .loginid { color:#fff; }
  135. }
  136. }
  137. .dropdown-menu li>a:hover,.dropdown-menu li>a:focus,.dropdown-submenu:hover>a {
  138. color:#fff;
  139. cursor:pointer;
  140. background:@secondary !important;
  141. filter:none; /* for IE */
  142. /*.linear-gradient(@darkgray, darken(@darkgray, 10%));*/
  143. }
  144. .dropdown-menu .active > a, .dropdown-menu .active > a:hover {
  145. color:#fff;
  146. background:@secondary !important;
  147. filter:none; /* for IE */
  148. /*.linear-gradient(@darkgray, darken(@darkgray, 10%));*/
  149. }
  150. .dropdown-menu .disabled span {
  151. padding-left:10px;
  152. font-weight:bold; color:@darkgray;
  153. }
  154. .dropdown-menu li:last-of-type.divider { display:none; }
  155. .btn-group.auto {
  156. width:100%;
  157. }
  158. .usf-group {
  159. .avatar-wrap { margin-right:5px; }
  160. .name { margin-right:2px; }
  161. .loginid { color:#999; }
  162. }
  163. /** buttons **/
  164. .icon-refresh {
  165. cursor: pointer;
  166. }
  167. .btn.disabled, .btn[disabled] {
  168. opacity:0.35;
  169. filter:alpha(opacity=35);
  170. .caret { border-top-color:#aaa; }
  171. }
  172. .nbtn:disabled{
  173. background-color: #dadada !important;
  174. color:gray;
  175. opacity:0.35;
  176. filter:alpha(opacity=35);
  177. }
  178. .nbtn {
  179. text-align :center;
  180. font-weight:bold;
  181. font-size: 11px;
  182. line-height: 18px;
  183. border:0; padding:0;
  184. margin-right:5px;
  185. white-space:nowrap;
  186. color: @white;
  187. background-color: #707070;
  188. text-shadow:none;
  189. .box-shadow(inset 0px -1px 1px rgba(0,0,0,0.3));
  190. .border-radius(2px);
  191. .inline-block;
  192. > i.ico { margin-right: 5px; }
  193. &:hover {
  194. background-color: darken(#707070, 10%);
  195. text-decoration: none;
  196. }
  197. &.last { margin-right:0; }
  198. &.active {
  199. .box-shadow(inset 1px 1px 4px rgba(0, 0, 0, 0.25));
  200. }
  201. &.blue {
  202. background-color: @blue2; /*#56B5D9*/
  203. &:hover { background-color: darken(@blue2, 10%); color: #00ddff; }
  204. .num-badge { background-color:#fff; color:@blue2; }
  205. }
  206. &.orange {
  207. background-color: @orange;
  208. &:hover { background-color: darken(@orange, 10%); color: #f7ffe2; }
  209. }
  210. &.purple {
  211. background-color: @purple;
  212. &:hover { background-color: darken(@purple, 10%); }
  213. }
  214. &.green {
  215. background-color: @green;
  216. &:hover { background-color: darken(@green, 10%); color: #00ddff; }
  217. }
  218. &.red {
  219. background-color:#e45642;
  220. &:hover { background-color: darken(#e45642, 10%); color: #fff; }
  221. }
  222. &.mint {
  223. background-color:#83d6df;
  224. &:hover { background-color: darken(#83d6df, 10%); color: #fff; }
  225. }
  226. &.black {
  227. background-color: #222;
  228. &:hover { background-color : #000; }
  229. }
  230. &.white {
  231. color: #222;
  232. background-color: @white;
  233. &:hover { background-color: darken(@white, 10%); color:@primary; }
  234. }
  235. }
  236. a.nbtn, div.nbtn, span.nbtn, p.nbtn {
  237. vertical-align:middle;
  238. &.small { padding: 3px 10px; }
  239. &.medium { padding: 6px 20px; }
  240. &.large { padding: 9px 30px; font-size:15px; }
  241. }
  242. button.nbtn {
  243. &.square {
  244. padding: 1px 12px;
  245. height: 24px;
  246. line-height: 1;
  247. margin-top: 4px;
  248. margin-right: 4px;
  249. }
  250. &.small { padding:1px 10px; height:24px; line-height:1; }
  251. &.medium { padding:4px 20px; height:30px; line-height:1; }
  252. &.large { padding:8px 30px; height:36px; line-height:1; font-size:15px; }
  253. }
  254. .nbtn-group {
  255. .nbtn {
  256. .border-radius(0px);
  257. margin:0;
  258. }
  259. &:first-child {
  260. border-top-left-radius: 2px;
  261. border-bottom-left-radius: 2px;
  262. }
  263. &:last-child {
  264. border-top-right-radius: 2px;
  265. border-bottom-right-radius:2px;
  266. }
  267. }
  268. /* fileUpload button **/
  269. .fake-file-wrap {
  270. position: relative; display:block; clear:both;
  271. overflow: hidden; cursor:pointer;
  272. &:hover {
  273. background:darken(@white, 10%);
  274. }
  275. .file {
  276. position: absolute; z-index:2; cursor:pointer;
  277. top:0; left: 5px; /*-15px;*/
  278. min-width:100px; width:100%;
  279. .opacity(0);
  280. }
  281. }
  282. /** issue label **/
  283. .issue-label {
  284. background:#f9f9f9;
  285. font-size:11px;
  286. text-shadow:none;
  287. line-height: 12px;
  288. -webkit-transition-duration:0.25s;
  289. &:last-of-type { margin:0; }
  290. .delete {
  291. display:inline;/*none;*/
  292. margin-left:8px; padding:8px 4px;
  293. font-size:20px; vertical-align:middle;
  294. -webkit-transition-duration:inherit;
  295. &:hover { background:rgba(0,0,0,.2); }
  296. }
  297. /*&.editable .delete { display:inline; }*/
  298. &.list-label {
  299. padding:2px 3px;
  300. font-weight:normal;
  301. }
  302. &.active {
  303. .border-radius(1px);
  304. &.active-white { color:#fff; }
  305. &.active-dimgray { color:#696969; }
  306. }
  307. &:hover {
  308. .opacity(70);
  309. }
  310. &.static.active { border-left:initial !important; }
  311. &.static:hover { .opacity(100); }
  312. }
  313. span.issue-label {
  314. display: inline-block;
  315. overflow: hidden;
  316. line-height: 20px;
  317. margin-right: 5px;
  318. padding: 2px 6px;
  319. &:hover {
  320. background: #DFDFDF;
  321. .opacity(100);
  322. }
  323. }
  324. .dropdown-menu .issue-label:hover { .opacity(100); }
  325. /** project label */
  326. .project-label {
  327. border:none; padding:1px 5px; display:inline-block;
  328. font-size:11px; font-weight:bold;
  329. color:#fff; white-space:nowrap; vertical-align:middle;
  330. background:#aaa;/*d9d9d9;*/
  331. .border-radius(2px);
  332. /*.box-shadow(inset 0px -2px 2px rgba(255,255,255,0.4));*/
  333. /*&.language { background:#ffc48c; }
  334. &.license { background:#ff9f80; }*/
  335. }
  336. /* */
  337. /** input **/
  338. /* 검색버튼 스타일 */
  339. .btn-search {
  340. width : 88px;
  341. margin : 5px 0 0;
  342. padding: 4px 0;
  343. border : 1px solid #a9a9a9;
  344. color : @black;
  345. text-align : center;
  346. font-weight: bold;
  347. font-size : 11px;
  348. .border-radius(0 2px 2px 0);
  349. &:hover { color:@link-hover-color; }
  350. }
  351. /** 화면 중앙의 프로젝트 내 검색 폼 **/
  352. .form-search {
  353. .text {
  354. width: 360px;
  355. margin: 5px 0 0;
  356. background-color: #fff;
  357. border: 1px solid #ccc;
  358. border-right: 0 none;
  359. .box-shadow(none);
  360. .border-radius(2px 0 0 2px);
  361. &:focus { .box-shadow(none); }
  362. }
  363. .btn {
  364. .btn-search;
  365. }
  366. }
  367. /** 화면 상단의 전체 검색 폼 **/
  368. .form-searchbar {
  369. width: 146px; height: 29px;
  370. margin: 0; padding: 0 6px;
  371. background-color: @search-bar-bg-color;
  372. border:1px solid @search-bar-border-color;
  373. .border-radius(2px);
  374. /*.box-shadow(inset 0px 2px 3px rgba(0,0,0,0.12));*/
  375. .text {
  376. width: 128px; /*height: 13px;*/
  377. margin: 0; margin-right:3px;
  378. padding:4px 0px;
  379. border: 0 none;
  380. font-size: 14px; /* 11px */
  381. color: @search-input-color;
  382. background-color: transparent;
  383. .box-shadow(none);
  384. &:focus { .box-shadow(none); }
  385. }
  386. .ico-search {
  387. border:0; padding:0;
  388. background-color:transparent;
  389. /*margin-bottom:2px;*/
  390. margin-top:2px;
  391. }
  392. }
  393. /** Avatar Wraps **/
  394. .avatar-wrap {
  395. width:32px; height:32px; /* default size: medium */
  396. display:inline-block;
  397. vertical-align:middle;
  398. overflow:hidden;
  399. background:#ddd;
  400. .border-radius(3px) !important;
  401. &.mini { width:12px; height:12px; }
  402. &.smaller { width:20px; height:20px; }
  403. &.small { width:24px; height:24px; }
  404. &.medium { width:32px; height:32px; }
  405. &.mlarge { width:40px; height:40px; }
  406. &.larger { width:45px; height:45px; }
  407. &.large { width:64px; height:64px; }
  408. &.xlarge { width:128px; height:128px; }
  409. img {
  410. width:100%;
  411. vertical-align:top;
  412. }
  413. i {
  414. width:100%; height:100%;
  415. display:block; line-height:inherit;
  416. text-align:center; color:#fff;
  417. }
  418. }
  419. /** tab UI **/
  420. .nav-tabs {
  421. li {
  422. a {
  423. padding-left:30px; padding-right:30px;
  424. color: #3592b5;
  425. font-weight: bold;
  426. &:hover {
  427. text-decoration: none;
  428. background-color: @yobi-white-dark;
  429. }
  430. }
  431. &.active a {
  432. font-weight:bold;
  433. }
  434. }
  435. &.small {
  436. height:29px;
  437. li a { padding:4px 15px; }
  438. .editor-notice-label {
  439. padding:4px 15px;
  440. .unsaved {
  441. border: 1px solid @state-rejected;
  442. border-radius: 3px;
  443. color: @state-rejected;
  444. padding: 2px 4px;
  445. }
  446. .saved {
  447. border: 1px solid #8bc34a;
  448. border-radius: 3px;
  449. color: #8bc34a;
  450. padding: 2px 4px;
  451. }
  452. }
  453. }
  454. }
  455. .tab-box {
  456. border-top:none;
  457. .border-radius(0 0 4px 4px);
  458. }
  459. .tab-box-content {
  460. display:none;
  461. &.active {
  462. display:block;
  463. }
  464. }
  465. .tab-searchbox {
  466. padding:5px 15px;
  467. }
  468. .subtab-wrap {
  469. padding:10px 10px 5px 10px;
  470. }
  471. .nav-subtab {
  472. li {
  473. display: inline-block;
  474. margin-left:10px;
  475. &:first-child {
  476. margin-left:0;
  477. }
  478. a {
  479. display: block;
  480. padding: 5px 10px;
  481. &:hover {
  482. text-decoration: none;
  483. border-bottom: 1px solid @primary;
  484. }
  485. }
  486. &.active {
  487. a {
  488. text-decoration: none;
  489. background-color: @primary;
  490. color: #fcfcfc !important;
  491. border-bottom: 1px solid @primary;
  492. }
  493. }
  494. }
  495. }
  496. .my-project-item {
  497. li {
  498. padding:5px 15px;
  499. border-top : 1px solid #ececec;
  500. font-size: 14px;
  501. }
  502. }
  503. /** alert **/
  504. .yobiDialog {
  505. .border-radius(none);
  506. border:10px solid #bebebe;
  507. padding:16px 20px; width:500px;
  508. .btn-dismiss {
  509. padding:0; margin:0; width:100%; text-align: right;
  510. display:block; clear:both;
  511. button {
  512. font-size:24px; font-weight:bold; color:#898989;
  513. border:none; background:transparent;
  514. }
  515. }
  516. .message {
  517. .msg {
  518. text-align:center;
  519. font-weight:bold; font-size:18px;
  520. margin-bottom:20px; line-height:1.5em;
  521. }
  522. .desc {
  523. text-align:center;
  524. font-weight: normal; font-size: 14px;
  525. margin: 20px 0 25px; line-height: 150%;
  526. color: #555;
  527. }
  528. }
  529. }
  530. .yobiToasts {
  531. position: fixed;
  532. overflow: hidden;
  533. right: 20px !important;
  534. bottom: 25px !important;
  535. margin: 10px;
  536. z-index:9999;
  537. .toast {
  538. position:relative;
  539. width: 450px;
  540. word-break: keep-all;
  541. word-wrap: break-word;
  542. margin: 10px;
  543. padding: 10px 20px;
  544. outline:none;
  545. font-weight: bold;
  546. box-sizing: border-box;
  547. color: black;
  548. background-color: #cddc39;
  549. -webkit-transition-duration: 0.3s;
  550. box-shadow: 1px 1px 3px black;
  551. .opacity(90);
  552. .border-radius(2px);
  553. .btn-dismiss {
  554. position: absolute;
  555. top: 5px;
  556. left: 420px;
  557. button {
  558. color: black;
  559. font-size:25px;
  560. font-weight:bold;
  561. }
  562. }
  563. .v {
  564. display:inline-block;
  565. width:0;
  566. height:50px;
  567. vertical-align:middle;
  568. }
  569. .msg {
  570. width: 90%;
  571. font-size:15px;
  572. display:inline-block;
  573. word-wrap: break-word;
  574. word-break:break-all;
  575. margin: 0;
  576. vertical-align:middle;
  577. }
  578. }
  579. }
  580. .yobiSpinner {
  581. display: none;
  582. position: fixed; z-index: 99999;
  583. top: 0; bottom: 0; left: 0; right: 0;
  584. .spinContainer {
  585. position:fixed;
  586. width:100px; height:100px;
  587. top:50%; left:50%;
  588. }
  589. }
  590. /** etc **/
  591. .num-badge {
  592. font-weight: bold;
  593. vertical-align: top;
  594. font-family: @base-font-family;/*Tahoma;*/
  595. text-shadow: none;
  596. border-radius: 2px;
  597. margin-left: 3px;
  598. font-size: 13px;
  599. padding: 2px 4px;
  600. }
  601. .num-noti {
  602. display: inline-block;
  603. background: @primary;
  604. color:#fff;
  605. font-weight:bold;
  606. border:1px solid #eee;
  607. padding: 0px 5px;
  608. margin-left: 5px;
  609. vertical-align: middle;
  610. font-family: @base-font-family;/*Tahoma;*/
  611. text-shadow: none;
  612. .border-radius(2px);
  613. }
  614. .label-exp {
  615. background:@secondary;
  616. text-shadow: none;
  617. i { font-size:10px; }
  618. }
  619. .counter {
  620. left: 2px;
  621. position: relative;
  622. padding: 2px 3px;
  623. font-size: 11px;
  624. color: @blue2;
  625. }
  626. .ybtn, .flat > li > .ybtn {
  627. text-align :center;
  628. white-space:nowrap;
  629. color: #333;
  630. background-color: @yobi-btn-default;
  631. text-shadow:none;
  632. .border-radius(3px) !important;
  633. display:inline-block;
  634. padding: 4px 12px !important;
  635. vertical-align: middle;
  636. cursor: pointer;
  637. line-height: 20px;
  638. font-size: 14px;
  639. .transition(all 0.3s ease);
  640. outline:0 none;
  641. position:relative;
  642. margin-bottom: 0;
  643. margin-left: .3em;
  644. border: 1px solid rgba(0,0,0,.15);
  645. .box-shadow(0 1px 0 rgba(0,0,0,.05));
  646. z-index: 2;
  647. i { line-height:20px;}
  648. &.ybtn-medium {
  649. padding:4px 12px;
  650. }
  651. &:first-child {
  652. margin-left:0;
  653. }
  654. &:hover, &:focus, &:active, &:focus, &.disabled, &[disabled] {
  655. border:1px solid rgba(0,0,0,.25);
  656. background-color:#f1f1f1;
  657. color: #292929;
  658. text-decoration:none;
  659. }
  660. &.ybtn-small {
  661. padding: 3px 10px !important;
  662. font-size: 13px !important;
  663. }
  664. &.ybtn-large {
  665. padding: 10px 15px !important;
  666. font-size: 16px !important;
  667. }
  668. &.ybtn-middle {
  669. padding: 7px 15px !important;
  670. font-size: 14px !important;
  671. }
  672. &.ybtn-mini {
  673. padding: 0 6px !important;
  674. font-size: 10.5px !important;
  675. }
  676. &.ybtn-minimum {
  677. padding: 0 4px !important;
  678. font-size: 10px !important;
  679. line-height: 16px !important;
  680. i { line-height:16px;}
  681. }
  682. &.ybtn-maximum {
  683. padding: 20px 30px !important;
  684. font-size: 26px !important;
  685. }
  686. &.ybtn-fullsize {
  687. display:block;
  688. width:100%;
  689. box-sizing:border-box;
  690. }
  691. &.ybtn-padding {
  692. padding:13px 30px !important;
  693. font-size: 20px !important;
  694. }
  695. &.ybtn-primary, &.ybtn-success,&.ybtn-info, &.ybtn-danger,&.ybtn-inverse, &.ybtn-disabled, &ybtn-warning, &.ybtn-transparent, &.ybtn-watching {
  696. color:@yobi-white;
  697. }
  698. &.ybtn-gray {
  699. backgroun-color: @yobi-white-dark;
  700. &:hover, &:focus, &:active, &:focus {
  701. background-color: @yobi-white !important;
  702. }
  703. }
  704. &.ybtn-primary {
  705. background-color : @yobi-btn-primary !important;
  706. border:1px solid @yobi-btn-primary-hover;
  707. &:hover, &:focus, &:active, &:focus {
  708. background-color: @yobi-btn-primary-hover !important;
  709. }
  710. }
  711. &.ybtn-success {
  712. background-color : @yobi-btn-primary !important;
  713. border:1px solid @yobi-btn-primary-hover;
  714. &:hover, &:focus, &:active, &:focus {
  715. background-color: @yobi-btn-primary-hover !important;
  716. }
  717. }
  718. &.ybtn-warning {
  719. background-color : @yobi-btn-warning !important;
  720. border:1px solid @yobi-btn-warning-hover;
  721. &:hover, &:focus {
  722. background-color: @yobi-btn-warning-hover !important;
  723. }
  724. }
  725. &.ybtn-info {
  726. background-color : @yobi-btn-info !important;
  727. border:1px solid @yobi-btn-info-hover;
  728. &:hover, &:focus {
  729. background-color: @yobi-btn-info-hover !important;
  730. }
  731. }
  732. &.ybtn-danger {
  733. background-color : @yobi-btn-danger !important;
  734. border:1px solid @yobi-btn-danger-hover;
  735. &:hover, &:focus {
  736. background-color: @yobi-btn-danger-hover !important;
  737. }
  738. }
  739. &.ybtn-danger-no-outline {
  740. font-weight: 600;
  741. box-shadow: none;
  742. color: #666;
  743. padding: 1px 10px !important;
  744. border: 1px solid transparent;
  745. background-color: #eee;
  746. &:hover, &:focus {
  747. color: @yobi-btn-danger;
  748. background-color: #fbe9e7;
  749. border: 1px solid #EF9A9A;
  750. }
  751. }
  752. &.ybtn-inverse {
  753. background-color : @yobi-btn-inverse !important;
  754. border:1px solid @yobi-btn-inverse-hover;
  755. &:hover, &:focus {
  756. background-color: @yobi-btn-inverse-hover !important;
  757. }
  758. }
  759. &.ybtn-transparent {
  760. background-color : rgba(0,0,0, 0.25);
  761. &:hover, &:focus {
  762. background-color: rgba(0,0,0, 0.45);
  763. }
  764. }
  765. &.ybtn-disabled, &[disabled] {
  766. background-color : @yobi-btn-disabled !important;
  767. border:none;
  768. color:#dedede;
  769. text-shadow:1px 1px rgba(255,255,255,0.5);
  770. &:hover, &:focus {
  771. background-color: @yobi-btn-disabled !important;
  772. }
  773. }
  774. &.ybtn-watching {
  775. background-color : #f4efea !important;
  776. border:1px solid #C9C5C1;
  777. color:#333;
  778. &:hover, &:focus {
  779. background-color: #e0dad4 !important;
  780. }
  781. }
  782. &.ybtn-unwatching {
  783. background-color : @yobi-btn-disabled !important;
  784. border:none;
  785. &:hover, &:focus {
  786. background-color: !important;
  787. }
  788. }
  789. &.dropdown-toggle {
  790. &:after {
  791. margin-left: 5px;
  792. vertical-align: middle;
  793. display: inline-block;
  794. vertical-align: middle !important;
  795. width: 0;
  796. .transition(all 0.3s ease);
  797. height: 0;
  798. vertical-align: top;
  799. border-top: 4px solid @yobi-inverse;
  800. border-right: 4px solid transparent;
  801. border-left: 4px solid transparent;
  802. content: "";
  803. }
  804. &:hover, &:focus {
  805. &:after {
  806. text-decoration:none;
  807. }
  808. }
  809. &.ybtn-success,&.ybtn-primary, &.ybtn-info, &.ybtn-danger,&.ybtn-inverse, &.ybtn-disabled {
  810. &:after {
  811. border-top: 4px solid @yobi-white !important;
  812. }
  813. &:hover, &:focus {
  814. &:after {
  815. border-top: 4px solid @yobi-white !important;
  816. text-decoration:none;
  817. }
  818. }
  819. }
  820. }
  821. &.round-left {
  822. .border-radius(6px 0 0 6px);
  823. }
  824. &.round-right {
  825. .border-radius(0 6px 6px 0);
  826. }
  827. }
  828. .dropdown-menu {
  829. &.flat {
  830. top:100%;
  831. left:0;
  832. display: block;
  833. position:absolute;
  834. background-clip: padding-box;
  835. .border-radius(6px);
  836. .box-shadow(none);
  837. font-size:12px;
  838. background-color:@yobi-white;
  839. overflow:visible;
  840. .opacity(0);
  841. .transition(all 0.25s ease);
  842. visibility: hidden;
  843. -webkit-backface-visibility: hidden;
  844. margin-top:-10px;
  845. .box-shadow(0 2px 10px rgba(0,0,0,.2));
  846. border: 1px solid #ccc;
  847. border-color: rgba(0,0,0,.2);
  848. color: @yobi-white;
  849. padding: 4px 0 6px;
  850. &:before {
  851. content: " ";
  852. border-color: transparent;
  853. border-style: dashed dashed solid;
  854. border-width: 0 8px 8px;
  855. position: absolute;
  856. left: 7px;
  857. z-index: 1;
  858. height: 0;
  859. width: 0;
  860. -webkit-animation: gb__a .2s;
  861. animation: gb__a .2s;
  862. border-bottom-color: #ccc;
  863. border-bottom-color: rgba(0,0,0,.2);
  864. top: -8px;
  865. }
  866. &:after {
  867. content: " ";
  868. border-color: transparent;
  869. border-bottom-color: @yobi-white;
  870. border-style: dashed dashed solid;
  871. border-width: 0 8px 8px;
  872. position: absolute;
  873. left: 7px;
  874. top: -7px;
  875. z-index: 1;
  876. height: 0;
  877. width: 0;
  878. }
  879. .pop-title {
  880. .border-radius(3px);
  881. background: @yobi-cyan-light;
  882. padding:3px 0;
  883. padding: 3px 11px 5px;
  884. margin:5px 3px;
  885. font-weight:bold;
  886. color:#333;
  887. font-size:14px;
  888. white-space:nowrap;
  889. &:first-child {
  890. margin-top: 0px;
  891. }
  892. }
  893. .pop-content {
  894. font-size:12px;
  895. padding:10px 15px;
  896. white-space:nowrap;
  897. text-align:left;
  898. color:#292929;
  899. background-color:@yobi-white;
  900. p {
  901. line-height:20px;
  902. margin:0;
  903. padding:0;
  904. }
  905. &.btn-wrap{
  906. margin-top:0;
  907. padding-top:0;
  908. text-align:center;
  909. }
  910. }
  911. li {
  912. margin: 0 5px 2px !important;
  913. white-space:nowrap;
  914. float:none !important;
  915. background-color:@yobi-white;
  916. color:#292929;
  917. &:first-child, &:last-child {
  918. > a {
  919. color:#292929;
  920. border-radius: 2px;
  921. padding-bottom: 7px;
  922. padding-top: 5px;
  923. }
  924. }
  925. &.active, &:selected {
  926. > a {
  927. background: rgba(255,255,255,0.25);
  928. color:#292929;
  929. position: relative;
  930. z-index: 1;
  931. }
  932. }
  933. &.empty {
  934. padding:3px;
  935. text-align:center;
  936. }
  937. dt {
  938. padding-left: 11px;
  939. padding-right: 11px;
  940. }
  941. &.divider {
  942. margin-left: 11px;
  943. margin-right: 11px;
  944. }
  945. &.title {
  946. .border-radius(3px);
  947. background:@yobi-cyan-light;
  948. padding:3px 0;
  949. padding: 3px 11px 5px;
  950. margin:5px 3px;
  951. font-weight:bold;
  952. color:#333;
  953. &:first-child {
  954. margin-top: 0px;
  955. }
  956. }
  957. > a {
  958. .border-radius(3px);
  959. color:#292929;
  960. padding: 3px 5px 5px 15px;
  961. background-color:transparent !important;
  962. .transition(all 0.2s ease);
  963. &:hover, &:active, &:focus {
  964. .border-radius(3px) !important;
  965. background-color: rgba(0,0,0,0.15) !important;
  966. }
  967. &.highlighted {
  968. background: #526476;
  969. &:hover, &:active, &a:focus {
  970. background: #fff;
  971. }
  972. }
  973. &.ybtn {
  974. display:inline-block;
  975. height:auto;
  976. }
  977. }
  978. .disabled {
  979. color:#ccc;
  980. font-size:0.8em;
  981. }
  982. }
  983. &.right {
  984. left:auto;
  985. right:0px;
  986. &:before, &:after {
  987. right: 7px;
  988. left: auto;
  989. }
  990. }
  991. &.maximum {
  992. max-height: 500px;
  993. overflow-y: auto;
  994. }
  995. }
  996. }
  997. .open {
  998. > .flat {
  999. .opacity(100);
  1000. visibility:visible;
  1001. margin-top:12px;
  1002. }
  1003. }
  1004. .tooltip {
  1005. white-space:nowrap;
  1006. }
  1007. .btn-transparent {
  1008. background:transparent;
  1009. border:0;
  1010. outline:none;
  1011. }
  1012. .btn-transparent-with-fontsize-lineheight {
  1013. background:transparent;
  1014. border:0;
  1015. outline:none;
  1016. font-size:0;
  1017. line-height:normal;
  1018. }
  1019. .numberic {
  1020. display:inline-block;
  1021. margin-left:5px;
  1022. font-size:10px;
  1023. border:2px solid #FFF;
  1024. line-height:15px;
  1025. padding:0 5px;
  1026. background-color:@yobi-primary;
  1027. color:#ECF0F1;
  1028. .border-radius(10px);
  1029. -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
  1030. -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
  1031. -o-box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
  1032. box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
  1033. }
  1034. /* ============================================================
  1035. * bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru
  1036. * http://www.larentis.eu/switch/
  1037. * ============================================================
  1038. * Licensed under the Apache License, Version 2.0
  1039. * http://www.apache.org/licenses/LICENSE-2.0
  1040. * ============================================================ */
  1041. /**
  1042. * Flat UI Free
  1043. * licensed under a CC BY 3.0 and MIT License
  1044. *
  1045. * http://creativecommons.org/licenses/by/3.0/
  1046. * http://opensource.org/licenses/mit-license.html
  1047. */
  1048. .has-switch {
  1049. border-radius: 30px;
  1050. display: inline-block;
  1051. cursor: pointer;
  1052. line-height: 1.231;
  1053. overflow: hidden;
  1054. position: relative;
  1055. text-align: left;
  1056. width: 80px;
  1057. -webkit-mask: url('@{base-image-path}/switch-mask.png') 0 0 no-repeat;
  1058. mask: url('@{base-image-path}/switch-mask.png') 0 0 no-repeat;
  1059. -webkit-user-select: none;
  1060. -moz-user-select: none;
  1061. -ms-user-select: none;
  1062. -o-user-select: none;
  1063. user-select: none;
  1064. }
  1065. .has-switch.deactivate {
  1066. opacity: 0.5;
  1067. filter: alpha(opacity=50);
  1068. cursor: default !important;
  1069. }
  1070. .has-switch.deactivate label,
  1071. .has-switch.deactivate span {
  1072. cursor: default !important;
  1073. }
  1074. .has-switch > div {
  1075. width: 162%;
  1076. position: relative;
  1077. top: 0;
  1078. }
  1079. .has-switch > div.switch-animate {
  1080. -webkit-transition: left 0.25s ease-out;
  1081. -moz-transition: left 0.25s ease-out;
  1082. -o-transition: left 0.25s ease-out;
  1083. transition: left 0.25s ease-out;
  1084. -webkit-backface-visibility: hidden;
  1085. }
  1086. .has-switch > div.switch-off {
  1087. left: -63%;
  1088. }
  1089. .has-switch > div.switch-off label {
  1090. background-color: #FFF;
  1091. border-color: @state-closed;
  1092. -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);
  1093. -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);
  1094. box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);
  1095. }
  1096. .has-switch > div.switch-on {
  1097. left: 0%;
  1098. }
  1099. .has-switch > div.switch-on label {
  1100. background-color: #fff;
  1101. }
  1102. .has-switch input[type=checkbox] {
  1103. display: none;
  1104. }
  1105. .has-switch span {
  1106. cursor: pointer;
  1107. font-size: 13px;/*14.994px;*/
  1108. font-weight: 700;
  1109. float: left;
  1110. height: 29px;
  1111. line-height: 19px;
  1112. margin: 0;
  1113. padding-bottom: 6px;
  1114. padding-top: 5px;
  1115. position: relative;
  1116. text-align: center;
  1117. width: 50%;
  1118. z-index: 1;
  1119. -webkit-box-sizing: border-box;
  1120. -moz-box-sizing: border-box;
  1121. box-sizing: border-box;
  1122. -webkit-transition: 0.25s ease-out;
  1123. -moz-transition: 0.25s ease-out;
  1124. -o-transition: 0.25s ease-out;
  1125. transition: 0.25s ease-out;
  1126. -webkit-backface-visibility: hidden;
  1127. }
  1128. .has-switch span.switch-left {
  1129. border-radius: 30px 0 0 30px;
  1130. background-color: @state-open;
  1131. color: #fff;
  1132. border-left: 1px solid transparent;
  1133. &:hover {
  1134. background-color:darken(@state-open, 10%);
  1135. }
  1136. }
  1137. .has-switch span.switch-right {
  1138. border-radius: 0 30px 30px 0;
  1139. background-color: @state-closed;
  1140. color: #FFF;/*#ffffff;*/
  1141. text-indent: 5px;
  1142. &:hover {
  1143. background-color:darken(@state-closed, 10%);
  1144. }
  1145. }
  1146. .has-switch label {
  1147. border: 4px solid @state-open;
  1148. border-radius: 50%;
  1149. float: left;
  1150. height: 21px;
  1151. margin: 0 -15px 0 -14px;
  1152. padding: 0;
  1153. position: relative;
  1154. vertical-align: middle;
  1155. width: 21px;
  1156. z-index: 100;
  1157. -webkit-transition: 0.25s ease-out;
  1158. -moz-transition: 0.25s ease-out;
  1159. -o-transition: 0.25s ease-out;
  1160. transition: 0.25s ease-out;
  1161. -webkit-backface-visibility: hidden;
  1162. }
  1163. .switch-square {
  1164. border-radius: 6px;
  1165. -webkit-mask: url('@{base-image-path}/switch-mask.png') 0 0 no-repeat;
  1166. mask: url('@{base-image-path}/switch-mask.png') 0 0 no-repeat;
  1167. }
  1168. .switch-square > div.switch-off label {
  1169. border-color: #7f8c9a;
  1170. border-radius: 6px 0 0 6px;
  1171. }
  1172. .switch-square span.switch-left {
  1173. border-radius: 6px 0 0 6px;
  1174. }
  1175. .switch-square span.switch-right {
  1176. border-radius: 0 6px 6px 0;
  1177. }
  1178. .switch-square label {
  1179. border-radius: 0 6px 6px 0;
  1180. border-color: @secondary;
  1181. }
  1182. .search-bar {
  1183. border:1px solid #ccc;
  1184. .border-radius(3px);
  1185. line-height:20px;
  1186. padding:4px 25px 4px 5px;
  1187. position: relative;
  1188. height: 20px;
  1189. background-color: #FFF;
  1190. .textbox {
  1191. border:0 none;
  1192. height: 20px;
  1193. width:350px;
  1194. margin: 0 -5px;
  1195. padding:0 5px;
  1196. .transition(width .15s);
  1197. &.small {
  1198. width:150px;
  1199. }
  1200. &.large {
  1201. width : 560px;
  1202. }
  1203. &.resize {
  1204. width:80px;
  1205. &:focus, &:active {
  1206. width:350px;
  1207. }
  1208. }
  1209. &.full {
  1210. width: 100%;
  1211. }
  1212. }
  1213. .search-btn {
  1214. background-color:transparent;
  1215. border:0;
  1216. height: 20px;
  1217. outline:0 none;
  1218. position:absolute;
  1219. top:5px;
  1220. right:5px;
  1221. }
  1222. }
  1223. .control-label{
  1224. font-weight: bold;
  1225. display: block;
  1226. padding: 4px 4px 0px 4px;
  1227. color: 666;
  1228. }
  1229. .down-arrow{
  1230. &:after {
  1231. margin-left: 5px;
  1232. display: inline-block;
  1233. vertical-align: middle !important;
  1234. width: 0;
  1235. .transition(all 0.3s ease);
  1236. height: 0;
  1237. border-top: 4px solid @yobi-inverse;
  1238. border-right: 4px solid transparent;
  1239. border-left: 4px solid transparent;
  1240. content: "";
  1241. }
  1242. }