ContactBridge

Log | Files | Refs | README

main.css (2570B)

      1 :root {
      2     --primary-color: #629da7;
      3     --secondary-color: #301621;
      4     --gradient-start: rgb(57,75,166);
      5     --gradient-end: rgb(98,157,167);
      6     --border-color: rgba(0,0,0,0.14);
      7     --text-gradient-start: #eee;
      8     --text-gradient-end: #333;
      9     --sidenav-width: 250px;
     10     --header-font-family: 'Roboto', sans-serif;
     11     --header-font-size: 4em;
     12     --header-font-size-mobile: 3em;
     13     --header-line-height: 1.2;
     14     --truncate-max-width: 200px;
     15     --content-margin: 150px;
     16 }
     17 
     18 /* Sidenav styles */
     19 .sidenav {
     20     width: var(--sidenav-width);
     21     box-shadow: 0 3px 3px #888888;
     22 }
     23 
     24 .sidenav-content {
     25     display: flex;
     26     flex-direction: column;
     27     justify-content: space-between;
     28     height: 100%;
     29 }
     30 
     31 /* Header styles */
     32 .header {
     33     font-family: var(--header-font-family);
     34     border-bottom: 1px solid var(--border-color);
     35 }
     36 
     37 h1, h1.mobile {
     38     background: -webkit-linear-gradient(var(--text-gradient-start), var(--text-gradient-end));
     39     -webkit-background-clip: text;
     40     -webkit-text-fill-color: transparent;
     41     margin: 0;
     42     padding: 0.2em 0;
     43     line-height: var(--header-line-height);
     44 }
     45 
     46 h1 {
     47     font-size: var(--header-font-size);
     48 }
     49 
     50 h1.mobile {
     51     font-size: var(--header-font-size-mobile);
     52     text-align: center;
     53     flex-grow: 1;
     54 }
     55 
     56 /* User view styles */
     57 .user-view {
     58     background: linear-gradient(268deg, var(--primary-color), var(--secondary-color));
     59 }
     60 
     61 /* Content styles */
     62 .content {
     63     max-width: 100%;
     64     margin-left: var(--content-margin);
     65     overflow: hidden;
     66 }
     67 
     68 @media only screen and (max-width: 992px) {
     69     .content {
     70         margin-left: 0;
     71     }
     72 }
     73 
     74 /* Table and row styles */
     75 .row, table tr, table td {
     76     margin: 0 !important;
     77 }
     78 
     79 .row {
     80     min-width: 500px;
     81     max-width: 100%;
     82 }
     83 
     84 table td {
     85     max-width: 150px;
     86     overflow: hidden;
     87     white-space: nowrap;
     88     text-overflow: ellipsis;
     89 }
     90 
     91 /* Truncation styles */
     92 .truncate-td {
     93     max-width: var(--truncate-max-width);
     94     white-space: nowrap;
     95     overflow: hidden;
     96     text-overflow: ellipsis;
     97 }
     98 
     99 /* Sorting header styles */
    100 .sortable-header {
    101     cursor: pointer;
    102     transition: all 0.3s ease;
    103     white-space: nowrap;
    104 }
    105 
    106 .sortable-header:hover {
    107     text-decoration: underline;
    108 }
    109 
    110 /* Delete button styles */
    111 .delete-button {
    112     color: red;
    113     transition: color 0.1s;
    114     cursor: pointer;
    115 }
    116 
    117 .delete-button:hover {
    118     color: darkred;
    119 }
    120 
    121 /* Sidenav trigger styles */
    122 .sidenav-trigger {
    123     color: black;
    124     flex-shrink: 0;
    125 }
    126 
    127 /* Flex container for navigation */
    128 .nav-center {
    129     display: flex;
    130     justify-content: space-between;
    131     align-items: center;
    132 }