search

bmbrands / theme_bootstrap

A Moodle theme based on the Bootstrap CSS framework
113 stars 112 forks source link

hardcoded colors #206

Open ds125v opened 10 years ago

ds125v commented 10 years ago

There's still a bunch of them. This will show them:

git grep '#[a-fA-F0-9]{3,6}' -- less/moodle/**

Some are more important than others, some need the whole CSS replaced with something better.

ds125v commented 10 years ago

Current output:

less/moodle/admin.less
243:.path-admin #defineroletable {
326:    border: 1px solid #000;
330:    border: 1px solid #000;
335:    border: 1px solid #000;

less/moodle/badges.less
42:    background-color: #FFFFFF;

less/moodle/buttons.less
36:#addcontrols {
41:#addcontrols input,

less/moodle/calendar.less
11:    background-color: #FFD3BD;
14:    background-color: #D6F8CD;
17:    background-color: #FEE7AE;
20:    background-color: #DCE7EC;

less/moodle/chat.less
4:    background-color: #fff;
39:            border-top: 1px solid #ddd;
40:            border-bottom: 1px solid #fff;
42:                border-top: 1px solid #fff;
43:                border-bottom: 1px solid #ddd;
48:                border: 1px solid #ccc;
60:            color: #777;
63:            background-color: #fff;
64:            border: 1px dotted #ddd;
71:                color: #777;
75:            background-color:#f6f6f6;

less/moodle/core.less
44:#add,
155:        background-color: #FFEE69;
156:        border: 1px solid #A6982B;
157:        border-top-color: #D4C237;
158:        color: #000000;
472:    border: 1px solid #CCC;
493:    background: #eee;
551:    background-color: #fff;
568:    border: 1px solid #000;
569:    background-color: #FFF;
581:    color: #333;
629:    background-color: #CCC;
738:    background-color: #AAA;
768:    outline: #000 dotted 0;
773:    background-color: #fff;
774:    border: 1px solid #ccc;
776:    box-shadow: 5px 5px 20px 0 #666;
785:    color: #333;
787:    text-shadow: 1px 1px 1px #fff;
789:    border-bottom: 1px solid #bbb;
790:    background: #ccc;
791:    #gradient > .vertical(#fff, #ccc);
819:    color: #555;
824:    background: #FFF;
859:    background-color: #EEE;
860:    border: 1px solid #ccc;
864:    border: 1px solid #ccc;
865:    background-color: #fff;
876:    color: #333;
878:    border-bottom: 1px solid #eee;
884:    background-color: #FFF;
965:    background: #F2F2F2;
980:    border-bottom: 1px solid #BBBBBB;
987:    box-shadow: inset 0 0 30px 0px #ccc;
1020:    border-bottom: 1px solid #FFFFFF;
1058:    box-shadow: 0px 0 10px 0 #ccc;
1079:    border: 1px solid #DDD;
1091:    border: 1px solid #ddd;
1092:    color: #9DA0A4;
1103:    border-color: #E1E1E8;
1104:    border-left: 1px solid #E1E1E8;
1105:    border-right: 1px solid #E1E1E8;
1106:    background-color: #F7F7F9;

less/moodle/course.less
174:        border: 1px solid #DDD;
230:            border-bottom: 2px solid #eee;
354:    box-shadow: 2px 2px 5px 1px #ccc;
370:    color: #909090;
371:    border: 1px dashed #909090;
525:        border:1px solid #eeeeee;
532:            background-color:#eeeeee;
624:        border: 1px dotted #ddd;
674: * Background (reg)         #F5F5F5
675: * Background (light        #fafafa
676: * Background (highlight)   #ddffaa
677: * Borders                  #e1e1e8
680:    background-color:#fff;
697:        border:1px solid #e1e1e8;
705:        background-color:#F5F5F5;
706:        border-bottom:1px solid #e1e1e8;
769:                background-color:#fafafa;
779:                background-color:#FFFFD8;
780:                border-top-color: #e1e1e8;
781:                border-bottom-color:#F5F5F5;
785:                border-top-color:#e1e1e8;
788:                border-bottom-color:#e1e1e8;
804:            border-top-color:#F5F5F5;
850:                color: #333;
853:                color:#a1a1a8;
889:                background-color:#ddffaa;
899:                color:#a1a1a8;
930:                background-color:#ddffaa;
943:            color:#a1a1a8;
966:        border-bottom:1px solid #e1e1e8;
995:            background-color:#FFF;
1000:                background-color:#E5EFFD;
1090:            border:1px solid #e1e1e8;
1091:            background-color:#FFF;
1115:            border:1px solid #e1e1e8;
1116:            background-color:#FFF;

less/moodle/filemanager.less
7:    color: #555555;
22:    background: #F2F2F2;
24:    border: 1px solid #fff;
26:    box-shadow: 5px 5px 20px 0 #666;
30:    border-bottom: 1px solid #BBBBBB;
34:    color: #333;
36:    text-shadow: 1px 1px 1px #fff;
37:    filter: dropshadow(color=#FFFFFF, offx=1, offy=1);
38:    #gradient > .vertical (#fff, #ccc);
41:    background: #fff;
47:    box-shadow: 2px 2px 3px .1px #999;
57:    background: #FFFFFF;
59:    border: 1px solid #CCCCCC;
68:    border-right: 1px solid #BBBBBB;
75:    background: #F2F2F2;
76:    border-bottom: 1px solid #BBBBBB;
114:    background: #F2F2F2;
145:    background: #FFFFFF url('[[pix:a/search]]') no-repeat 7px 7px;
149:    border: 1px solid #BBBBBB;
154:    border: 1px solid #CCC;
155:    border-bottom: 1px solid #B3B3B3;
166:    border-right: 1px solid #CCC;
172:    background-image: radial-gradient(ellipse at center, #ffffff 60%,#dfdfdf 100%);
173:    background-color: #ebebeb;
178:    background-image: radial-gradient(ellipse at center, #ffffff 40%,#dfdfdf 100%);
179:    background-color: #dfdfdf;
233:    border: 1px solid #FFFFFF;
237:    border: 1px solid #ddd;
240:    box-shadow: 1px 1px 2px 0 #ccc;
243:    background: #fff;
244:    border: 1px solid #ddd;
245:    box-shadow: inset 0 0 10px 0px #ccc;
258:    background: #FFFFFF;
265:    border: 0 solid #BBBBBB;
269:    background: #FFFFFF;
270:    border-bottom: 1px solid #CCCCCC;
271:    border-left: 0 solid #FFFFFF;
272:    color: #555555;
275:    background-color: #F6F6F6;
276:    border-left: 0 solid #F6F6F6;
279:    background-color: #FFFFFF;
280:    border-left: 0 solid #FFFFFF;
416:    background-color: #EEEEEE;
507:    background-color: #FFFFFF;
508:    border-bottom: 1px solid #BBBBBB;
536:    background: #fff;
537:    border: 1px solid #ddd;
538:    box-shadow: inset 0 0 10px 0 #ccc;
541:    border: 1px solid #DDDDDD;
611:    background: #F2F2F2;
612:    border: 1px solid #BBBBBB;
620:    border-top: 1px solid #BBBBBB;
637:    border: 1px solid #CCC;
638:    border-bottom: 1px solid #B3B3B3;
646:    background-image: radial-gradient(ellipse at center, #ffffff 60%,#dfdfdf 100%);
647:    background-color: #ebebeb;
651:    background-image: radial-gradient(ellipse at center, #ffffff 40%,#dfdfdf 100%);
652:    background-color: #dfdfdf;
684:    background: #FFFFFF;
687:    border: 1px solid #BBBBBB;
702:    background-color: #EBEBE4;
742:    border: 0 solid #BBBBBB;
746:    background: #FFFFFF!important;
747:    border-bottom: 1px solid #CCCCCC!important;
748:    border-left: 0 solid #FFFFFF!important;
749:    color: #555555!important;
752:    background-color: #F6F6F6!important;
753:    border-left: 0 solid #F6F6F6;
756:    background-color: #FFFFFF!important;
757:    border-left: 0 solid #FFFFFF;
805:    border: 2px dashed #BBBBBB;
811:    background: #FFFFFF;
817:    border: 2px dashed #fb7979;
820:    box-shadow: 0px 0 0 10px #fff;
824:    background: #FFFFFF;
830:    border: 2px dashed #6c8cd3;
943:    background: #F9F9F9;
944:    border: 1px solid #BBBBBB;

less/moodle/message.less
242:                color: #FFF;

less/moodle/new.less
41:        color: #478FCA;
44:        color: #777777;

less/moodle/question.less
48:    color: #333;
50:    text-shadow: 1px 1px 1px #fff;
52:    border: 1px solid #ccc;
53:    border-bottom: 1px solid #bbb;
54:    #gradient > .vertical(#fff, #ccc);
58:    color: #333;
59:    background: #F2F2F2;
61:    border: 1px solid #ccc;
63:    box-shadow: 5px 5px 20px 0 #666;
74:    border-bottom: 1px solid #bbb;
98:    background-color: #fff;
99:    box-shadow: 0px 0 10px 0 #ccc;
113:    background-color: #fff;
318:    border-bottom: 1px solid #555;
329:    color: #444;
402:    border: 1px solid #ddd;
417:    border: 1px solid #ddd;

less/moodle/tables.less
9:table#defineroletable,

less/moodle/tags.less
111:    border: 1px solid #404040;
112:    background: #fff;
119:    color: #808080;
126:    background: #a0a0a0;
141:    background: #FFFFCC;
bmbrands commented 10 years ago

OOooh nice! Maybe we can do a auto replace with variables from bootstrap.. command line git grep does not seem to work on my install :( stupid git

bmbrands commented 10 years ago

this will do the trick too: grep -E '#[a-fA-F0-9]{3,6}' less/moodle/*

bmbrands commented 10 years ago

Or even better: grep -hoE '#[a-fA-F0-9]{3,6}' less/moodle/*

bmbrands commented 10 years ago

List of moodle hardcoded colours

#000
#000000
#333
#404040
#444
#478FCA
#555
#555555
#666
#6c8cd3
#777
#777777
#808080
#909090
#999
#9DA0A4
#A6982B
#AAA
#B3B3B3
#BBBBBB
#CCC
#CCCCCC
#D4C237
#D6F8CD
#DCE7EC
#DDD
#DDDDDD
#E1E1E8
#E5EFFD
#EBEBE4
#EEE
#EEEEEE
#F2F2F2
#F5F5F5
#F6F6F6
#F7F7F9
#F9F9F9
#FEE7AE
#FFD3BD
#FFEE69
#FFF
#FFFFCC
#FFFFD8
#FFFFFF
#a0a0a0
#a1a1a8
#add
#addc
#bbb
#ccc
#ddd
#ddffaa
#def
#dfdfdf
#e1e1e8
#ebebeb
#eee
#eeeeee
#f6f6f6
#fafafa
#fb7979
#fff
#ffffff
ds125v commented 10 years ago

The file manager can probably wait. It's in it's own little world and doesn't change with Bootswatches. I've got a half-baked plan to map the styles from Bootstrap's nice, flat modals but it's bigger than just fixing colors.

The first time I swept through and changed hardcoded colors I left all the 1px borders as I didn't really have a good idea what to do with them. I think just @tabel-border-color will do (even though in Moodle there's about 6 different shades used for this purpose).

I've also got a sed script somewhere for changing all the 6 color hex's to 3 color hexes and lowercasing them all as well, so you can easily grep ones that are the same.

ds125v commented 10 years ago

Really old bug about this https://tracker.moodle.org/browse/MDL-39133

ds125v commented 10 years ago

Sed oneliners are in the comments here:

https://tracker.moodle.org/browse/MDL-40855

ds125v commented 10 years ago

209 normalizes the CSS so you can get a better idea of what colors are currently in use.

ds125v commented 10 years ago

I noticed the grep line I pasted in the first comment seems to have lost a couple of backslashes, trying again:

git grep '#[a-fA-F0-9]\{3,6\}' -- less/moodle/**