github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/styles/globals.css (about)

     1  :root {
     2    --color-fg-added: #339933;
     3    --color-fg-removed: #FF3300;
     4    --color-fg-changed: #ffc003;
     5    --color-fg-conflict: #7f7966;
     6    --color-bg-added: #e6ffec;
     7    --color-bg-removed: #ffece6;
     8    --color-bg-changed: #fff6db;
     9    --color-bg-unknown: #f1f4ff;
    10    --color-bg-conflict: #fff3cd;
    11  }
    12  
    13  .gray-out {
    14    background-color: rgba(255, 255, 255, 0.5);
    15  }
    16  
    17  .overlay {
    18    position: absolute;
    19    top: 0;
    20    bottom: 0;
    21    left: 0;
    22    right: 0;
    23  }
    24  
    25  .main-app {
    26    margin: 15px;
    27  }
    28  
    29  
    30  .logo {
    31    height: 30px;
    32  }
    33  
    34  .navbar-brand {
    35    padding: 0;
    36  }
    37  
    38  .navbar > div {
    39    padding-top: 7px;
    40  }
    41  
    42  .card.login-widget {}
    43  
    44  .card.login-widget .btn {
    45    width: 100%;
    46  }
    47  
    48  .card.login-widget,.card.setup-widget, .reset-pwd-widget, .request-reset-pwd-widget {
    49    margin-top: 130px;
    50  }
    51  
    52  .card.create-invited-user-widget {
    53    margin-bottom: 10px;
    54  }
    55  
    56  .action-bar {
    57    padding-bottom: 10px;
    58    margin-bottom: 10px;
    59  }
    60  
    61  .action-bar.borderless {
    62    border-bottom: none;
    63  }
    64  
    65  .float-start {
    66    width: 100%;
    67  }
    68  
    69  .action-bar .float-start .btn {
    70    margin-right: 10px;
    71  }
    72  
    73  .action-bar .float-end .btn {
    74    margin-left: 10px;
    75  }
    76  
    77  .dismiss-btn {
    78    padding-left: 2px;
    79    padding-right: 2px;
    80  }
    81  
    82  .navbar a.dropdown-toggle {
    83    color: #DDDDDD;
    84  }
    85  .navbar a.dropdown-toggle:hover {
    86    color: #FFFFFF;
    87  }
    88  
    89  .nav-tabs .nav-link.active {
    90    font-weight: bold;
    91  }
    92  
    93  .commit-list .list-group-item:nth-of-type(even) {
    94    background-color: #FBFBFB;
    95  }
    96  
    97  .commit-actions .btn, .branch-actions .btn, .run-commit {
    98    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
    99    font-size: .8rem;
   100    vertical-align: center;
   101  }
   102  
   103  .lakefs-uri .octicon {
   104    color: #0c5460;
   105    margin-right: 5px;
   106  }
   107  
   108  .lakefs-uri a {
   109    color: #0f6674;
   110    text-decoration: underline;
   111  }
   112  
   113  .lakefs-uri {
   114    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
   115    font-size: .9rem;
   116    color: #303030;
   117    width: 95%;
   118  }
   119  
   120  .lakefs-uri strong {
   121    margin: 0 5px;
   122  }
   123  
   124  /*  ref dropdown */
   125  .ref-popover .popover-body {
   126    padding:0;
   127  }
   128  
   129  .ref-popover, .ref-popover .btn {
   130    font-size: 0.8rem;
   131    line-height: 0.8rem;
   132  }
   133  
   134  .ref-popover {
   135    max-width: 650px;
   136    min-width: 450px;
   137  }
   138  
   139  .ref-scroller {
   140    max-height: 250px;
   141    overflow: auto;
   142    min-height: 30px;
   143  }
   144  
   145  .ref-list .list-group-item:first-child {
   146    border-top-left-radius: 0;
   147    border-top-right-radius: 0;
   148  }
   149  .ref-list .list-group-item {
   150    padding: 10px 15px;
   151    border: 0;
   152    border-bottom: 1px solid #DDD;
   153    border-radius: 0;
   154    clear: both;
   155  }
   156  .ref-list .list-group-item .actions {
   157    float: right;
   158  }
   159  .ref-list .list-group-item .actions .badge {
   160    margin-right: 5px;
   161    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
   162  }
   163  
   164  .ref-popover h5 {
   165    padding: 10px;
   166    border-bottom: 1px solid #DDD;
   167    background-color: #FBFBFB;
   168    text-align: center;
   169  }
   170  
   171  .ref-filter-form {
   172    padding: 10px;
   173    border-bottom: 1px solid #DDD;
   174    background-color: #FBFBFB;
   175  }
   176  .ref-filter-form form {
   177    margin-bottom: 0;
   178  }
   179  .ref-paginator {
   180    text-align: center;
   181    padding: 10px 0;
   182  }
   183  /*  end ref dropdown */
   184  
   185  
   186  /* tree table */
   187  .diff-indicator {
   188    width: 50px;
   189  }
   190  
   191  .diff-indicator span {
   192    padding: 0 10px;
   193  }
   194  
   195  .table .leaf-entry-row {
   196    border: 1px solid rgba(0,0,0,.125);
   197  }
   198  
   199  .table .leaf-entry-row .objects-diff .stats-diff-block {
   200    padding: 2px;
   201  }
   202  
   203  .table .leaf-entry-row .objects-diff .removed {
   204    color: var(--color-fg-removed);
   205    font-weight: bold;
   206  }
   207  
   208  .table .leaf-entry-row .objects-diff .added {
   209    color: var(--color-fg-added);
   210    font-weight: bold;
   211  }
   212  
   213  .table .leaf-entry-row .objects-diff .unchanged {
   214    color: var(--color-fg-conflict);
   215    font-weight: bold;
   216  }
   217  
   218  .table .leaf-entry-row .objects-diff .conflict {
   219    color: var(--color-fg-conflict);
   220    font-weight: bold;
   221  }
   222  
   223  .table .leaf-entry-row .objects-diff .diff-size {
   224    font-weight: bold;
   225  }
   226  
   227  .table .tree-entry-row,
   228  .table .change-entry-row {
   229    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
   230    height: 38px;
   231  }
   232  
   233  .table .tree-entry-row:last-child,
   234  .table .change-entry-row:last-child {
   235    border-bottom: 0;
   236  }
   237  
   238  
   239  .table .change-entry-row:hover {
   240    background-color: #FBFBFB;
   241  }
   242  
   243  .table .tree-entry-row td,
   244  .table .change-entry-row td,
   245  .actions-runs-list .table td {
   246    padding-top: 5px;
   247    padding-bottom: 5px;
   248    vertical-align: middle;
   249  }
   250  
   251  #run-details {
   252    margin-bottom: 20px;
   253  }
   254  
   255  .table .tree-entry-row td:first-child,
   256  .table .change-entry-row td:first-child,
   257  .table .change td:first-child {
   258    padding-left: 20px;
   259  }
   260  
   261  .table .tree-entry-row td:nth-child(4),
   262  .table .change-entry-row td:nth-child(4) {
   263    padding-right: 20px;
   264    text-align: right;
   265  }
   266  
   267  .table .change-entry-row td:last-child,
   268  .table .tree-entry-row td:last-child {
   269    padding-right: 10px;
   270    text-align: right;
   271  }
   272  
   273  .tree-path .octicon {
   274    color: #007bff;
   275    margin-right: 5px;
   276    font-size: .875rem;
   277  }
   278  
   279  .diff-removed .tree-path,
   280  .diff-removed .tree-path .octicon,
   281  .diff-removed .diff-indicator .octicon {
   282    color: #808080;
   283  }
   284  
   285  td.tree-path {
   286    padding: 0px;
   287    text-align: left;
   288    width: 30%;
   289  }
   290  
   291  .diff-changed {
   292    background-color: var(--color-bg-changed);
   293  }
   294  
   295  .diff-added {
   296    background-color: var(--color-bg-added)
   297  }
   298  
   299  .diff-removed {
   300    background-color: var(--color-bg-removed);
   301  }
   302  
   303  .diff-conflict {
   304    background-color: var(--color-bg-conflict);
   305  }
   306  
   307  .diff-more {
   308    background-color: #ffffff;
   309  }
   310  
   311  .table tr .row-hover {
   312    visibility: hidden;
   313    font-size: 0.7em;
   314  }
   315  
   316  .table tr:hover .row-hover {
   317    visibility: visible;
   318    display: inline-block;
   319  }
   320  
   321  .view-options label {
   322    margin-bottom: 0;
   323    padding: 5px;
   324    font-size: smaller;
   325  }
   326  
   327  .view-options [type='radio'] {
   328    display: none;
   329  }
   330  
   331  .hook-logs {
   332    background: #222222;
   333    color: #FBFBFB;
   334    padding: 40px 10px;
   335  }
   336  .hook-log, .hook-log pre {
   337    background: #222222;
   338    color: #FBFBFB;
   339  }
   340  .hook-log pre {
   341    padding: 20px 0;
   342  }
   343  .hook-log-content {
   344    padding: 0 0 0 20px;
   345  }
   346  .hook-log-title {
   347    font-size: 1.2em;
   348  }
   349  .hook-log-title small {
   350    font-size: 0.7em;
   351    color: #AAAAAA;
   352    margin-left: 10px;
   353  }
   354  
   355  .hook-log-title .btn, .hook-log-title .btn.btn-link  {
   356      color: #fbfbfb;
   357  }
   358  
   359  .change-entry-row-actions {
   360    padding:0;
   361  }
   362  
   363  .table .change-entry-row .change-entry-row-actions .btn-link,
   364  .table .tree-entry-row .change-entry-row-actions .btn-link .btn-link:hover {
   365    visibility: hidden;
   366    font-size: 0.875rem;
   367    padding: 5px;
   368  }
   369  .table .change-entry-row:hover .change-entry-row-actions .btn-link,
   370  .table .tree-entry-row .change-entry-row-actions .btn-link,
   371  .table .tree-entry-row:focus .change-entry-row-actions .btn-link {
   372    visibility: visible;
   373    display: inline-block;
   374  }
   375  
   376  td.change-entry-row-actions {
   377    width: 12%;
   378  }
   379  
   380  .tree-container {
   381    font-size: .9rem;
   382  }
   383  
   384  .tree-container .card .card-header {
   385    padding: 10px;
   386  }
   387  
   388  .tree-container .card .card-body {
   389    padding: 0;
   390  }
   391  
   392  .tree-container .card .card-body > .table {
   393    margin-bottom: 0;
   394  }
   395  
   396  .tree-container .btn.btn-link {
   397    font-size: .9rem;
   398  }
   399  
   400  .tree-container .table {
   401    margin-bottom: 0;
   402  }
   403  
   404  .tree-container .table td {
   405    word-break: break-word;
   406  }
   407  
   408  .commit-metadata {
   409    font-size: 0.85rem;
   410  }
   411  
   412  .branch-table td {
   413    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
   414  }
   415  
   416  .list-group.pagination-group {
   417    margin-bottom: 30px;
   418  }
   419  
   420  .policy-body {
   421    padding: 30px;
   422    background-color: #EEEEEE;
   423  }
   424  
   425  .auth-page .tab-content {
   426    padding: 20px 0;
   427  }
   428  
   429  textarea.form-control.policy-document {
   430    font-family: "SFMono-Regular", Menlo, Consolas, Monospace, serif;
   431    font-size: 10px;
   432    color: #e83e8c;
   433    background-color: #F8F8F8;
   434    padding: 10px;
   435  }
   436  textarea.form-control.policy-document:focus {
   437    font-family: "SFMono-Regular", Menlo, Consolas, Monospace, serif;
   438    font-size: 10px;
   439    color: #e83e8c;
   440    padding: 10px;
   441  }
   442  
   443  .input-group>.input-group-prepend>.input-group-text {
   444    border-top-right-radius: 0;
   445    border-bottom-right-radius: 0;
   446  }
   447  
   448  td .form-group {
   449    margin-bottom: 0;
   450  }
   451  
   452  .section-title {
   453    padding-bottom: 5px;
   454    padding-top: 10px;
   455    margin-bottom: 15px;
   456    border-bottom: 1px solid rgba(0,0,0,.125);
   457    overflow: hidden;
   458  }
   459  
   460  .btn {
   461    text-transform: none;
   462  }
   463  .btn.btn-link, .btn.btn-link:hover, .btn.btn-link:not(.disabled):hover {
   464    padding: 0;
   465    margin-top: 0;
   466    border-bottom-width: 0;
   467  }
   468  
   469  .auth-learn-more {
   470    margin-top: -20px;
   471    margin-bottom: 20px;
   472  }
   473  
   474  .tree-column{
   475    width: 2px;
   476  }
   477  
   478  .change-summary .arrow {
   479    visibility: hidden;
   480  }
   481  
   482  td.change-summary {
   483    padding: 0px;
   484    text-align: right;
   485    width: 10%;
   486  }
   487  
   488  .color-fg-added {
   489    color: var(--color-fg-added);
   490    font-weight: bold;
   491  }
   492  
   493  .color-fg-removed {
   494    color: var(--color-fg-removed);
   495    font-weight: bold;
   496  }
   497  
   498  .color-fg-changed {
   499    color: var(--color-fg-changed);
   500    font-weight: bold;
   501  }
   502  
   503  .color-fg-conflict {
   504    color: var(--color-fg-conflict);
   505    font-weight: bold;
   506  }
   507  
   508  .change-summary-icon {
   509    margin-left: 0.125rem;
   510    padding: .1rem;
   511  }
   512  
   513  .reset-req-sent {
   514    align-items: center;
   515    text-align: center;
   516    margin-top: 50%;
   517    font-size: 18px;
   518  }
   519  
   520  .invited-welcome-msg {
   521    align-items: center;
   522    padding-top: 200px;
   523    padding-bottom: 0px;
   524  }
   525  
   526  .invited-welcome-msg .title {
   527    text-align: left;
   528    padding-bottom: 30px;
   529    font-size: 30px;
   530    font-weight: bold;
   531    color: #2ce5b5;
   532  }
   533  
   534  .invited-welcome-msg .body {
   535    text-align: left;
   536    font-size: 20px;
   537    padding-bottom: 40px;
   538  }
   539  
   540  .action-bar .btn {
   541    border: transparent;
   542  }
   543  
   544  .action-group-right .btn {
   545    margin-left: 5px;
   546  }
   547  
   548  .action-group-left .btn {
   549    margin-right: 5px;
   550  }
   551  
   552  .action-bar .btn.create-user {
   553    background-color: #258c82;
   554  }
   555  
   556  .action-bar .btn.cancel-create-user {
   557    background-color: #7e7e7e;
   558  }
   559  
   560  
   561  
   562  .after-setup-btn {
   563    width: 250px;
   564    margin-top: 7px;
   565    background-color: #0fa276;
   566    color: #FFF;
   567    border: 0;
   568  }
   569  .after-setup-btn:hover {
   570    color: #FFF;
   571    background-color: #4e555b;
   572  }
   573  
   574  .after-setup-card code {
   575    color: #4e555b;
   576  }
   577  
   578  .copy-button {
   579    display: inline-flex;
   580    align-items: center;
   581    height: 100%;
   582    padding: 0 5px 0;
   583  }
   584  
   585  .import-num-objects {
   586    display: inline-flex;
   587    color: green;
   588    font-weight: bolder;
   589    margin: 0 2px;
   590  }
   591  
   592  .import-text {
   593    display: flex;
   594    justify-content: center
   595  }
   596  
   597  .import-success {
   598    color: green;
   599    display: flex;
   600    justify-content: center;
   601    font-size: 160%
   602  }
   603  
   604  .wizard-progress-bar {
   605    margin-bottom: 25px;
   606  }
   607  
   608  .wizard-step-header {
   609    display: flex;
   610    justify-content: left;
   611    margin-bottom: 20px;
   612    margin-top: 40px;
   613  }
   614  
   615  .code-container {
   616    border-radius: 10px;
   617    border: 1px solid #dadada;
   618    background-color: #FBFBFB;
   619  }
   620  
   621  .file-content-card {
   622    margin-top: 0;
   623  }
   624  
   625  .file-content-heading {
   626    background-color: #FBFBFB;
   627    padding: 10px;
   628  }
   629  
   630  .file-content-body {
   631    padding: 0;
   632  }
   633  
   634  
   635  .form-label {
   636    white-space: nowrap;
   637  }
   638  
   639  .download-button {
   640    margin-right: 8px;
   641  }
   642  
   643  
   644  .object-viewer-sql-input.form-control {
   645    background-color: #333333;
   646    font-size: .8rem;
   647    font-family: "SFMono-Regular", menlo, consolas, monospace;
   648    color: #BBB;
   649  }
   650  .object-viewer-sql-input.form-control:focus {
   651    background-color: #333333;
   652    color: #FFFFFF;
   653  }
   654  
   655  .powered-by {
   656    line-height: .8em;
   657    font-size: .8em;
   658    font-style: italic;
   659  
   660  }
   661  
   662  .object-viewer-sql-results {
   663    overflow: auto;
   664    font-size: .75rem;
   665    max-height: 400px;
   666  }
   667  .object-viewer-sql-results th {
   668    font-size: .9rem;
   669    padding: 5px 10px;
   670  }
   671  .object-viewer-sql-results th small {
   672    font-size: .7rem;
   673    color: #888;
   674  }
   675  
   676  .image-container {
   677    padding: 30px;
   678  }
   679  .image-container img {
   680    max-width: 100%;
   681  }
   682  .object-viewer-pdf {
   683    margin: 20px;
   684  }
   685  .object-viewer-pdf object {
   686    width: 100%;
   687    height: 600px;
   688  }
   689  .object-viewer-markdown {
   690    padding: 20px;
   691  }
   692  .object-viewer-markdown h2,
   693  .object-viewer-markdown h3,
   694  .object-viewer-markdown h4,
   695  .object-viewer-markdown h5,
   696  .object-viewer-markdown h6 {
   697    padding-bottom: 0.25em;
   698    margin-bottom: 1.25rem;
   699    border-bottom: 1px solid #DFDFDF;
   700    margin-top: 2rem;
   701  }
   702  
   703  .required-field-label {
   704    color: red;
   705  }
   706  
   707  .otf-diff-update {
   708    background-color: var(--color-bg-changed);
   709  }
   710  
   711  .otf-diff-create {
   712    background-color: var(--color-bg-added)
   713  }
   714  
   715  .otf-diff-delete {
   716    background-color: var(--color-bg-removed);
   717  }
   718  
   719  .otf-diff-unknown {
   720    background-color: var(--color-bg-unknown);
   721  }
   722  
   723  .table.table-diff {
   724    table-layout: fixed;
   725  }
   726  
   727  td.table-operation-type {
   728    padding-left: 30px;
   729  }
   730  
   731  td.table-id, td.table-id-placeholder {
   732    text-align: left;
   733    width: 8%;
   734  }
   735  
   736  td.operation-expansion, td.operation-expansion-placeholder {
   737    padding-right: 0px;
   738    width: 4%;
   739  }
   740  
   741  td.table-operation-details {
   742    padding-left: 30px;
   743  }
   744  
   745  .table-operation-expansion {
   746    color: black;
   747  }
   748  
   749  td.table-diff-type {
   750    padding: 10px;
   751    font-size: medium;
   752  }
   753  
   754  td.entry-type-indicator {
   755    width: 1%;
   756    padding: 2px;
   757  }
   758  
   759  .user-menu-notification-indicator {
   760    top: 8px;
   761    left: 10px;
   762    position: relative;
   763    background: linear-gradient(#54a3ff, #006eed);
   764    border-radius: 50%;
   765    color: white;
   766    height: 10px;
   767    line-height: 20px;
   768    margin-left: 5px;
   769    width: 10px;
   770  }
   771  .menu-item-notification-indicator {
   772    right: 10px;
   773    position: relative;
   774    display: inline-block;
   775    background: linear-gradient(#54a3ff, #006eed);
   776    border-radius: 50%;
   777    color: white;
   778    height: 10px;
   779    line-height: 20px;
   780    margin-left: 5px;
   781    width: 10px;
   782  }
   783  
   784  .getting-started-card {
   785    margin-top: 64px;
   786    background-color: #f5f5f5;
   787    border: none;
   788    color: #22262A;
   789    padding: 104px 72px 32px 72px;
   790    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   791  }
   792  
   793  .getting-started-card > .main-title {
   794    font-style: normal;
   795    font-weight: 300;
   796    font-size: 48px;
   797    line-height: 64px;
   798  }
   799  
   800  .getting-started-card > .text-container {
   801    margin-top: 8px;
   802    margin-bottom: 48px;
   803  }
   804  
   805  .getting-started-card > .text-container h4 {
   806    font-size: 20px;
   807    font-weight: 500;
   808    line-height: 32px;
   809    font-style: normal;
   810    color: #22262A;
   811  }
   812  
   813  .getting-started-card > .text-container p {
   814    font-size: 20px;
   815    font-weight: 200;
   816    line-height: 32px;
   817    font-style: normal;
   818    color: #22262A;
   819  }
   820  
   821  .getting-started-card > .text-container p .sub-title {
   822    font-size: 20px;
   823    font-weight: 300;
   824    line-height: 32px;
   825    font-style: normal;
   826    color: #22262A;
   827  }
   828  
   829  .getting-started-card > .button-container {
   830    margin-bottom: 104px;
   831  }
   832  
   833  .getting-started-card .learn-more {
   834    font-size: 16px;
   835    line-height: 24px;
   836    font-weight: 400;
   837    font-style: normal;
   838  }
   839  
   840  .getting-started-card .getting-started-image {
   841    width: 665px;
   842    position: absolute;
   843    right: 0;
   844    bottom: -43px;
   845  }
   846  
   847  .create-sample-repo-button {
   848    width: 256px;
   849    height: 56px;
   850    font-size: 16px;
   851    line-height: 24px;
   852  }
   853  
   854  .create-sample-repo-button.btn-link {
   855    text-decoration: none;
   856  }
   857  
   858  .create-sample-repo-button.btn-link:hover {
   859    background: none;
   860  }
   861  
   862  .file-drop-zone {
   863    text-align: center;
   864    background-color: #EFEFEF;
   865    height: 80px;
   866    vertical-align: center;
   867    line-height: 80px;
   868    border: 2px dashed #DEDEDE;
   869    color: #999;
   870    font-size: 1.3em;
   871    cursor: pointer;
   872    margin-bottom: 20px;
   873  }
   874  
   875  .file-drop-zone.file-drop-zone-focus {
   876    border: 2px dashed #94B49F;
   877    color: #94B49F;
   878    background-color: #E8F3D6;
   879  }
   880  
   881  .upload-item {
   882    font-family: "SFMono-Regular", menlo, consolas, monospace;
   883    padding: 3px 0;
   884    font-size: .75em;
   885  }
   886  
   887  .upload-item-uploading {
   888    background-color: #EFEFEF;
   889  }
   890  
   891  .upload-item-done {
   892    color: #198754;
   893  }