RENSHUU CSS CONSTEST 2025 v1

:root {



    --bg-adjusted: hsl(from var(--text) h s calc(100 - l));
    --text-adjusted:hsl(from var(--text) h s calc( 10 + l * 1));
}
.fwrap .sched_box{
    display:flex;

    position:relative;

}

.schedbox2.sched_split  > div:nth-of-type(n+1){

    border-radius:5px;
    border-width:1px;
    display:grid;
    flex-wrap:wrap;
    width:100%;
    min-height:65px;

}
.schedbox2.sched_split  > div:nth-of-type(n+1):hover{
    outline-style: solid;
    outline-width: 1px;

}

.sched_box_v3:has(.sched_icon[data-hint="Sentences"]) {
  outline-color: var(--introbox4_on);
  --test-color: var(--introbox4_on);
  background: linear-gradient(
      90deg,
      /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
      color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox4_on) 40%) 0%,
      var(--bg_main)100%
      );

}
.sched_box_v3:has(.sched_icon[data-hint="Words"]) {
  outline-color: var(--introbox1_on);
  --test-color: var(--introbox1_on);
  background: linear-gradient(
      90deg,
      /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
      color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox1_on) 40%) 0%,
      var(--bg_main)100%
      );

}
.sched_box_v3:has(.sched_icon[data-hint="Kanji"]) {
  outline-color: var(--introbox3_on);
  --test-color: var(--introbox3_on);
  background: linear-gradient(
      90deg,
      /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
      color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox3_on) 40%) 0%,
      var(--bg_main)100%
      );

}
.sched_box_v3:has(.sched_icon[data-hint="Grammar"]) {
  outline-color: var(--introbox2_on);
  --test-color: var(--introbox2_on);
  background: linear-gradient(
      90deg,
      /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
      color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox2_on) 40%) 0%,
      var(--bg_main)100%
      );

}

.c_circular-chart{
    height:100%!important;
    width:30px!important;

    margin: -4px 0 0 0;
    background-color:var(--test-color);
  clip-path: polygon(
    0% 0%,      /* top-left */
    100% 0%,   /* top-right shifted down (controls angle) */
    100% 100%,   /* bottom-right shifted up (controls angle) */
    50% 90%,
    0% 100%     /* bottom-left */
  );
    filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--test-color) 50%, black 50% ));


}

.c_percentage{

       background-clip: text;
       -webkit-background-clip: text;
       -moz-background-clip: text;
       fill: color-mix(in srgb, var(--test-color) 50%, black 50% )!important;


}

.sched_data{
    margin-left:10px;

    height:18px;
    grid-area:inherit!important;

}

.sched_link{
    align-self:normal!important;
    margin-top:0px;
    margin-left:10px;

}

.sched_status .tlnk:not(.pure-button){
    color:var(--test-color);
}
.sched_status > *:not(:last-child) {
  grid-column: 1;

    width:100%
}
.sched_status > :last-child {
  grid-column: 2;




}

.flexbox .fcenter .sched_blinks{
    display:none!important;
}
.tlnk .grow .right{
    width:10px!important;
}
.sched_status{
 justify-content: space-between;
    align-self:end;
    margin-right: auto;

    flex-basis:100%;
    width:100%;

    max-width:100%!important;
    display:grid;
}

.sched_link a{
    --color-text:color-mix(in srgb, var(--test-color) 60%, var(--text-adjusted) 40%);
    color:var(--color-text);

}
.sched_link a:hover{
        color:color-mix(in srgb, var(--color-text) 70%, white 30%);
}

.sched_icon{
    /*display:none;*/
}