API tools faq
paste
Searaw

RENSHUU CSS CONTEST 2025 V2

Searaw
Oct 31st, 2025 (edited)
80
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.80 KB | Source Code | 0 0
raw download clone embed print report
  1. :root {
  2.  
  3.  
  4.  
  5.     --bg-adjusted: hsl(from var(--text) h s calc(100 - l));
  6.     --text-adjusted:hsl(from var(--text) h s calc( 10 + l * 1));
  7. }
  8. .fwrap .sched_box{
  9.     display:flex;
  10.    
  11.     position:relative;
  12.    
  13. }
  14.  
  15. .schedbox2.sched_split  :div{
  16.  
  17.     border-radius:5px;
  18.     border-width:1px;
  19.     display:grid;
  20.     flex-wrap:wrap;
  21.     width:100%;
  22.     min-height:65px;
  23.    
  24. }
  25. .sched_box_v3.flexbox   {
  26.  
  27.     border-radius:5px!important;
  28.     border-width:1px;
  29.    // display:grid;
  30.    // flex-wrap:wrap;
  31.    // width:100%;
  32.    // min-height:65px;
  33.    
  34. }
  35. .schedbox2.sched_split  > div:nth-of-type(n+1):hover{
  36.     outline-style: solid;
  37.     outline-width: 1px;
  38.    
  39. }
  40. .sched_box_v3.flexbox:hover  {
  41.  
  42.    outline-style: solid;
  43.     outline-width: 1px;
  44.    
  45. }
  46.  
  47. .pure-u-1-2, .finish_box{
  48.     width:100%!important;
  49. }
  50.  
  51. .sched_box_v3:has(.sched_icon[data-hint="Sentences"]) {
  52.   outline-color: var(--introbox4_on);
  53.   --test-color: var(--introbox4_on);
  54.   background: linear-gradient(
  55.       90deg,
  56.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  57.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox4_on) 40%) 0%,
  58.       var(--bg_main)100%
  59.       );
  60.  
  61. }
  62. .sched_box_v3:has(.sched_icon[data-hint="Words"]) {
  63.   outline-color: var(--introbox1_on);
  64.   --test-color: var(--introbox1_on);
  65.   background: linear-gradient(
  66.       90deg,
  67.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  68.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox1_on) 40%) 0%,
  69.       var(--bg_main)100%
  70.       );
  71.  
  72. }
  73. .sched_box_v3:has(.sched_icon[data-hint="Kanji"]) {
  74.   outline-color: var(--introbox3_on);
  75.   --test-color: var(--introbox3_on);
  76.   background: linear-gradient(
  77.       90deg,
  78.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  79.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox3_on) 40%) 0%,
  80.       var(--bg_main)100%
  81.       );
  82.  
  83. }
  84. .sched_box_v3:has(.sched_icon[data-hint="Grammar"]) {
  85.   outline-color: var(--introbox2_on);
  86.   --test-color: var(--introbox2_on);
  87.   background: linear-gradient(
  88.       90deg,
  89.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  90.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox2_on) 40%) 0%,
  91.       var(--bg_main)100%
  92.       );
  93.  
  94. }
  95.  
  96. .c_circular-chart.sched_icon{
  97.     height:100%!important;
  98.     width:30px!important;
  99.    
  100.     margin: -4px 0 0 0;
  101.     background-color:var(--test-color);    
  102.   clip-path: polygon(
  103.     0% 0%,      /* top-left */
  104.     100% 0%,   /* top-right shifted down (controls angle) */
  105.     100% 100%,   /* bottom-right shifted up (controls angle) */
  106.     50% 90%,
  107.     0% 100%     /* bottom-left */
  108.   );
  109.     filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--test-color) 50%, black 50% ));
  110.    
  111.  
  112. }
  113.  
  114. .sched_icon .c_percentage {
  115.  
  116.        background-clip: text;
  117.        -webkit-background-clip: text;
  118.        -moz-background-clip: text;
  119.        fill: color-mix(in srgb, var(--test-color) 50%, black 50% )!important;
  120.        
  121.        
  122. }
  123.  
  124. .sched_blinks > :first-child {
  125.   order: 99; /* or any number higher than others */
  126.     margin-left: 8px;
  127. }
  128.  
  129. .sched_blinks > .bl_spacer :after{
  130.     content: '-';
  131. }
  132. .fas.fa-ellipsis-v::before {
  133.   font-family: "Font Awesome 5 Pro";
  134.   font-weight: 900;
  135.   content: "\f142" !important;
  136.    
  137. }
  138. .sched_data{
  139.     margin-left:10px;
  140.  
  141.     height:18px;
  142.     grid-area:inherit!important;
  143.    
  144. }
  145.  
  146. .sched_link{
  147.     align-self:normal!important;
  148.     margin-top:0px;
  149.     margin-left:10px;
  150.    
  151. }
  152.  
  153. .sched_status .tlnk:not(.pure-button){
  154.     color:var(--test-color);
  155. }
  156. .sched_status > *:not(:last-child) {
  157.   grid-column: 1;
  158.    
  159.     width:100%
  160. }
  161. .sched_status > :last-child {
  162.   grid-column: 2;
  163.     grid-row: 1 / span 2;
  164.    
  165.    
  166.    
  167.  
  168. }
  169. .sched_status > div:first-of-type:has(> .ki_light_on) {
  170.     margin-top: 12px;
  171. }
  172.  
  173. .flexbox .fcenter .sched_blinks{
  174.     display:none!important;
  175. }
  176. .tlnk .grow .right{
  177.     width:10px!important;
  178.    
  179. }
  180. .sched_status{
  181.  justify-content: space-between;
  182.     align-self:end;
  183.     margin-right: auto;
  184.  
  185.     flex-basis:100%;
  186.     width:100%;
  187.    
  188.     max-width:100%!important;
  189.     display:grid;
  190. }
  191.  
  192. .sched_link a{
  193.     --color-text:color-mix(in srgb, var(--test-color) 60%, var(--text-adjusted) 40%);
  194.     color:var(--color-text);
  195.    
  196. }
  197. .sched_link a:hover{
  198.         color:color-mix(in srgb, var(--color-text) 70%, white 30%);
  199. }
  200.  
  201. .sched_icon{
  202.     /*display:none;*/
  203. }:root {
  204.  
  205.  
  206.  
  207.     --bg-adjusted: hsl(from var(--text) h s calc(100 - l));
  208.     --text-adjusted:hsl(from var(--text) h s calc( 10 + l * 1));
  209. }
  210. .fwrap .sched_box{
  211.     display:flex;
  212.    
  213.     position:relative;
  214.    
  215. }
  216.  
  217. .schedbox2.sched_split  > div:nth-of-type(n+1){
  218.  
  219.     border-radius:5px;
  220.     border-width:1px;
  221.     display:grid;
  222.     flex-wrap:wrap;
  223.     width:100%;
  224.     min-height:65px;
  225.    
  226. }
  227. .schedbox2.sched_split  > div:nth-of-type(n+1):hover{
  228.     outline-style: solid;
  229.     outline-width: 1px;
  230.    
  231. }
  232.  
  233. .pure-u-1-2, .finish_box{
  234.     width:100%!important;
  235. }
  236.  
  237. .sched_box_v3:has(.sched_icon[data-hint="Sentences"]) {
  238.   outline-color: var(--introbox4_on);
  239.   --test-color: var(--introbox4_on);
  240.   background: linear-gradient(
  241.       90deg,
  242.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  243.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox4_on) 40%) 0%,
  244.       var(--bg_main)100%
  245.       );
  246.  
  247. }
  248. .sched_box_v3:has(.sched_icon[data-hint="Words"]) {
  249.   outline-color: var(--introbox1_on);
  250.   --test-color: var(--introbox1_on);
  251.   background: linear-gradient(
  252.       90deg,
  253.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  254.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox1_on) 40%) 0%,
  255.       var(--bg_main)100%
  256.       );
  257.  
  258. }
  259. .sched_box_v3:has(.sched_icon[data-hint="Kanji"]) {
  260.   outline-color: var(--introbox3_on);
  261.   --test-color: var(--introbox3_on);
  262.   background: linear-gradient(
  263.       90deg,
  264.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  265.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox3_on) 40%) 0%,
  266.       var(--bg_main)100%
  267.       );
  268.  
  269. }
  270. .sched_box_v3:has(.sched_icon[data-hint="Grammar"]) {
  271.   outline-color: var(--introbox2_on);
  272.   --test-color: var(--introbox2_on);
  273.   background: linear-gradient(
  274.       90deg,
  275.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  276.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox2_on) 40%) 0%,
  277.       var(--bg_main)100%
  278.       );
  279.  
  280. }
  281.  
  282. .c_circular-chart.sched_icon{
  283.     height:100%!important;
  284.     width:30px!important;
  285.    
  286.     margin: -4px 0 0 0;
  287.     background-color:var(--test-color);    
  288.   clip-path: polygon(
  289.     0% 0%,      /* top-left */
  290.     100% 0%,   /* top-right shifted down (controls angle) */
  291.     100% 100%,   /* bottom-right shifted up (controls angle) */
  292.     50% 90%,
  293.     0% 100%     /* bottom-left */
  294.   );
  295.     filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--test-color) 50%, black 50% ));
  296.    
  297.  
  298. }
  299.  
  300. .sched_icon .c_percentage {
  301.  
  302.        background-clip: text;
  303.        -webkit-background-clip: text;
  304.        -moz-background-clip: text;
  305.        fill: color-mix(in srgb, var(--test-color) 50%, black 50% )!important;
  306.        
  307.        
  308. }
  309.  
  310. .sched_blinks > :first-child {
  311.   order: 99; /* or any number higher than others */
  312.     margin-left: 8px;
  313. }
  314.  
  315. .sched_blinks > .bl_spacer :after{
  316.     content: '-';
  317. }
  318. .fas.fa-ellipsis-v::before {
  319.   font-family: "Font Awesome 5 Pro";
  320.   font-weight: 900;
  321.   content: "\f142" !important;
  322.    
  323. }
  324. .sched_data{
  325.     margin-left:10px;
  326.  
  327.     height:18px;
  328.     grid-area:inherit!important;
  329.    
  330. }
  331.  
  332. .sched_link{
  333.     align-self:normal!important;
  334.     margin-top:0px;
  335.      margin-left:10px;
  336.    
  337. }
  338.  
  339. .sched_status .tlnk:not(.pure-button){
  340.     color:var(--test-color);
  341. }
  342. .sched_status > *:not(:last-child) {
  343.   grid-column: 1;
  344.    
  345.     width:100%
  346. }
  347. .sched_status > :last-child {
  348.   grid-column: 2;
  349.     grid-row: 1 / span 2;
  350.    
  351.    
  352.    
  353.  
  354. }
  355. .sched_status > div:first-of-type:has(> .ki_light_on) {
  356.     margin-top: 8px;
  357. }
  358. .sched_status>div:first-of-type>div  {
  359.     margin-top: 8px!important;
  360. }
  361. .sched_status>div:not(:last-child){
  362.     margin-left: 10px
  363. }
  364. .flexbox .fcenter .sched_blinks{
  365.     display:none!important;
  366. }
  367. .tlnk .grow .right{
  368.     width:10px!important;
  369.    
  370. }
  371. .sched_status{
  372.  justify-content: space-between;
  373.     align-self:end;
  374.     margin-right: auto;
  375.  
  376.     flex-basis:100%;
  377.     width:100%;
  378.    
  379.     max-width:100%!important;
  380.     display:grid;
  381. }
  382.  
  383. .sched_link a{
  384.     --color-text:color-mix(in srgb, var(--test-color) 60%, var(--text-adjusted) 40%);
  385.     color:var(--color-text);
  386.    
  387. }
  388. .sched_link a:hover{
  389.         color:color-mix(in srgb, var(--color-text) 70%, white 30%);
  390. }
  391.  
  392. .sched_icon{
  393.     /*display:none;*/
  394. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!