/** * depends on bootstrap * * html { box-sizing: border-box; } * body { background: #fff; } * p { margin-top:0; margin-bottom:1rem; } * **/ /** * CONTENTS * * Font Icons * icon-xx ...............Font Awesome 3.2.1 by Dave Gandy * sf2-icon-xx ...........seafile-font2 * * Reset * tags ..................reset styles of tags * * Helper * common class ..........common class * * UI Widgets(ui widgets) * path * btn-group * paginator * caret * tabnav * jquery tabs * left-right-tabs * side-tabnav * (...) * messages * narrow-panel * new-narrow-panel * text-panel * tab-tabs * tab-popup * op-confirm () * simplemodal * ui-autocomplete () * article * obv-btn * sf-popover * user-item * sf-dropdown * discussions/comments * custom select2 * custom magnificPopup * * Container * Container ......... common container styles * * Separate pages * */ /* * z-index: * sf-popover: 20 * */ /****** icon-xx ********/ /* Font Awesome 3.2.1 by Dave Gandy - http://fortawesome.github.com/Font-Awesome */ @font-face { font-family: 'FontAwesome'; src: url('font/fontawesome-webfont.eot?v=3.0.1'); src: url('font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), url('font/fontawesome-webfont.woff?v=3.0.1') format('woff'), url('font/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; vertical-align: baseline; speak: none; } .icon-cloud-download:before { content: "\f0ed"; } .icon-download:before { content: "\f01a"; } .icon-trash:before { content: "\f014"; } .icon-refresh:before { content: "\f021"; } .icon-plus:before { content: "\f067"; } .icon-minus:before { content: "\f068"; } .icon-pencil:before { content: "\f040"; } .icon-remove:before { content: "\f00d"; } .icon-star:before { content: "\f005"; } .icon-star-empty:before { content: "\f006"; } .icon-upload:before { content: "\f01b"; } .icon-upload-alt:before { content: "\f093"; } .icon-ban-circle:before { content: "\f05e"; } .icon-plus-sign-alt:before { content: "\f0fe"; } .icon-double-angle-left:before { content: "\f100"; } .icon-double-angle-right:before { content: "\f101"; } .icon-double-angle-up:before { content: "\f102"; } .icon-double-angle-down:before { content: "\f103"; } .icon-zoom-in:before { content: "\f00e"; } .icon-zoom-out:before { content: "\f010"; } .icon-caret-down:before { content: "\f0d7"; } .icon-caret-up:before { content: "\f0d8"; } .icon-caret-left:before { content: "\f0d9"; } .icon-caret-right:before { content: "\f0da"; } .icon-search:before { content: "\f002"; } .icon-move:before { content: "\f047"; } .icon-copy:before { content: "\f0c5"; } .icon-lightbulb:before { content: "\f0eb"; } .icon-chevron-left:before { content: "\f053"; } .icon-chevron-right:before { content: "\f054"; } .icon-question-sign:before { content: "\f059"; } .icon-building:before { content: "\f0f7"; } .icon-phone:before { content: "\f095"; } .icon-magic:before { content: "\f0d0"; } .icon-eye:before { content: "\f06e"; } .icon-eye-slash:before { content: "\f070"; } .icon-plus-square:before { content: "\f0fe"; } .icon-envelope:before { content: "\f0e0"; } .icon-ellipsis-vertical:before { content: "\f142"; } .icon-building:before { content: "\f0f7"; } .fa-1x { font-size: 1.3em; } /****** sf2-icon-xx ********/ @font-face { font-family: 'seafile-font2'; src:url('sf_font2/seafile-font2.eot'); src:url('sf_font2/seafile-font2.eot?#iefix') format('embedded-opentype'), url('sf_font2/seafile-font2.woff') format('woff'), url('sf_font2/seafile-font2.ttf') format('truetype'), url('sf_font2/seafile-font2.svg#seafile-font2') format('svg'); font-weight: normal; font-style: normal; } [class^="sf2-icon-"], [class*=" sf2-icon-"] { font-family: 'seafile-font2'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; } .sf2-icon-histogram:before { content:"\e000"; } .sf2-icon-wrench:before { content:"\e001"; } .sf2-icon-clock:before { content:"\e002"; } .sf2-icon-bell:before { content:"\e003"; } .sf2-icon-contacts:before { content:"\e004"; } .sf2-icon-recycle:before { content:"\e005"; } .sf2-icon-delete:before { content:"\e006"; } .sf2-icon-monitor:before { content:"\e007"; } .sf2-icon-download:before { content:"\e008"; } .sf2-icon-file:before { content:"\e009"; } .sf2-icon-folder:before { content:"\e00a"; } .sf2-icon-msgs:before { content:"\e00b"; } .sf2-icon-group:before { content:"\e00c"; } .sf2-icon-library:before { content:"\e00d"; } .sf2-icon-link:before { content:"\e00e"; } .sf2-icon-user:before { content:"\e00f"; } .sf2-icon-organization:before { content:"\e010"; } .sf2-icon-share:before { content:"\e011"; } .sf2-icon-star:before { content:"\e012"; } .sf2-icon-history:before { content:"\e014"; } .sf2-icon-cog1:before { content:"\e015"; } .sf2-icon-trash:before { content:"\e016"; } .sf2-icon-security:before { content:"\e017"; } .sf2-icon-edit:before { content:"\e018"; } .sf2-icon-draft:before { content:"\e018"; } .sf2-icon-edit2:before { content:"\e018"; } /* for some reason */ .sf2-icon-eye:before { content:"\e019"; } .sf2-icon-caret-down:before { content:"\e01a"; } .sf2-icon-cog2:before { content:"\e01b"; } .sf2-icon-minus:before { content:"\e01c"; } .sf2-icon-x1:before { content:"\e01d"; } .sf2-icon-tick:before { content:"\e01e"; } .sf2-icon-x2:before { content:"\e01f"; } .sf2-icon-user2:before { content:"\e020"; } .sf2-icon-msgs2:before { content:"\e021"; } /*.sf2-icon-group-settings:before { content:"\e022"; }*/ .sf2-icon-comment:before { content:"\e023"; } .sf2-icon-wiki:before { content:"\e013"; } .sf2-icon-wiki2:before { content:"\e024"; } .sf2-icon-grid-view:before { content:"\e025"; } .sf2-icon-list-view:before { content:"\e026"; } .sf2-icon-wiki-view:before { content:"\e013"; } .sf2-icon-plus:before { content: "\e027"; } .sf2-icon-copy:before { content: "\e028"; } .sf2-icon-move:before { content: "\e029"; } .sf2-icon-reply:before { content: "\e02a"; } .sf2-icon-invite:before { content: "\e02b"; } .sf2-icon-lock:before { content: "\e02c"; } .sf2-icon-unlock:before { content: "\e02d"; } .sf2-icon-admin-log:before { content: "\e02e"; } .sf2-icon-info:before { content: "\e02f"; } .sf2-icon-logout:before { content: "\e030"; } .sf2-icon-menu:before { content: "\e031"; } .sf2-icon-more:before { content: "\e032"; } .sf2-icon-plus2:before { content: "\e033"; } .sf2-icon-upload:before { content: "\e034"; } .sf2-icon-x3:before { content: "\e035"; } .sf2-icon-two-columns:before { content:"\e036"; } /******* tags **********/ html, body { height:100%; overflow:hidden; } body, ul,ol,li,dl,dt,dd, pre,blockquote, form,input,textarea,select,button,img { padding:0; margin:0; } body, input, textarea, button, select { font-size: 13px; line-height: 1.5; color: #333; word-wrap:break-word; } input, button, select { line-height:19px;/*for ff*/ } h1, h2, h3, h4, h5, h6 { line-height:1.5; /* overwrite bootstrap */ } h1 { font-size:1.9em; } h2 { font-size:1.5em; color:#222; font-weight:bold; } h3 { font-size:16px; color:#322; font-weight:normal; } h4 { font-size:1.1em; color:#222; font-weight:normal; } h5, h6 { font-size:1em; } ul { list-style:none; } dl { margin:1.5em 0; } dt { color:#666; margin:24px 0 2px; font-weight:normal; } dd { margin-bottom:.8em; color:#222; } a { color:#eb8205; text-decoration:none; font-weight:bold; } a.normal {font-weight: normal;} a:focus, a:hover { color: #eb8205; } img { border:none; } textarea { overflow: auto; /* rm default vertical scrollbar in ie */ resize: vertical; /* for drag */ outline:0; } textarea, input { border: 1px solid #ccc; } input { margin:3px 0; } input, button { display:inline-block;/*for ie*/ } input[type=text], input[type=password] { box-sizing:content-box; height:22px; } select, button { box-sizing:border-box; } button, input[type=submit], input[type=button], input.submit, .sf-btn-link, .fileinput-button, select { padding:5px 6px; /* background:-webkit-linear-gradient(top, #fafafb, #eeeeee); background:-moz-linear-gradient(top, #fafafb, #eeeeee); background:linear-gradient(top, #fafafb, #eeeeee); */ border: 1px solid #c5c5c5; border-radius: 2px; } .sf-btn-link { display:inline-block; color:#333; line-height:19px; text-decoration:none; font-weight:normal; } .big-btn-link { font-size:14px; line-height:1.5; padding:6px 20px; border-radius:3px; } .sf-btn-link:hover { color:#333; text-decoration:none; } input[type=radio] { border:0;/*for ie*/ } input:focus, button:focus, select:focus, textarea:focus { border-color: #66afe9; outline: none; } input[type="checkbox"]:focus, input[type="radio"]:focus { outline:#66afe9 auto 1px; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {/*for input type="number" in chrome: to hide up/download arrow*/ -webkit-appearance: none; margin: 0; } input::-moz-focus-inner, button::-moz-focus-inner {/*Remove button padding in FF*/ border: 0; padding: 0; } input[type=submit], input.submit, button.submit { margin-top:8px; } input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, button:hover, .sf-btn-link:hover, .fileinput-button:hover { cursor:pointer; background:#fff; } input[type="file"] { border:none; height:24px; line-height:24px; } label { display: inline-block; margin:4px 0px; } iframe { display:block; width:100%; } pre, code { font-family: Consolas,"Liberation Mono",Courier,monospace; } pre { white-space:pre-wrap; word-wrap: break-word; } table { width:100%; margin:8px 0 40px; } caption { font-size:1.1em; font-weight:bold; margin-bottom:.6em; } th { text-align:left; font-weight:normal; color:#9c9c9c; } th, td { padding:5px 3px; border-bottom:1px solid #eee; } td { color: #333; font-size:14px; word-break:break-all; /* mainly for lib/folder/file name */ } table img { vertical-align:middle; } /* custom scrollbar */ ::-webkit-scrollbar { height: 9px; width: 9px; } ::-webkit-scrollbar-button { display: block; height: 4px; } ::-webkit-scrollbar-track-piece { background: #e9e9eb; } ::-webkit-scrollbar-track-piece:vertical:start { border-radius:5px 5px 0 0; } ::-webkit-scrollbar-track-piece:vertical:end { border-radius:0 0 5px 5px; } ::-webkit-scrollbar-track-piece:horizontal:start { border-radius:5px 0 0 5px; } ::-webkit-scrollbar-track-piece:horizontal:end { border-radius:0 5px 5px 0; } ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal { background: #ccc; border-radius: 5px; display: block; } /********** common class ***********/ .fleft { float:left; } .fright { float:right; } .clear { clear:both; } .d-flex { display:flex; } .fd-col { flex-direction:column; } .flex-auto { flex:auto; } .flex-1 { flex:1; } .show { display:block; } .inline-block { display: inline-block; } .hide { display:none; } .error { color:red; } .errorlist { color:red; } .error-tip { text-align:center; margin-top:5em; } .ovhd { overflow:hidden; } .ov-auto { overflow:auto; } .ov-vb { overflow:visible; } .bold { font-weight:bold; } .no-bold { font-weight:normal; } .w100 { width: 100%; } .h100 { height: 100%; } .vh { visibility:hidden; } .vam { vertical-align:middle; } .hl { background-color: #f8f8f8; } /* highlight */ .tip { color:#808080; font-size:12px; } .tick-green { color:green; } .label { color:#333; font-size:12px; font-style:normal; } .italic { font-style:italic; } .alc { text-align: center;} .cspt { cursor:pointer; } .pos-rel { position:relative; } /** for input, textarea in form **/ .input, .textarea { width:260px; padding:2px 3px; border-radius:2px; margin-bottom:5px; } .textarea { height:70px; } /* loading implemented with css */ @-moz-keyframes loading { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loading-icon { display:inline-block; width:26px; height:26px; border:2px solid #eee; border-left-color:#aaa; border-radius:50%; -moz-animation:loading 0.9s infinite linear; -webkit-animation:loading 0.9s infinite linear; animation:loading 0.9s infinite linear; } .loading-tip { display:block; margin:1em auto; } .op, .more { font-weight:normal; font-size:12px; } .op { font-size:13px; padding-right:2px; } .op-target { color:#ee8204; word-wrap:break-word; } .op-icon { font-size:20px; line-height:1; color:#888; cursor:pointer; margin-right:3px; vertical-align:middle; } .op-icon.sf2-x, .op-icon.sf2-x:hover { color:#f89a68; } .op-icon.sf2-x:hover, .op-icon.sf2-x:focus { text-decoration: underline; } .sf2-icon-edit { font-size:16px; opacity:0.7; } .sf2-icon-edit:hover { opacity:1; } a.op-icon:focus { outline:none; text-decoration:none; } .op-icon:hover {/** for **/ color:#888; text-decoration:none; } .full-width-btn { width:100%; padding:.5em 0; background:#efefef; border:0; color:#777; } .full-width-btn:hover { color:#000; background:#dfdfdf; } .no-deco, .no-deco:hover, .no-deco:focus { text-decoration:none; } .input-disabled {/* for type="password/text" etc*/ background:#ebebe4; } .btn-disabled { /*for ,