design/css.example

   1 classes
   2   AbstractStyle
   3   AbstractStyleState
   4   Scope
   5   Style
   6   StylesDefinition
   7   Styles
   8   StyleState
   9   StyleStates
  10  +StyleSheet
  11  +StyleSheetFile
  12
  13
  14 Simple heirarchy of elements
  15   default
  16     system
  17       user#james
  18         profile#default
  19           file
  20             playlist
  21               song#GreatBigGod.actions.music
  22                 text#songname.smallprint
  23                 text#copyright.smallprint
  24                 verse#1.noah
  25                 verse#2.chorus
  26                   page
  27                     text#lyrics.lyrics
  28 every scope has:
  29   type:name key
  30   set of classes
  31   set of css stylesheets (like a css file local to the scope of the item)
  32     each definition can have multiple triggers (ref counted)
  33     scope type and name are implied
  34     therefore only needed when applying to children
  35       e.g. song style may be stored in song db and copied to song object
  36            song_instance styles get stored in file and override song object
  37   hardcoded style lists (the content of {} in css)
  38
  39 recalculateStyles(scope)
  40   get parent styles (recursive)
  41   get parent style definitions
  42   fast lookup in definitions for this->type#this->name as next type#name
  43     check matching classes
  44       if last type#name
  45         apply styles
  46         remove from list
  47   add local stylesheets to list
  48   apply local style lists
  49   recalculate children
  50
  51 class categories
  52   background_%s
  53   tag_%s
  54   verse_%u
  55 items
  56   song
  57   bible
  58
  59 style definition
  60   types/names of scopes
  61   classes
  62   use classes
  63   styles
  64
  65 == backgrounds ==
  66
  67 .background_sunset
  68 {
  69   background-image: "sunset.jpg";
  70   background-aspect: stretch;
  71   font-fill: solid red;
  72   font-outline: 8% solid black;
  73   font-shadow: solid gray;
  74   font-shadow-offset: 20%;
  75 }
  76
  77 .background_sunset #overlay
  78 {
  79   position: top;
  80   overlay-fill: solid grey;
  81   overlay-opacity: 30%;
  82   font-shadow: none;
  83 }
  84
  85 == profiles ==
  86
  87 == playlist ==
  88
  89 == song ==
  90 .chorus : .tag_wonderous;
  91
  92 === 1 ===
  93 .chorus;
  94
  95 {
  96   font-size: 90%;
  97 }