Results 1 to 2 of 2

Thread: Optimizing my CSS file

  1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    62

    Default Optimizing my CSS file

    Hi,

    I have read this blog post and try to optimize my CSS but I am pretty sure there is still work to do as it weights 700 Ko. The blog I mentioned speaks of spliting the scss file and points that it is important to avoid importing default elements twice but I am not sure I am really doing it, as I am not sure I am not importing the default fonts and icons (I am not using its). Does anyone see something I could improve in the following file?

    Code:
    $base-color: #990000 !default;$active-color: #FFCCCC !default;
    $page-bg-color: #fefefe !default;
    $form-light: #fad9da !default;
    $form-thumb-size: 1.7em;
    
    
    @import 'sencha-touch/default';
    @import 'sencha-touch/default/src/_Button';
    @import 'sencha-touch/default/src/_Panel';
    @import 'sencha-touch/default/src/_MessageBox';
    @import 'sencha-touch/default/src/_Toolbar';
    @import 'sencha-touch/default/src/form/_Panel';
    @import 'sencha-touch/default/src/form/_FieldSet';
    @import 'sencha-touch/default/src/field/_Field';
    @import 'sencha-touch/default/src/field/_Checkbox';
    @import 'sencha-touch/default/src/field/_Radio';
    @import 'sencha-touch/default/src/field/_Select';
    @import 'sencha-touch/default/src/field/_Slider';
    @import 'sencha-touch/default/src/field/_Spinner';
    @import 'sencha-touch/default/src/field/_TextArea';
    @import 'sencha-touch/default/src/dataview/_List';
    @import 'sencha-touch/default/src/picker/_Picker';
    @import 'sencha-touch/default/src/slider/_Slider';
    @import 'sencha-touch/default/src/slider/_Toggle';
    @import 'sencha-touch/default/src/tab/_Panel';
    
    
    $include-pictos-font: false;
    $include-default-icons: false;
    @include icon-font('icomoon', inline-font-files(
      'icomoon.woff', woff, 
      'icomoon.ttf', truetype,
      'icomoon.svg', svg
    ));
     
    @include icon("setting_dragon"  , "\61", 'icomoon');
    @include icon("sablier"  , "\62", 'icomoon');
    @include icon("shield1"  , "\63", 'icomoon');
    @include icon("sigma"  , "\64", 'icomoon');
    @include icon("swords"  , "\65", 'icomoon');
    @include icon("delete_black2"  , "\66", 'icomoon');
    @include icon("refresh3"  , "\67", 'icomoon');
    @include icon("px"  , "\68", 'icomoon');
    @include icon("minus2"  , "\69", 'icomoon');
    @include icon("look"  , "\6a", 'icomoon');
    @include icon("folder_delete2"  , "\6b", 'icomoon');
    @include icon("epee"  , "\6c", 'icomoon');
    @include icon("dragon"  , "\6d", 'icomoon');
    @include icon("docs1"  , "\6e", 'icomoon');
    @include icon("delete1"  , "\6f", 'icomoon');
    @include icon("add1"  , "\70", 'icomoon');
    @include icon("arrow_left"  , "\71", 'icomoon');
    @include icon("arrow_right"  , "\72", 'icomoon');
    @include icon("arrow_updown"  , "\73", 'icomoon');
    @include icon("bag"  , "\74", 'icomoon');
    @include icon("bookmarks"  , "\75", 'icomoon');
    @include icon("check2"  , "\76", 'icomoon');
    @include icon("coeurVie"  , "\77", 'icomoon');
    @include icon("d4"  , "\78", 'icomoon');
    @include icon("d10"  , "\79", 'icomoon');
    @include icon("d20_3"  , "\7a", 'icomoon');
    @include icon("d8"  , "\33", 'icomoon');
    @include icon("d6"  , "\42", 'icomoon');
    @include icon("d12"  , "\43", 'icomoon');
    @include icon("d20"  , "\44", 'icomoon');
    @include icon("d100"  , "\45", 'icomoon');
    @include icon("muscle"  , "\46", 'icomoon');
    @include icon("mec"  , "\47", 'icomoon');
    @include icon("tux"  , "\48", 'icomoon');
    @include icon("menu"  , "\49", 'icomoon');
    @include icon("fire"  , "\4a", 'icomoon');
    @include icon("droplet"  , "\4b", 'icomoon');
    @include icon("wand"  , "\4c", 'icomoon');
    @include icon("cloud"  , "\4d", 'icomoon');
    @include icon("des"  , "\4e", 'icomoon');
    @include icon("magic"  , "\4f", 'icomoon');
    @include icon("refresh3b"  , "\50", 'icomoon');
    @include icon("chest"  , "\51", 'icomoon');
    @include icon("codeigniter"  , "\52", 'icomoon');
    @include icon("home"  , "\53", 'icomoon');
    @include icon("remove"  , "\54", 'icomoon');
    @include icon("heart"  , "\55", 'icomoon');
    @include icon("coeurHP"  , "\56", 'icomoon');
    @include icon("diamond"  , "\57", 'icomoon');
    @include icon("s1"  , "\58", 'icomoon');
    @include icon("s2"  , "\59", 'icomoon');
    @include icon("s3"  , "\5a", 'icomoon');
    @include icon("info_plain"  , "\31", 'icomoon');
    @include icon("chapeau"  , "\32", 'icomoon');
    @include icon("A"  , "\41", 'icomoon');
    @include icon("lab"  , "\34", 'icomoon');
    @include icon("graduate"  , "\35", 'icomoon');
    @include icon("armure"  , "\36", 'icomoon');
    @include icon("memAbi"  , "\37", 'icomoon');
    @include icon("s0"  , "\38", 'icomoon');
    @include icon("Hands"  , "\39", 'icomoon');
    @include icon("download"  , "\30", 'icomoon');
    @include icon("envelope"  , "\2c", 'icomoon');
    @include icon("magnifier"  , "\21", 'icomoon');
    @include icon("flocon"  , "\3a", 'icomoon');
    @include icon("illustrations"  , "\3c", 'icomoon');
    
    
    @include sencha-button-ui('secondary', #FFCCCC, '');
    @include sencha-button-ui('tertiary', #003a3c, '');
    @include sencha-button-ui('quartet', #93e3e4, '');
    @include sencha-button-ui('quintet', #f0efed, '');
    @include sencha-button-ui('rougePet', #e2020d, '');
    @include sencha-button-ui('rougePetMed', #fadd81, '');
    @include sencha-button-ui('rougePetClair', #fefbc8, '');
    @include sencha-button-ui('vertClair', #98efad, '');
    
    
    .x-tabbar .x-tab {
      color: #1cff04;
      border-bottom: 1px solid transparent;
    }
    
    
    .x-tabbar .x-tab-active {
      color: white;
    }
    
    
    .x-input-el:checked + .x-field-mask::after {
      color: green;
    }
    
    
    .x-field-checkbox .x-field-mask::after,
    .x-field-radio .x-field-mask::after {
      color: #dddddd;
    }
    
    
    .x-input-radio:checked + .x-field-mask::after {
      background: #990000;
    }
    
    
    .x-item-disabled input,
    .x-item-disabled .x-input-el,
    .x-item-disabled .x-spinner-body,
    .x-item-disabled select,
    .x-item-disabled textarea,
    .x-item-disabled .x-field-clear-container {
      background-color: white;
    }
    
    
    .x-form-label {
        background-color: #fad9da;
    }
    
    
    .x-field-small-radio+.x-field-mask::after {
        content: '';
        position: absolute;
        width: 14px;
        height: 14px;
        top: 9px;
        right: 8px;
        -webkit-border-radius: 14px;
        -moz-border-radius: 14px;
        -ms-border-radius: 14px;
        -o-border-radius: 14px;
        border-radius: 14px;
    }
    .x-field-small-radio+.x-field-mask::before {
        content: '';
        position: absolute;
        width: 22px;
        height: 22px;
        top: 5px;
        right: 4px;
        -webkit-border-radius: 22px;
        -moz-border-radius: 22px;
        -ms-border-radius: 22px;
        -o-border-radius: 22px;
        border-radius: 22px;
    }
    
    
    listSel {
    }
    .listSel .x-list-item {
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        -o-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    
    listP {
    }
    
    
    .listP .x-list-disclosure:before {
        font-size: 16px;
        top: -7px;
    }
    .listP .x-list-disclosure {
        -webkit-border-radius: 22px;
        -moz-border-radius: 22px;
        -ms-border-radius: 22px;
        -o-border-radius: 22px;
        border-radius: 22px;
        width: 22px;
        height: 22px;
        margin: 2px 5px 0 0;
    }
    
    
    listP_G {
    }
    
    
    .listP_G .x-list-disclosure:before {
        font-size: 16px;
        bottom: -6px;
        right: 2px;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .listP_G .x-list-disclosure {
        -webkit-border-radius: 22px;
        -moz-border-radius: 22px;
        -ms-border-radius: 22px;
        -o-border-radius: 22px;
        border-radius: 22px;
        width: 22px;
        height: 22px;
        margin: 2px 5px 0 0;
    }
    
    
    list_G {
    }
    .list_G .x-list-disclosure:before {
        bottom: -2px;
        left: -1px;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    
    
    listP_B {
    }
    .listP_B .x-list-disclosure:before {
        font-size: 16px;
        top: 2px;
        right: -14px;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .listP_B .x-list-disclosure {
        -webkit-border-radius: 22px;
        -moz-border-radius: 22px;
        -ms-border-radius: 22px;
        -o-border-radius: 22px;
        border-radius: 22px;
        width: 22px;
        height: 22px;
        margin: 2px 5px 0 0;
    }
    
    
    list_B {
    }
    .list_B .x-list-disclosure:before {
        right: -3px;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    
    
    listP_H {
    }
    .listP_H .x-list-disclosure:before {
        font-size: 16px;
        top: -1px;
        left: -11px;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    .listP_H .x-list-disclosure {
        -webkit-border-radius: 22px;
        -moz-border-radius: 22px;
        -ms-border-radius: 22px;
        -o-border-radius: 22px;
        border-radius: 22px;
        width: 22px;
        height: 22px;
        margin: 2px 5px 0 0;
    }
    
    
    list_H {
    }
    .list_H .x-list-disclosure:before {
        left: -3px;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    
    
    .x-toggle {border:none;height:1.7em}
    .x-thumb {height:1.7em;width:1.7em}
    .x-toggle .x-thumb::before {left:0;top:0;}
    .x-thumb::before {background-image: -webkit-linear-gradient(white,#CDCDCD 2%,#fff);background-image: linear-gradient(white,#CDCDCD 2%,#fff);height:1.7em;width:1.7em}
    .x-toggle-on,.x-toggle-off {background-size:100% 100%;}
    .x-toggle-on {background-image:url('data:image/png;base64,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');}
    .x-toggle-off {background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJoAAAA2CAYAAAA/IYCCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8yNC8xMonyNukAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAANwklEQVR4nO2dW3PbRBvH/7Ikn+LzMc7BaXNqCFOmgWlTkgzTGQpDb4DSSz4Q34KrXvcCuKDMkHQYYBomhJaUJI3TtCWnxrEdW7YjWad9L4z0WrLd2K5pSavfjKepDo/W0t/P7j777Ir66quv0CZUsx1ffvmlurq6iu3tbeTzeUiSVD2BanqKxSuEoijYbDY4HA64XC54PB74/X6EQiEMDQ0hkUh07cFRX3/9dVvHmzdcvXpVffjwIR4+fIijoyM4nU64XC44nU7YbLZuldPiX4AQov8ryzJUVYWiKJBlGTabDbFYDIODgxgeHn5h0VHfffddW8drf4yOjqrLy8tIpVKQZRmRSATBYBDBYNDyYKcEQghUVQUhBIQQKIqiC00QBAiCAFEU4XQ6MTQ0hLGxMYyOjnb0cKk7d+60dfzw8LC6uLiIlZUVCIKAeDyOt956C263u5PrW7wiNG+m/a2JTvNqkiRBkiTwPK+LjqZpDA0NYWpqqm0PR/3xxx8tH8txnLq4uIjDw0OEQiG8//77CAQCdQW3OD00EpmqqpBlGbIsQxRFiKKI4+NjHB8fg+d59PT0YHJyEtPT0y2LjUqlUiceFAwGyfz8PO7fvw+GYTA3N4dkMgmapi2BnXI0odWKTVVVSJKki02SJFQqFfA8j1KphGKxCEmSMDIygsuXLyMUCp0oOMblcj33AEVRyK1bt7C1tYUzZ87gypUr8Hg8XfuiFq+W2g5BreAkSdLba5IkweFwwOl0wul0wm63g+M4bGxsoFQqYW5ujvT19T1XbNTh4WHTnRzHkR9++AHFYhEXL17EuXPnwLJsd7+pxSvD3E4DYPBqtZ0DURR1zyYIAjiOQz6fR7lc1ptRyWSyqdgYmqYb7iiXy2R+fh4AcO3aNSQSCStc8Rpj9mxab1QTGsuykCQJDMOAYRiwLAuWZcEwDPL5PBYXF8GyLGnWSWCaXXd+fh6KouDKlSuIxWJWyOI1R3u+2r82mw2EENA0DYZhoCiKQWAsy8Jms4FhqhLKZDL49ddfcePGjYb2G7qoO3fuIJPJYHp62hLZG4o2amCz2UDTNFiWhcPh0EcR3G43PB4PvF4vwuEwvF4vdnZ2cPv27Ya9wzqPlkqlyMbGBqampjAwMGCJ7A2HoihQFAVCiP63JkDtA0APizx+/Bj37t0jFy5cMAjHIDRRFMnS0hLi8TjOnz+PZu03izeP2ipVE5z2AWBoz62trWFgYIBEIhFdbIaq8/fff0exWMSlS5fgdDpf5vewOAXUejOtvWa32+FyueD1ehEKhRAIBFAoFPDnn38aztU9Wj6fJw8ePEAymUQsFnvpX8Li9KB5Ma0jQAiBy+WCqqoQRRHlchlPnz7F9vY2GRwcpIAaoa2urkIQBLz77rtWlXkClUoF2WwW5XIZgiDA5XKhp6cHkUjkjYkzmsUGVGNwXq8Xfr8fBwcHSKVSGBwcrB4HALIsk42NDYRCIYTD4VdQ7NPBo0ePsLy8jCdPnkBRlLr9LMvi7NmzuHjxon6Dm/H333/j+++/77gs8Xgcn332WddttYMmNq1Xqqoq3G43gsEgSqUStre3kcvlSCgUohigegMPDw/x+eefW96sAZIkYWFhAcvLy/o2rVGsQQiBJEnY2NhAKpXCzMwMZmdnmwa5RVFELpfruEy1Q4fdtNUuWrtNi7dpCZQ+nw87OzvY2tpCKBSqerTNzU14vV709/d3fMHXlcPDQ3z77bdIp9N6I9gsMg0toi7LMn755Rc8efIEn376Kfx+f92xDMPA4XB0XK7ac7tpq1MoitK9mtPphMfjgdvtxt7eHgDApqoqefbsGfr7+19I2a8jxWIRN2/eRDqd1gOWNE0boug+n08/nqIo0DQNu90OhmGwu7uLmzdvQhTFhvbN8ah2Pmahd9NWu5h7o5rQenp6dE/L7O7uolQq4cMPP7SCsyZ++ukniKIIh8NhqAKnpqbw9ttvY2BgAE6nE8fHx9je3sa9e/ewtram/7ppmkapVMLdu3fxwQcfnHi9aDSKmZmZlsp2khfqpq1W0GJq5io0k8lgfX2dMOl0Gh6Px+oEmNjb28ODBw/gcDgMP8CrV69ibm4OwP+rSrfbjXPnzmF8fBy3b9/G3bt3AUCf+PHbb7/hnXfe0ZNEm+H1ejE1NdVS+WRZRrFYfCm2WqW2vcayrJ5WlM1mwWSzWQSDQStAa+LHH38EwzAGkV2+fBlzc3OoVCoQRRGyLAOo3mCGYWC32/HJJ5+A4zisrq7q+wBgYWEB169ff+41VVVFuVxuqXyqqr40W61i9mpOpxMOhwO5XA4Mx3EIBoNWb7MGjuOwv78Pu92ub6MoCtPT0zg+PkalUjEcr/U4JUmCqqqYmZnRhQZUG+ubm5tQFOW595kQ0rQ91y7dtNUOmlerzfTgeR62UqlkTY0zkc1mwbKswZuNjY3B5XLVicwMz/OIxWJIJBL6Nu1X/iIhiNNEbafIbrejUqmAURTF8Mu1AHK5XN0Pr6+v70SRaQiCgL6+Puzv7+vbbDYbstksotFo0/NKpZLBEzZjYGDA0Nv9t221Q22GB03ToGkasixXhWb1No008jxut7vltoyiKHXzKiiKwtHR0XPPS6fT+Oabb060f+PGjRPF0U1bnaCJjGGYamYuRVGw2+3WvEwT5h5iJBJp6x6Fw+E6G4QQ3UZPT0/D/a2I2efzGcrSLVu1E1S0meudzHKrjTPqbTaWZSHLsuXVavB4PHX3QxCEtu6RKIp1x9farc3l0tAeykmYg6zdslVrQxss1yamdCI4TbQOhwOMw+HQu+kWVcLhMDY3Nw3bSqVSWzaKxWLdw6+NVTYSh9frxcjIyIm2zUNa3bRlRpuMooVzWhFcbTKkbsPtduur/lhUCYVCdQ/upPaVmVwuV2cjGAwa/t9ofysjCJIk1T3wbtpqhN1uB03TqFQqLR1fO5vK5XKBCQaDel1sVZ9VgsFgXbWztbWFmZmZloZrCoUC9vf362yYhdaoamuUftQK3bTVDC2hQBCElgLG2mx3r9dbFVomkwFgrWOm4fP54PV6DdWloihYW1traVhnZWWlrjqLxWKGpMhG1R3QepT+pDZap7ZOQhtWEwThRM+mLang9/thi0Qi4Hn+lUSR/6tQFIXZ2VnDBAybzYbl5WVsbW0999zV1VV9YL32Mzs72/A6jSZ6dFrmbtk6CW0ssxlar1VbICYQCIDp7e0FRVHI5XJWPloNw8PDGBwcxO7urr6NEIKFhQUUi0WMjIzA6/Xq+/L5PDY2NnD//n1DKhFQHVWIx+MGD9OoV2g+r1W6aatV7Ha7HgIxo1WbgiDAbrdjdHSUYnw+HxUIBMjBwYEltBoURcHMzAxu3bpVt1zA0tISlpaW4Ha74ff7cXR0BEEQABinowHVds2lS5caPhCzOF5EGN201QoURTWtQhVFQaVSQaVS0Xu1NgBIJBLY2dmxqk8TgUAAH330EVwul2FIhaZpvVF8cHAAURQN6czafq/Xi2vXrjUM9DaaiNupOLppqx3M2S3A/xMMSqUSeJ5HPB4H8I/QhoaGIMsynj179q8X7jShqiqSySS++OILfda+WVC1Qy1adUVRFIaHh3H9+vW6KlOjUZvqRYT2Mttotdc1Jx8oiqIv2MeyLCYnJ6vT7SiKgt/vpxKJBHn69Cn6+/sNU6jedLQ40Mcff4z19XWsr6+jUCg0PT4UCmFychKjo6N6HKnRQ2/UrurUE3XTVruY054kSdKFVptAQGmjAvv7+2RxcRHT09OGFBeLKrUPk+M45HI58DwPSZL02drhcFgfTG9lnND8kDodW+y2rXZQVRXHx8f6pJxCoYCDgwMUi0VcuHABvb29xgnEiUSC6u3tJY8fP0Y0GrW8mgltbQmbzQafz9c046HVwezXBe3HRwgBz/MoFosol8uIRqO6yADT2hsTExPgOA4HBwcvubinh9qVEBt92hGZ+dwX8UDdtNUuhBBUKhV9fVuapjE8PGw4xiC0QCBAJZNJpFKptgeRLd5cJEkyLDU6ODiIYDBoaCDWDZBNTk5SLMsilUpZ4Q6LE1EUBTzP60KLRqMYHx+v64VQzQZe5+fnSSKRwNjYmNVes2iILMvgOA57e3vI5XJgWRazs7MNu7pNM+POnz+P3d1dPHr0yEojsjCgtck4jkM2m0WhUADDMJiYmGh6TlOPBgB7e3tkbW0NiUQCZ8+etZZMeMPROhiCIKBQKKBQKCCXy0FVVYyPjyMejzdf/v15hvv6+iiapslff/0Fnudx5syZhkmBFm8GiqJAEAQUi0XkcjlkMhk4HA5MTEwgGo0+/4UWrSbH/fzzz4QQor3H8Y1ZcM6iKjDtfVClUgn5fB4cx8Hj8eC9995ryetQ7cR9VlZWSDqdRiQSQTKZRCAQsLzba0rtO6G0QGyxWESpVIKqqojH4229UrEtoQFAOp0m2vT+/v5+xGIx9PT0WII7pdSmQGni0hr7giDoLxorl8t62s/AwADC4XB7r1HsNDCby+XIzs4OZFlGKBRCKBSC2+3+1xPuLLqLJrDaF4xJkqQLi+d5yLIMn8+HeDze8ZuIqfX19RcqaCAQIHt7e8jn87DZbHC73XA6nXXpIxb/TczvfNLEJssyHA4HAoEAIpFI2x7MDFObqtwJu7u7egEmJibIzs4OMpkMJEmqyza1+G+irf5jt9t1cf2zcHbXHtz/AM2MJL5gSxuoAAAAAElFTkSuQmCC')}
    .x-thumb:after {
        content: ;
        position: absolute;
        width: 1.43em;
        height: 1.43em;
        top: 0.135em;
        left: 0.135em;
        border: 1px solid #919191;
        -webkit-border-radius: 0.715em;
        border-radius: 0.715em;
        background-image: none;
        background-color: #dddddd;
        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(3%, #eaeaea), color-stop(100%, #d0d0d0));
        background-image: -webkit-linear-gradient(top, #ffffff, #eaeaea 3%, #d0d0d0);
        background-image: linear-gradient(top, #ffffff, #eaeaea 3%, #d0d0d0);
        -webkit-background-clip: padding;
        background-clip: padding-box;
    }
    
    
    .x-form-fieldset {
      margin: 0 0 0;
      color: white;
    }
    
    
    .label2 {
      background-color:#e2020d;
      color: #ffffff;
    }
    
    
    .labelTit {
      background-color:#fdabab;
      color: #000000;
    }
    
    
    .pressedBut {
      background: #ffd03c !important;
      color: #000000 !important;
      -webkit-box-shadow: inset -2px -2px 2px 2px#f4c739;
      box-shadow: inset 1px 1px 1px 1px #f4c739;
    }
    
    
    .pressedBut2 {
      background: #b6e2e3 !important;
      color: #000000 !important;
      -webkit-box-shadow: inset -2px -2px 2px 2px#acd6d7;
      box-shadow: inset 1px 1px 1px 1px #acd6d7;
    }
    
    
    .perso-resume {
        img {
          width: 100%;
          margin-bottom: 1%;
          margin-left: 1%;
          float: right;
          display: block;
        }
        h3 {
            float: left;
            padding: 0.03em;
            font-size: 1.3em;
            text-indent: 0.2em;
            font-family: Times New Roman;
            font-weight: bold;
            text-transform: uppercase;
            color: #ffffff;
            border-bottom:0px solid #00CC00;
            border-top:0px solid #00CC00;
            background-color: #003300;
            width: 100%;
        }
        h5 {
            float: center;
            font-size: 1.3em;
            font-family: Times New Roman;
            font-weight: bold;
            text-transform: uppercase;
            text-align:center;
        }
        p {
            background-color: #ebf9e4;
            font-size: 0.7em;
            font-style: italic;
            padding: 0.4em;
            width: 99%;
            border-radius: 3px;
            margin: 0.3em;
        }    
        progress {
            display: block;
            -webkit-appearance: none;
            border: none;
        }
        progress::-webkit-progress-bar {
            background: #a2cba2;
            border-radius: 50px;
            padding: 2px;
            box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
        }
        progress::-webkit-progress-value {
            border-radius: 50px;
            box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
            background: #00CC00;
            -webkit-box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            -moz-box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
        }
    }
    
    
    .comp-resume {
        border-collapse:collapse;
        td, th {
            font-size:1em;
            border:2px solid #003300;
            padding:3px 7px 2px 7px;
            text-align:center;
        }
        th {
            font-size:1.1em;
            text-align:center;
            padding-top:5px;
            padding-bottom:4px;
            background-color:#003300;
            color:#ffffff;
        }
        tr.alt td {
            color:#000000;
            background-color:#f5f3d6;
        }
    }    
    
    
    .monstre-resume {
        img {
            width: 100%;
            float: right;
        }
        h4 {
            float: left;
            padding: 0.03em;
            font-size: 1.4em;
            text-indent: 0.5em;
            font-family: Times New Roman;
            font-weight: bold;
            text-transform: uppercase;
            color: #ffffff;
            border-bottom:0px solid #00CC00;
            border-top:0px solid #00CC00;
            background-color: #003300;
            width: 100%;
        }
        h3 {
            float: left;
            padding: 0.03em;
            font-size: 1.3em;
            text-indent: 0.2em;
            font-family: Times New Roman;
            font-weight: bold;
            text-transform: uppercase;
            color: #000000;
            border-bottom:1px solid #000000;
            border-top:1px solid #000000;
            width: 100%;
        }
        p {
            background-color: #ebf9e4;
            font-size: 0.7em;
            font-style: italic;
            padding: 0.4em;
            width: 99%;
            border-radius: 3px;
            margin: 0.3em;
        }
    }    
    
    
    .persos-list-appearance {
        img {
            height: 45px;
            width: 45px;
            padding: 0px;
            border-radius: 5px;
            float: left;
        }
        h1 {
            margin-top: 5px;
            margin-left: 55px;
            font-size: 16px;
        }
        h3 {
            margin-left: 55px;
            font-size: 14px;
            color: #6e6e6e;
        }
    }
    
    
    .persos-list-appearance2 {
        img {
            height: 22px;
            width: 22px;
            padding: 0px;
            border-radius: 2px;
            float: left;
        }
        h1 {
            float: left;
            margin-left: 5px;
            font-size: 8px;
        }
        h3 {
            float: left;
            margin-left: 5px;
            font-size: 7px;
            color: #6e6e6e;
        }
    }
    
    
    .entrepots-list-appearance {
        h4 {
            float: left;
            font-size: 8px;
        }
    }
    
    
    .entrepots-list-appearance .x-innerhtml{
        padding: 5px !important;
    }
    
    
    .sorts-list-appearance {
        img {
            height: 30px;
            width: 30px;
            padding: 0px;
            border-radius: 5px;
            float: left;
            margin-bottom: 0px;
        }
        h1 {
            margin-left: 40px;
            font-size: 16px;
            margin-top: 5px;
        }
        h2 {
          margin-left: 35px;
          font-size: 18px;
          margin-top: 5px;
        }
    }
    
    
    .sorts-list-appearance3 {
        img {
            height: 15px;
            width: 15px;
            padding: 0px;
            border-radius: 2px;
            float: left;
            margin-bottom: 5px;
        }
        h1 {
            margin-left: 18px;
            font-size: 9px;
            margin-top: 2px;
        }
        h2 {
          margin-left: 25px;
          font-size: 8px;
          margin-top: 2px;
        }
        h3 {
            float: left;
            margin-left: 3px;
            font-size: 8px;
            margin-top: 2px;
        }
    }
    
    
    .sorts-list-appearance3 .x-innerhtml{
        padding: 5px !important;
    }

  2. #2
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454

    Default Would be nice...

    It would be nice if there was a more automated way of doing this in Sencha.

    Have you tried the Google Chrome audits? If you run that, it tells you how much of your CSS in percent is unused. The only thing is you then have to manually go through your CSS file and remove stuff. But I ran a Sencha Touch app though it and it said 85% of the classes in my CSS file were unused!

    If anyone has any more tips it would be great...

    :-)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •